Palette de couleurs Umber Workshop
Umber Workshop est une palette de 6 couleurs qui puise dans les verts, bruns, rouges, oranges, jaunes et neutres. En OKLCH, sa luminosité va de 34 % (#233F20, foncé) à 97 % (#FFF2EB, très clair), et sa couleur la plus saturée, #233F20, est atténué. 3 de ses 5 couleurs chromatiques se situent du côté chaud du cercle chromatique. 3 de ses 15 paires de couleurs atteignent le rapport WCAG AA de 4,5:1 pour le texte courant. Étiquettes : terreuses, sourdes, vertes, chaudes et apaisantes.
- Pakistan Green #233F20
- Dark Moss Green #565E3A
- Gray #8D7370
- Pewter #B49775
- Pale Oak #D4CBAC
- Seashell #FFF2EB
Codes couleur
| Couleur | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Pakistan Green | #233F20 | rgb(35, 63, 32) | hsl(114, 33%, 19%) | oklch(33.6% 0.063 142) |
| Dark Moss Green | #565E3A | rgb(86, 94, 58) | hsl(73, 24%, 30%) | oklch(46.5% 0.055 118.8) |
| Gray | #8D7370 | rgb(141, 115, 112) | hsl(6, 11%, 50%) | oklch(58% 0.033 25.8) |
| Pewter | #B49775 | rgb(180, 151, 117) | hsl(32, 30%, 58%) | oklch(69.4% 0.058 71.1) |
| Pale Oak | #D4CBAC | rgb(212, 203, 172) | hsl(46, 32%, 75%) | oklch(84.1% 0.043 93.7) |
| Seashell | #FFF2EB | rgb(255, 242, 235) | hsl(21, 100%, 96%) | oklch(96.9% 0.017 50.4) |
Accessibilité
Les meilleures paires texte et fond de Umber Workshop, 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 |
|---|---|---|---|
| #FFF2EB sur #233F20 | 10.62:1 | AAA | Lc -93.3 |
| #D4CBAC sur #233F20 | 7.17:1 | AAA | Lc -67.5 |
| #FFF2EB sur #565E3A | 6.26:1 | AA | Lc -81.7 |
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/233f20-565e3a-8d7370-b49775-d4cbac-fff2eb.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.