Palette · 4 colors · Lc 9.5
Clouded Pine Horizon palette
Clouded Pine Horizon: a 4-color palette (Green, Gray, UI System, 4 Colors). HEX, RGB, HSL and OKLCH for #E7F1E9, #B0BCB2, #608161, #0C1F0F, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#E7F1E9
surface
#B0BCB2
accent
#608161
text
#0C1F0F
Colors in Clouded Pine Horizon: HEX, RGB, HSL & OKLCH
- #E7F1E9 color page →
bg
#E7F1E9
- RGB
- rgb(231 241 233)
- HSL
- hsl(132 26% 93%)
- OKLCH
- oklch(0.948 0.015 151.8)
WCAG contrast: on white 1.15:1 (Fail) · on black 18.15:1 (AAA)
- #B0BCB2 color page →
surface
#B0BCB2
- RGB
- rgb(176 188 178)
- HSL
- hsl(130 8% 71%)
- OKLCH
- oklch(0.783 0.019 150.5)
WCAG contrast: on white 1.96:1 (Fail) · on black 10.68:1 (AAA)
- #608161 color page →
accent
#608161
- RGB
- rgb(96 129 97)
- HSL
- hsl(122 15% 44%)
- OKLCH
- oklch(0.569 0.061 145.5)
WCAG contrast: on white 4.36:1 (Fail) · on black 4.81:1 (AA)
- #0C1F0F color page →
text
#0C1F0F
- RGB
- rgb(12 31 15)
- HSL
- hsl(129 44% 8%)
- OKLCH
- oklch(0.218 0.04 147.6)
WCAG contrast: on white 17.23:1 (AAA) · on black 1.21:1 (Fail)
Export Clouded Pine Horizon: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #e7f1e9;
--surface: #b0bcb2;
--accent: #608161;
--text: #0c1f0f;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #e7f1e9;
--color-surface: #b0bcb2;
--color-accent: #608161;
--color-text: #0c1f0f;
}JSON (DTCG tokens)
{
"clouded-pine-horizon-2h9": {
"bg": {
"$type": "color",
"$value": "#e7f1e9"
},
"surface": {
"$type": "color",
"$value": "#b0bcb2"
},
"accent": {
"$type": "color",
"$value": "#608161"
},
"text": {
"$type": "color",
"$value": "#0c1f0f"
}
}
}About this palette
Clouded Pine Horizon is a 4-color OKLCH-ready palette tagged green, gray, ui system, 4 colors. Hex values: #E7F1E9, #B0BCB2, #608161, #0C1F0F. APCA contrast score Lc 9.5. Open it in Colorise Pro Studio to lock roles and regenerate harmonies.
Related palettes
Shared tags, similar size and contrast.
Palettes with similar colors
Closest to Clouded Pine Horizon by OKLab color distance.