Creato a 06/08/2025 14:47
Accessible UI Kit Components
- Label Navy#1e3a8a
- Focus Yellow#fee440
- Canvas Cloud#f9fafb
- Toggle Slate#64748b
- CTA Coral#ff6b6b
- Form Green#10b981
La tavolozza è composta da Leggero colori. Colori accentati CTA Coral #ff6b6b e Form Green #10b981. La tavolozza ha la temperatura del colore Freddo, Caldo, Neutro.
Per luminosità, la tavolozza va da #1E3A8A (più scuro) a #F9FAFB (più chiaro). L’intervallo di luminosità è ampio.
La saturazione complessiva risulta vivida (croma alto).
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): #10B981, #1E3A8A, #64748B, #F9FAFB, #FEE440, #FF6B6B
La tavolozza Accessible UI Kit Components ha una combinazione di colori dei codici 6:
ESADECIMALE: #1e3a8a, RGB: (30, 58, 138); ESADECIMALE: #fee440, RGB: (254, 228, 64); ESADECIMALE: #f9fafb, RGB: (249, 250, 251)
ESADECIMALE: #64748b, RGB: (100, 116, 139); ESADECIMALE: #ff6b6b, RGB: (255, 107, 107); ESADECIMALE: #10b981, RGB: (16, 185, 129)
Versione semplificata della tavolozza dei colori
Tonalità di darkslateblue, Ombra di gold, Ombra di whitesmoke, Tonalità di slategrey, Tonalità di salmon, Tonalità di mediumseagreen
La combinazione di colori è stata creata da hex
Codici colori nella tavolozza
Accessible UI Kit Components codici colore HEX, informazioni RGB in tabella
| Colore | ESADECIMALE | RGB | Nome | Nome alternativo |
| #1e3a8a | #1e3a8a | RGB(30, 58, 138) | Label Navy | — |
| #fee440 | #fee440 | RGB(254, 228, 64) | Focus Yellow | — |
| #f9fafb | #f9fafb | RGB(249, 250, 251) | Canvas Cloud | — |
| #64748b | #64748b | RGB(100, 116, 139) | Toggle Slate | — |
| #ff6b6b | #ff6b6b | RGB(255, 107, 107) | CTA Coral | — |
| #10b981 | #10b981 | RGB(16, 185, 129) | Form Green | — |
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 |
#fee440 | #f9fafb | 1.22 |
#fee440 | #10b981 | 1.97 |
#64748b | #ff6b6b | 1.71 |
#64748b | #10b981 | 1.87 |
#ff6b6b | #10b981 | 1.09 |
Tavolozza immagini Accessible UI Kit Components png
Esporta tavolozza
Scarica la "Accessible UI Kit Components" in più formati per un'integrazione senza interruzioni nei tuoi progetti di design.
Formati disponibili: