Palette · 9 colors · Lc 9
Swimmer Harbor palette
Swimmer Harbor: a 9-color palette (Violet, Cold, 9 Colors). HEX, RGB, HSL and OKLCH for #DFECEE, #9FDAE0, #4ACDC8, #00ACB4, #0092C1, #0072A5, #004D87, #003750, #00202C, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#DFECEE
surface
#9FDAE0
muted
#4ACDC8
primary
#00ACB4
secondary
#0092C1
accent
#0072A5
highlight
#004D87
border
#003750
text
#00202C
Colors in Swimmer Harbor: HEX, RGB, HSL & OKLCH
- #DFECEE color page →
bg
#DFECEE
- RGB
- rgb(223 236 238)
- HSL
- hsl(188 31% 90%)
- OKLCH
- oklch(0.934 0.014 207.9)
WCAG contrast: on white 1.20:1 (Fail) · on black 17.37:1 (AAA)
- #9FDAE0 color page →
surface
#9FDAE0
- RGB
- rgb(159 218 224)
- HSL
- hsl(186 51% 75%)
- OKLCH
- oklch(0.85 0.061 204)
WCAG contrast: on white 1.54:1 (Fail) · on black 13.57:1 (AAA)
- #4ACDC8 color page →
muted
#4ACDC8
- RGB
- rgb(74 205 200)
- HSL
- hsl(178 57% 55%)
- OKLCH
- oklch(0.776 0.113 191.5)
WCAG contrast: on white 1.93:1 (Fail) · on black 10.85:1 (AAA)
- #00ACB4 color page →
primary
#00ACB4
- RGB
- rgb(0 172 180)
- HSL
- hsl(183 100% 35%)
- OKLCH
- oklch(0.677 0.115 200.7)
WCAG contrast: on white 2.77:1 (Fail) · on black 7.56:1 (AAA)
- #0092C1 color page →
secondary
#0092C1
- RGB
- rgb(0 146 193)
- HSL
- hsl(195 100% 38%)
- OKLCH
- oklch(0.618 0.123 230)
WCAG contrast: on white 3.57:1 (Fail) · on black 5.88:1 (AA)
- #0072A5 color page →
accent
#0072A5
- RGB
- rgb(0 114 165)
- HSL
- hsl(199 100% 32%)
- OKLCH
- oklch(0.524 0.117 238.2)
WCAG contrast: on white 5.31:1 (AA) · on black 3.95:1 (Fail)
- #004D87 color page →
highlight
#004D87
- RGB
- rgb(0 77 135)
- HSL
- hsl(206 100% 26%)
- OKLCH
- oklch(0.413 0.116 249.7)
WCAG contrast: on white 8.70:1 (AAA) · on black 2.41:1 (Fail)
- #003750 color page →
border
#003750
- RGB
- rgb(0 55 80)
- HSL
- hsl(199 100% 16%)
- OKLCH
- oklch(0.318 0.068 235.6)
WCAG contrast: on white 12.63:1 (AAA) · on black 1.66:1 (Fail)
- #00202C color page →
text
#00202C
- RGB
- rgb(0 32 44)
- HSL
- hsl(196 100% 9%)
- OKLCH
- oklch(0.227 0.044 227)
WCAG contrast: on white 16.89:1 (AAA) · on black 1.24:1 (Fail)
Export Swimmer Harbor: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #dfecee;
--surface: #9fdae0;
--muted: #4acdc8;
--primary: #00acb4;
--secondary: #0092c1;
--accent: #0072a5;
--highlight: #004d87;
--border: #003750;
--text: #00202c;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #dfecee;
--color-surface: #9fdae0;
--color-muted: #4acdc8;
--color-primary: #00acb4;
--color-secondary: #0092c1;
--color-accent: #0072a5;
--color-highlight: #004d87;
--color-border: #003750;
--color-text: #00202c;
}JSON (DTCG tokens)
{
"swimmer-harbor-1q1": {
"bg": {
"$type": "color",
"$value": "#dfecee"
},
"surface": {
"$type": "color",
"$value": "#9fdae0"
},
"muted": {
"$type": "color",
"$value": "#4acdc8"
},
"primary": {
"$type": "color",
"$value": "#00acb4"
},
"secondary": {
"$type": "color",
"$value": "#0092c1"
},
"accent": {
"$type": "color",
"$value": "#0072a5"
},
"highlight": {
"$type": "color",
"$value": "#004d87"
},
"border": {
"$type": "color",
"$value": "#003750"
},
"text": {
"$type": "color",
"$value": "#00202c"
}
}
}About this palette
Swimmer Harbor is a 9-color OKLCH-ready palette tagged violet, cold, 9 colors. Hex values: #DFECEE, #9FDAE0, #4ACDC8, #00ACB4, #0092C1, #0072A5, #004D87, #003750, #00202C. APCA contrast score Lc 9. 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 Swimmer Harbor by OKLab color distance.