Caramel Grind color palette
Caramel Grind is a 4-color palette drawing on neutrals, browns and oranges. In OKLCH its lightness runs from 19% (#1C110D, very dark) to 87% (#D9D4C9, light), and its most saturated color, #A0522D, is moderately saturated. 2 of its 2 chromatic colors sit on the warm side of the hue wheel. 2 of its 6 color pairs reach the WCAG AA ratio of 4.5:1 for body text. It is tagged coffee, warm, brown, orange, muted and colorblind-friendly.
- Rich Navy #1C110D
- Sinopia #A0522D
- English Lavender #B88B66
- Cadet Gray #D9D4C9
Color codes
| Color | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Rich Navy | #1C110D | rgb(28, 17, 13) | hsl(16, 37%, 8%) | oklch(19.1% 0.02 40.8) |
| Sinopia | #A0522D | rgb(160, 82, 45) | hsl(19, 56%, 40%) | oklch(52.6% 0.115 44.6) |
| English Lavender | #B88B66 | rgb(184, 139, 102) | hsl(27, 37%, 56%) | oklch(67.1% 0.075 60.5) |
| Cadet Gray | #D9D4C9 | rgb(217, 212, 201) | hsl(41, 17%, 82%) | oklch(87.1% 0.016 86.4) |
Accessibility
The best text and background pairs in Caramel Grind, by WCAG 2 contrast ratio, with the APCA lightness contrast (Lc) of the text on its background.
| Pair | WCAG 2 | Level | APCA Lc |
|---|---|---|---|
| #1C110D on #D9D4C9 | 12.52:1 | AAA | Lc 80.2 |
| #1C110D on #B88B66 | 6.10:1 | AA | Lc 46.0 |
| #D9D4C9 on #A0522D | 3.80:1 | AA large | Lc -55.7 |
Color vision
No pair of colors comes within ΔE 0.06 of another under protanopia, deuteranopia, tritanopia or achromatopsia. It is tagged colorblind-friendly: every pair stays at least ΔE 0.14 apart.
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
Use it in code
Install these colors as Tailwind CSS v4 theme colors with shadcn: npx shadcn@latest add https://getcolors.so/r/palette/1c110d-a0522d-b88b66-d9d4c9.json.
Make it your own
Edit the colors, build a full light and dark color system from them, or see them on real UI.