Palette · 8 colors · Lc 9.8
True Treetop Canvas palette
True Treetop Canvas: a 8-color palette (Turquoise, Gray, Cold, 8 Colors). HEX, RGB, HSL and OKLCH for #ECF7F4, #BACDC8, #8CB7AD, #61857F, #436B64, #334D47, #102926, #000706, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#ECF7F4
surface
#BACDC8
muted
#8CB7AD
primary
#61857F
secondary
#436B64
accent
#334D47
highlight
#102926
text
#000706
Colors in True Treetop Canvas: HEX, RGB, HSL & OKLCH
- #ECF7F4 color page →
bg
#ECF7F4
- RGB
- rgb(236 247 244)
- HSL
- hsl(164 41% 95%)
- OKLCH
- oklch(0.967 0.012 178)
WCAG contrast: on white 1.09:1 (Fail) · on black 19.17:1 (AAA)
- #BACDC8 color page →
surface
#BACDC8
- RGB
- rgb(186 205 200)
- HSL
- hsl(164 16% 77%)
- OKLCH
- oklch(0.832 0.022 178.2)
WCAG contrast: on white 1.65:1 (Fail) · on black 12.65:1 (AAA)
- #8CB7AD color page →
muted
#8CB7AD
- RGB
- rgb(140 183 173)
- HSL
- hsl(166 23% 63%)
- OKLCH
- oklch(0.746 0.048 179)
WCAG contrast: on white 2.21:1 (Fail) · on black 9.49:1 (AAA)
- #61857F color page →
primary
#61857F
- RGB
- rgb(97 133 127)
- HSL
- hsl(170 16% 45%)
- OKLCH
- oklch(0.588 0.041 183.5)
WCAG contrast: on white 4.06:1 (Fail) · on black 5.16:1 (AA)
- #436B64 color page →
secondary
#436B64
- RGB
- rgb(67 107 100)
- HSL
- hsl(170 23% 34%)
- OKLCH
- oklch(0.496 0.047 182.1)
WCAG contrast: on white 5.95:1 (AA) · on black 3.52:1 (Fail)
- #334D47 color page →
accent
#334D47
- RGB
- rgb(51 77 71)
- HSL
- hsl(166 20% 25%)
- OKLCH
- oklch(0.397 0.033 178.5)
WCAG contrast: on white 9.15:1 (AAA) · on black 2.29:1 (Fail)
- #102926 color page →
highlight
#102926
- RGB
- rgb(16 41 38)
- HSL
- hsl(173 44% 11%)
- OKLCH
- oklch(0.26 0.032 185.2)
WCAG contrast: on white 15.35:1 (AAA) · on black 1.36:1 (Fail)
- #000706 color page →
text
#000706
- RGB
- rgb(0 7 6)
- HSL
- hsl(171 100% 1%)
- OKLCH
- oklch(0.116 0.02 186.4)
WCAG contrast: on white 20.32:1 (AAA) · on black 1.03:1 (Fail)
Export True Treetop Canvas: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #ecf7f4;
--surface: #bacdc8;
--muted: #8cb7ad;
--primary: #61857f;
--secondary: #436b64;
--accent: #334d47;
--highlight: #102926;
--text: #000706;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #ecf7f4;
--color-surface: #bacdc8;
--color-muted: #8cb7ad;
--color-primary: #61857f;
--color-secondary: #436b64;
--color-accent: #334d47;
--color-highlight: #102926;
--color-text: #000706;
}JSON (DTCG tokens)
{
"true-treetop-canvas-5mb": {
"bg": {
"$type": "color",
"$value": "#ecf7f4"
},
"surface": {
"$type": "color",
"$value": "#bacdc8"
},
"muted": {
"$type": "color",
"$value": "#8cb7ad"
},
"primary": {
"$type": "color",
"$value": "#61857f"
},
"secondary": {
"$type": "color",
"$value": "#436b64"
},
"accent": {
"$type": "color",
"$value": "#334d47"
},
"highlight": {
"$type": "color",
"$value": "#102926"
},
"text": {
"$type": "color",
"$value": "#000706"
}
}
}About this palette
True Treetop Canvas is a 8-color OKLCH-ready palette tagged turquoise, gray, cold, 8 colors. Hex values: #ECF7F4, #BACDC8, #8CB7AD, #61857F, #436B64, #334D47, #102926, #000706. APCA contrast score Lc 9.8. 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 True Treetop Canvas by OKLab color distance.