Palette de couleurs Basalt and Summit
Basalt and Summit est une palette de 5 couleurs qui puise dans les turquoises et cyans, bleus, violets et neutres. En OKLCH, sa luminosité va de 33 % (#153B3D, foncé) à 96 % (#DFF6FF, très clair), et sa couleur la plus saturée, #585D84, est atténué. 3 de ses 4 couleurs chromatiques se situent du côté froid du cercle chromatique. 3 de ses 10 paires de couleurs atteignent le rapport WCAG AA de 4,5:1 pour le texte courant. Étiquettes : nature, froides, violettes, sourdes, apaisantes et adaptées au daltonisme.
NatureFroidesViolettesSourdesApaisantesAdaptées au daltonisme
- Midnight Green #153B3D
- Dusty Grape #585D84
- Cool Gray #9689A8
- Light Cornflower Blue #A9C3DF
- Light Cyan #DFF6FF
Codes couleur
| Couleur | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Midnight Green | #153B3D | rgb(21, 59, 61) | hsl(183, 49%, 16%) | oklch(32.6% 0.043 200) |
| Dusty Grape | #585D84 | rgb(88, 93, 132) | hsl(233, 20%, 43%) | oklch(49% 0.063 278.2) |
| Cool Gray | #9689A8 | rgb(150, 137, 168) | hsl(265, 15%, 60%) | oklch(65.2% 0.048 304.2) |
| Light Cornflower Blue | #A9C3DF | rgb(169, 195, 223) | hsl(211, 46%, 77%) | oklch(80.7% 0.049 250.4) |
| Light Cyan | #DFF6FF | rgb(223, 246, 255) | hsl(197, 100%, 94%) | oklch(95.9% 0.027 223.2) |
Accessibilité
Les meilleures paires texte et fond de Basalt and Summit, 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 |
|---|---|---|---|
| #DFF6FF sur #153B3D | 10.88:1 | AAA | Lc -92.6 |
| #A9C3DF sur #153B3D | 6.70:1 | AA | Lc -62.0 |
| #DFF6FF sur #585D84 | 5.66:1 | AA | Lc -78.1 |
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. Elle est étiquetée adaptée au daltonisme : chaque paire reste à au moins ΔE 0,14.
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/153b3d-585d84-9689a8-a9c3df-dff6ff.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.