Palette · 9 colors · Lc 10
Quiet Dark & Stormy Ribbon palette
Quiet Dark & Stormy Ribbon: a 9-color palette (Pink, Gray, 9 Colors). HEX, RGB, HSL and OKLCH for #F3F7FE, #C6CEDA, #A5B5CC, #8089A0, #636E83, #4C586D, #363D52, #1A1D2D, #0E0E0E, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#F3F7FE
surface
#C6CEDA
muted
#A5B5CC
primary
#8089A0
secondary
#636E83
accent
#4C586D
highlight
#363D52
border
#1A1D2D
text
#0E0E0E
Colors in Quiet Dark & Stormy Ribbon: HEX, RGB, HSL & OKLCH
- #F3F7FE color page →
bg
#F3F7FE
- RGB
- rgb(243 247 254)
- HSL
- hsl(218 85% 97%)
- OKLCH
- oklch(0.975 0.01 261.8)
WCAG contrast: on white 1.07:1 (Fail) · on black 19.54:1 (AAA)
- #C6CEDA color page →
surface
#C6CEDA
- RGB
- rgb(198 206 218)
- HSL
- hsl(216 21% 82%)
- OKLCH
- oklch(0.849 0.019 258.4)
WCAG contrast: on white 1.58:1 (Fail) · on black 13.24:1 (AAA)
- #A5B5CC color page →
muted
#A5B5CC
- RGB
- rgb(165 181 204)
- HSL
- hsl(215 28% 72%)
- OKLCH
- oklch(0.768 0.037 257.4)
WCAG contrast: on white 2.08:1 (Fail) · on black 10.08:1 (AAA)
- #8089A0 color page →
primary
#8089A0
- RGB
- rgb(128 137 160)
- HSL
- hsl(223 14% 56%)
- OKLCH
- oklch(0.631 0.036 268.5)
WCAG contrast: on white 3.49:1 (Fail) · on black 6.00:1 (AA)
- #636E83 color page →
secondary
#636E83
- RGB
- rgb(99 110 131)
- HSL
- hsl(219 14% 45%)
- OKLCH
- oklch(0.537 0.036 263.3)
WCAG contrast: on white 5.13:1 (AA) · on black 4.08:1 (Fail)
- #4C586D color page →
accent
#4C586D
- RGB
- rgb(76 88 109)
- HSL
- hsl(218 18% 36%)
- OKLCH
- oklch(0.458 0.038 261.6)
WCAG contrast: on white 7.18:1 (AAA) · on black 2.92:1 (Fail)
- #363D52 color page →
highlight
#363D52
- RGB
- rgb(54 61 82)
- HSL
- hsl(225 21% 27%)
- OKLCH
- oklch(0.363 0.038 270.2)
WCAG contrast: on white 10.79:1 (AAA) · on black 1.94:1 (Fail)
- #1A1D2D color page →
border
#1A1D2D
- RGB
- rgb(26 29 45)
- HSL
- hsl(231 27% 14%)
- OKLCH
- oklch(0.236 0.031 275.6)
WCAG contrast: on white 16.69:1 (AAA) · on black 1.25:1 (Fail)
- #0E0E0E color page →
text
#0E0E0E
- RGB
- rgb(14 14 14)
- HSL
- hsl(0 0% 5%)
- OKLCH
- oklch(0.164 0 0)
WCAG contrast: on white 19.30:1 (AAA) · on black 1.08:1 (Fail)
Export Quiet Dark & Stormy Ribbon: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #f3f7fe;
--surface: #c6ceda;
--muted: #a5b5cc;
--primary: #8089a0;
--secondary: #636e83;
--accent: #4c586d;
--highlight: #363d52;
--border: #1a1d2d;
--text: #0e0e0e;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #f3f7fe;
--color-surface: #c6ceda;
--color-muted: #a5b5cc;
--color-primary: #8089a0;
--color-secondary: #636e83;
--color-accent: #4c586d;
--color-highlight: #363d52;
--color-border: #1a1d2d;
--color-text: #0e0e0e;
}JSON (DTCG tokens)
{
"quiet-dark-stormy-ribbon-22q": {
"bg": {
"$type": "color",
"$value": "#f3f7fe"
},
"surface": {
"$type": "color",
"$value": "#c6ceda"
},
"muted": {
"$type": "color",
"$value": "#a5b5cc"
},
"primary": {
"$type": "color",
"$value": "#8089a0"
},
"secondary": {
"$type": "color",
"$value": "#636e83"
},
"accent": {
"$type": "color",
"$value": "#4c586d"
},
"highlight": {
"$type": "color",
"$value": "#363d52"
},
"border": {
"$type": "color",
"$value": "#1a1d2d"
},
"text": {
"$type": "color",
"$value": "#0e0e0e"
}
}
}About this palette
Quiet Dark & Stormy Ribbon is a 9-color OKLCH-ready palette tagged pink, gray, 9 colors. Hex values: #F3F7FE, #C6CEDA, #A5B5CC, #8089A0, #636E83, #4C586D, #363D52, #1A1D2D, #0E0E0E. APCA contrast score Lc 10. 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 Quiet Dark & Stormy Ribbon by OKLab color distance.