Palette · 10 colors · Lc 9
Copacabana Quartz palette
Copacabana Quartz: a 10-color palette (Violet, Cold, Ocean, Nature). HEX, RGB, HSL and OKLCH for #E4F5FC, #BBDAE3, #94C8D2, #4EA6C0, #2285A6, #006D92, #006273, #00454F, #002C39, #001221, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#E4F5FC
surface
#BBDAE3
muted
#94C8D2
primary
#4EA6C0
secondary
#2285A6
accent
#006D92
highlight
#006273
border
#00454F
focus
#002C39
text
#001221
Colors in Copacabana Quartz: HEX, RGB, HSL & OKLCH
- #E4F5FC color page →
bg
#E4F5FC
- RGB
- rgb(228 245 252)
- HSL
- hsl(198 80% 94%)
- OKLCH
- oklch(0.96 0.02 224.3)
WCAG contrast: on white 1.11:1 (Fail) · on black 18.76:1 (AAA)
- #BBDAE3 color page →
surface
#BBDAE3
- RGB
- rgb(187 218 227)
- HSL
- hsl(193 42% 81%)
- OKLCH
- oklch(0.869 0.035 217.2)
WCAG contrast: on white 1.47:1 (Fail) · on black 14.25:1 (AAA)
- #94C8D2 color page →
muted
#94C8D2
- RGB
- rgb(148 200 210)
- HSL
- hsl(190 41% 70%)
- OKLCH
- oklch(0.8 0.056 210.7)
WCAG contrast: on white 1.83:1 (Fail) · on black 11.45:1 (AAA)
- #4EA6C0 color page →
primary
#4EA6C0
- RGB
- rgb(78 166 192)
- HSL
- hsl(194 48% 53%)
- OKLCH
- oklch(0.681 0.092 220)
WCAG contrast: on white 2.78:1 (Fail) · on black 7.53:1 (AAA)
- #2285A6 color page →
secondary
#2285A6
- RGB
- rgb(34 133 166)
- HSL
- hsl(195 66% 39%)
- OKLCH
- oklch(0.577 0.1 225.6)
WCAG contrast: on white 4.22:1 (Fail) · on black 4.97:1 (AA)
- #006D92 color page →
accent
#006D92
- RGB
- rgb(0 109 146)
- HSL
- hsl(195 100% 29%)
- OKLCH
- oklch(0.501 0.101 230.7)
WCAG contrast: on white 5.82:1 (AA) · on black 3.60:1 (Fail)
- #006273 color page →
highlight
#006273
- RGB
- rgb(0 98 115)
- HSL
- hsl(189 100% 23%)
- OKLCH
- oklch(0.457 0.081 215)
WCAG contrast: on white 7.01:1 (AAA) · on black 2.99:1 (Fail)
- #00454F color page →
border
#00454F
- RGB
- rgb(0 69 79)
- HSL
- hsl(188 100% 15%)
- OKLCH
- oklch(0.358 0.062 211)
WCAG contrast: on white 10.69:1 (AAA) · on black 1.96:1 (Fail)
- #002C39 color page →
focus
#002C39
- RGB
- rgb(0 44 57)
- HSL
- hsl(194 100% 11%)
- OKLCH
- oklch(0.272 0.051 223.2)
WCAG contrast: on white 14.79:1 (AAA) · on black 1.41:1 (Fail)
- #001221 color page →
text
#001221
- RGB
- rgb(0 18 33)
- HSL
- hsl(207 100% 6%)
- OKLCH
- oklch(0.175 0.042 242.4)
WCAG contrast: on white 18.94:1 (AAA) · on black 1.10:1 (Fail)
Export Copacabana Quartz: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #e4f5fc;
--surface: #bbdae3;
--muted: #94c8d2;
--primary: #4ea6c0;
--secondary: #2285a6;
--accent: #006d92;
--highlight: #006273;
--border: #00454f;
--focus: #002c39;
--text: #001221;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #e4f5fc;
--color-surface: #bbdae3;
--color-muted: #94c8d2;
--color-primary: #4ea6c0;
--color-secondary: #2285a6;
--color-accent: #006d92;
--color-highlight: #006273;
--color-border: #00454f;
--color-focus: #002c39;
--color-text: #001221;
}JSON (DTCG tokens)
{
"copacabana-quartz-fi": {
"bg": {
"$type": "color",
"$value": "#e4f5fc"
},
"surface": {
"$type": "color",
"$value": "#bbdae3"
},
"muted": {
"$type": "color",
"$value": "#94c8d2"
},
"primary": {
"$type": "color",
"$value": "#4ea6c0"
},
"secondary": {
"$type": "color",
"$value": "#2285a6"
},
"accent": {
"$type": "color",
"$value": "#006d92"
},
"highlight": {
"$type": "color",
"$value": "#006273"
},
"border": {
"$type": "color",
"$value": "#00454f"
},
"focus": {
"$type": "color",
"$value": "#002c39"
},
"text": {
"$type": "color",
"$value": "#001221"
}
}
}About this palette
Copacabana Quartz is a 10-color OKLCH-ready palette tagged violet, cold, ocean, nature, 10 colors. Hex values: #E4F5FC, #BBDAE3, #94C8D2, #4EA6C0, #2285A6, #006D92, #006273, #00454F, #002C39, #001221. 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 Copacabana Quartz by OKLab color distance.