Palette · 10 colors · Lc 9.5
Classic Teal Tide palette
Classic Teal Tide: a 10-color palette (Blue, Cold, Ocean, Nature). HEX, RGB, HSL and OKLCH for #DFF7F6, #BCD8D6, #85CABF, #4CB0AF, #248F98, #008182, #006458, #004D3C, #002F2F, #00141A, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#DFF7F6
surface
#BCD8D6
muted
#85CABF
primary
#4CB0AF
secondary
#248F98
accent
#008182
highlight
#006458
border
#004D3C
focus
#002F2F
text
#00141A
Colors in Classic Teal Tide: HEX, RGB, HSL & OKLCH
- #DFF7F6 color page →
bg
#DFF7F6
- RGB
- rgb(223 247 246)
- HSL
- hsl(178 60% 92%)
- OKLCH
- oklch(0.958 0.025 193.7)
WCAG contrast: on white 1.11:1 (Fail) · on black 18.77:1 (AAA)
- #BCD8D6 color page →
surface
#BCD8D6
- RGB
- rgb(188 216 214)
- HSL
- hsl(176 26% 79%)
- OKLCH
- oklch(0.861 0.03 191.4)
WCAG contrast: on white 1.50:1 (Fail) · on black 13.93:1 (AAA)
- #85CABF color page →
muted
#85CABF
- RGB
- rgb(133 202 191)
- HSL
- hsl(170 39% 66%)
- OKLCH
- oklch(0.79 0.072 183.3)
WCAG contrast: on white 1.87:1 (Fail) · on black 11.19:1 (AAA)
- #4CB0AF color page →
primary
#4CB0AF
- RGB
- rgb(76 176 175)
- HSL
- hsl(179 40% 49%)
- OKLCH
- oklch(0.698 0.093 194.3)
WCAG contrast: on white 2.58:1 (Fail) · on black 8.13:1 (AAA)
- #248F98 color page →
secondary
#248F98
- RGB
- rgb(36 143 152)
- HSL
- hsl(185 62% 37%)
- OKLCH
- oklch(0.596 0.093 203.5)
WCAG contrast: on white 3.84:1 (Fail) · on black 5.45:1 (AA)
- #008182 color page →
accent
#008182
- RGB
- rgb(0 129 130)
- HSL
- hsl(180 100% 25%)
- OKLCH
- oklch(0.547 0.093 195.7)
WCAG contrast: on white 4.70:1 (AA) · on black 4.46:1 (Fail)
- #006458 color page →
highlight
#006458
- RGB
- rgb(0 100 88)
- HSL
- hsl(173 100% 20%)
- OKLCH
- oklch(0.451 0.081 180.9)
WCAG contrast: on white 7.08:1 (AAA) · on black 2.96:1 (Fail)
- #004D3C color page →
border
#004D3C
- RGB
- rgb(0 77 60)
- HSL
- hsl(167 100% 15%)
- OKLCH
- oklch(0.374 0.073 171.6)
WCAG contrast: on white 9.87:1 (AAA) · on black 2.12:1 (Fail)
- #002F2F color page →
focus
#002F2F
- RGB
- rgb(0 47 47)
- HSL
- hsl(180 100% 9%)
- OKLCH
- oklch(0.276 0.047 194.8)
WCAG contrast: on white 14.50:1 (AAA) · on black 1.44:1 (Fail)
- #00141A color page →
text
#00141A
- RGB
- rgb(0 20 26)
- HSL
- hsl(194 100% 5%)
- OKLCH
- oklch(0.177 0.032 217.9)
WCAG contrast: on white 18.83:1 (AAA) · on black 1.11:1 (Fail)
Export Classic Teal Tide: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #dff7f6;
--surface: #bcd8d6;
--muted: #85cabf;
--primary: #4cb0af;
--secondary: #248f98;
--accent: #008182;
--highlight: #006458;
--border: #004d3c;
--focus: #002f2f;
--text: #00141a;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #dff7f6;
--color-surface: #bcd8d6;
--color-muted: #85cabf;
--color-primary: #4cb0af;
--color-secondary: #248f98;
--color-accent: #008182;
--color-highlight: #006458;
--color-border: #004d3c;
--color-focus: #002f2f;
--color-text: #00141a;
}JSON (DTCG tokens)
{
"classic-teal-tide-7oo": {
"bg": {
"$type": "color",
"$value": "#dff7f6"
},
"surface": {
"$type": "color",
"$value": "#bcd8d6"
},
"muted": {
"$type": "color",
"$value": "#85cabf"
},
"primary": {
"$type": "color",
"$value": "#4cb0af"
},
"secondary": {
"$type": "color",
"$value": "#248f98"
},
"accent": {
"$type": "color",
"$value": "#008182"
},
"highlight": {
"$type": "color",
"$value": "#006458"
},
"border": {
"$type": "color",
"$value": "#004d3c"
},
"focus": {
"$type": "color",
"$value": "#002f2f"
},
"text": {
"$type": "color",
"$value": "#00141a"
}
}
}About this palette
Classic Teal Tide is a 10-color OKLCH-ready palette tagged blue, cold, ocean, nature, 10 colors. Hex values: #DFF7F6, #BCD8D6, #85CABF, #4CB0AF, #248F98, #008182, #006458, #004D3C, #002F2F, #00141A. 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 Classic Teal Tide by OKLab color distance.