Creato a 07/10/2025 08:28
Web Component Visual System
- Pixel Teal#00bfa6
- Doc Canvas Cream#fff7ec
- Tag Indigo#4b49ac
- Hover Pink#fdaeae
- Codebar Black#181818
- Box Shadow Grey#e0e0e0
La tavolozza è composta da Leggero, Semi scuro, Buio colori. Colori accentati Pixel Teal #00bfa6 e Doc Canvas Cream #fff7ec. La tavolozza ha la temperatura del colore Freddo, Neutro, Caldo.
Per luminosità, la tavolozza va da #181818 (più scuro) a #FFF7EC (più chiaro). L’intervallo di luminosità è ampio.
Saturazione mista — alcuni campioni smorzati e accenti più vivaci.
Alcune coppie di tonalità sono vicine a posizioni complementari — si può leggere come contrasto complementare (euristica).
Complessivamente la temperatura tende al freddo.
Codici HEX (ordinati): #00BFA6, #181818, #4B49AC, #E0E0E0, #FDAEAE, #FFF7EC
La tavolozza Web Component Visual System ha una combinazione di colori dei codici 6:
ESADECIMALE: #00bfa6, RGB: (0, 191, 166); ESADECIMALE: #fff7ec, RGB: (255, 247, 236); ESADECIMALE: #4b49ac, RGB: (75, 73, 172)
ESADECIMALE: #fdaeae, RGB: (253, 174, 174); ESADECIMALE: #181818, RGB: (24, 24, 24); ESADECIMALE: #e0e0e0, RGB: (224, 224, 224)
Versione semplificata della tavolozza dei colori
Tonalità di lightseagreen, Tonalità di floralwhite, Ombra di darkslateblue, Tonalità di lightpink, Ombra di Nero, Ombra di gainsboro
La combinazione di colori è stata creata da palettespicker
Codici colori nella tavolozza
Web Component Visual System codici colore HEX, informazioni RGB in tabella
| Colore | ESADECIMALE | RGB | Nome | Nome alternativo |
| #00bfa6 | #00bfa6 | RGB(0, 191, 166) | Pixel Teal | — |
| #fff7ec | #fff7ec | RGB(255, 247, 236) | Doc Canvas Cream | — |
| #4b49ac | #4b49ac | RGB(75, 73, 172) | Tag Indigo | — |
| #fdaeae | #fdaeae | RGB(253, 174, 174) | Hover Pink | — |
| #181818 | #181818 | RGB(24, 24, 24) | Codebar Black | Thamar Black |
| #e0e0e0 | #e0e0e0 | RGB(224, 224, 224) | Box Shadow Grey | Gray88 |
Contrasto della palette di colori
5 coppie di colori hanno un basso contrasto e necessitano di miglioramenti, il che può influire sulla leggibilità.
| Colore del testo | Colore di sfondo | Rapporto di contrasto |
#00bfa6 | #fdaeae | 1.31 |
#00bfa6 | #e0e0e0 | 1.76 |
#fff7ec | #fdaeae | 1.66 |
#fff7ec | #e0e0e0 | 1.24 |
#fdaeae | #e0e0e0 | 1.34 |
Tavolozza immagini Web Component Visual System png
Esporta tavolozza
Scarica la "Web Component Visual System" in più formati per un'integrazione senza interruzioni nei tuoi progetti di design.
Formati disponibili: