Palette de couleurs Drizzle Light
Drizzle Light est une palette de 6 couleurs qui puise dans les turquoises et cyans, violets, bleus et neutres. En OKLCH, sa luminosité va de 25 % (#05282B, foncé) à 97 % (#EDF5FF, très clair), et sa couleur la plus saturée, #567A8D, est atténué. 4 de ses 5 couleurs chromatiques se situent du côté froid du cercle chromatique. 5 de ses 15 paires de couleurs atteignent le rapport WCAG AA de 4,5:1 pour le texte courant. Étiquettes : apaisantes, froides, bleues, sourdes et neutres.
- Jet #05282B
- Dim Gray #4B4055
- Cerulean #567A8D
- Cool Gray #9798B8
- Tiffany Blue #A2C7BE
- Anti-Flash White #EDF5FF
Codes couleur
| Couleur | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Jet | #05282B | rgb(5, 40, 43) | hsl(185, 79%, 9%) | oklch(25.4% 0.039 203.3) |
| Dim Gray | #4B4055 | rgb(75, 64, 85) | hsl(271, 14%, 29%) | oklch(39.1% 0.038 308.4) |
| Cerulean | #567A8D | rgb(86, 122, 141) | hsl(201, 24%, 45%) | oklch(56% 0.05 231.8) |
| Cool Gray | #9798B8 | rgb(151, 152, 184) | hsl(238, 19%, 66%) | oklch(69% 0.047 283.7) |
| Tiffany Blue | #A2C7BE | rgb(162, 199, 190) | hsl(165, 25%, 71%) | oklch(80% 0.041 178.8) |
| Anti-Flash White | #EDF5FF | rgb(237, 245, 255) | hsl(213, 100%, 96%) | oklch(96.7% 0.016 253.9) |
Accessibilité
Les meilleures paires texte et fond de Drizzle Light, classées par rapport de contraste WCAG 2, avec le contraste de luminosité APCA (Lc) du texte sur son fond.
| Paire | WCAG 2 | Niveau | APCA Lc |
|---|---|---|---|
| #EDF5FF sur #05282B | 14.21:1 | AAA | Lc -97.9 |
| #EDF5FF sur #4B4055 | 8.83:1 | AAA | Lc -89.5 |
| #05282B sur #A2C7BE | 8.51:1 | AAA | Lc 65.8 |
Vision des couleurs
Aucune paire de couleurs ne se rapproche à moins de ΔE 0.06 d’une autre en protanopie, deutéranopie, tritanopie ou achromatopsie.
Protanopie
Deutéranopie
Tritanopie
Achromatopsie
À utiliser dans votre code
Installez ces couleurs comme couleurs de thème Tailwind CSS v4 avec shadcn : npx shadcn@latest add https://getcolors.so/r/palette/05282b-4b4055-567a8d-9798b8-a2c7be-edf5ff.json.
Faites-la vôtre
Modifiez les couleurs, créez-en un système complet clair et sombre, ou voyez-les sur une vraie interface.