Creato a 07/04/2025 10:04
Design Token Web Components
- Schema Peach#ffe5b4
- Atomic Blue#4fb3ff
- Slot Soft Gray#efefef
- Hierarchy Black#222222
- Cascade Seafoam#b0ffdc
- Render Slate#5e6472
La tavolozza è composta da Leggero, Buio, Semi scuro colori. Colori accentati Schema Peach #ffe5b4 e Atomic Blue #4fb3ff. La tavolozza ha la temperatura del colore Caldo, Freddo, Neutro.
Per luminosità, la tavolozza va da #222222 (più scuro) a #EFEFEF (più chiaro). L’intervallo di luminosità è ampio.
Saturazione mista — 3 smorzati e 3 vivaci su 6 colori.
Alcune coppie di tonalità sono vicine a posizioni complementari — si può leggere come contrasto complementare (euristica).
Complessivamente la temperatura tende al freddo (3 su 6).
Codici HEX (ordinati): #222222, #4FB3FF, #5E6472, #B0FFDC, #EFEFEF, #FFE5B4
La tavolozza Design Token Web Components ha una combinazione di colori dei codici 6:
ESADECIMALE: #ffe5b4, RGB: (255, 229, 180); ESADECIMALE: #4fb3ff, RGB: (79, 179, 255); ESADECIMALE: #efefef, RGB: (239, 239, 239)
ESADECIMALE: #222222, RGB: (34, 34, 34); ESADECIMALE: #b0ffdc, RGB: (176, 255, 220); ESADECIMALE: #5e6472, RGB: (94, 100, 114)
Versione semplificata della tavolozza dei colori
Ombra di moccasin, Ombra di deepskyblue, Tonalità di whitesmoke, Ombra di Nero, Ombra di aquamarine, Tonalità di dimgrey
La combinazione di colori è stata creata da colorhunt
Codici colori nella tavolozza
Design Token Web Components codici colore HEX, informazioni RGB in tabella
| Colore | ESADECIMALE | RGB | Nome | Nome alternativo |
|---|---|---|---|---|
| #ffe5b4 | #ffe5b4 | RGB(255, 229, 180) | Schema Peach | Mouse Nose |
| #4fb3ff | #4fb3ff | RGB(79, 179, 255) | Atomic Blue | — |
| #efefef | #efefef | RGB(239, 239, 239) | Slot Soft Gray | — |
| #222222 | #222222 | RGB(34, 34, 34) | Hierarchy Black | Black Out |
| #b0ffdc | #b0ffdc | RGB(176, 255, 220) | Cascade Seafoam | — |
| #5e6472 | #5e6472 | RGB(94, 100, 114) | Render Slate | — |
Contrasto della palette di colori
6 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 |
|---|---|---|
#ffe5b4 | #4fb3ff | 1.85 |
#ffe5b4 | #efefef | 1.06 |
#ffe5b4 | #b0ffdc | 1.06 |
#4fb3ff | #efefef | 1.97 |
#4fb3ff | #b0ffdc | 1.97 |
#efefef | #b0ffdc | 1 |
Tavolozza immagini Design Token Web Components png
Esporta tavolozza
Scarica la "Design Token Web Components" in più formati per un'integrazione senza interruzioni nei tuoi progetti di design.
Formati disponibili: