Palette · 10 colors · Lc 7.9
Twinkle Night Canvas palette
Twinkle Night Canvas: a 10-color palette (Pink, 10 Colors). HEX, RGB, HSL and OKLCH for #D6E8EE, #98C5D2, #538EA1, #65719F, #86607D, #85514D, #866049, #6E5C39, #223E2A, #001920, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
- Pink
- 10 Colors
bg
#D6E8EE
surface
#98C5D2
muted
#538EA1
primary
#65719F
secondary
#86607D
accent
#85514D
highlight
#866049
border
#6E5C39
focus
#223E2A
text
#001920
Colors in Twinkle Night Canvas: HEX, RGB, HSL & OKLCH
- #D6E8EE color page →
bg
#D6E8EE
- RGB
- rgb(214 232 238)
- HSL
- hsl(195 41% 89%)
- OKLCH
- oklch(0.919 0.021 219.7)
WCAG contrast: on white 1.26:1 (Fail) · on black 16.63:1 (AAA)
- #98C5D2 color page →
surface
#98C5D2
- RGB
- rgb(152 197 210)
- HSL
- hsl(193 39% 71%)
- OKLCH
- oklch(0.796 0.051 217.4)
WCAG contrast: on white 1.86:1 (Fail) · on black 11.25:1 (AAA)
- #538EA1 color page →
muted
#538EA1
- RGB
- rgb(83 142 161)
- HSL
- hsl(195 32% 48%)
- OKLCH
- oklch(0.614 0.068 220.7)
WCAG contrast: on white 3.65:1 (Fail) · on black 5.75:1 (AA)
- #65719F color page →
primary
#65719F
- RGB
- rgb(101 113 159)
- HSL
- hsl(228 23% 51%)
- OKLCH
- oklch(0.557 0.073 272.6)
WCAG contrast: on white 4.75:1 (AA) · on black 4.41:1 (Fail)
- #86607D color page →
secondary
#86607D
- RGB
- rgb(134 96 125)
- HSL
- hsl(314 17% 45%)
- OKLCH
- oklch(0.538 0.064 335.2)
WCAG contrast: on white 5.27:1 (AA) · on black 3.98:1 (Fail)
- #85514D color page →
accent
#85514D
- RGB
- rgb(133 81 77)
- HSL
- hsl(4 27% 41%)
- OKLCH
- oklch(0.493 0.071 24.7)
WCAG contrast: on white 6.39:1 (AA) · on black 3.28:1 (Fail)
- #866049 color page →
highlight
#866049
- RGB
- rgb(134 96 73)
- HSL
- hsl(23 29% 41%)
- OKLCH
- oklch(0.523 0.06 52.2)
WCAG contrast: on white 5.55:1 (AA) · on black 3.78:1 (Fail)
- #6E5C39 color page →
border
#6E5C39
- RGB
- rgb(110 92 57)
- HSL
- hsl(40 32% 33%)
- OKLCH
- oklch(0.484 0.056 83.3)
WCAG contrast: on white 6.45:1 (AA) · on black 3.25:1 (Fail)
- #223E2A color page →
focus
#223E2A
- RGB
- rgb(34 62 42)
- HSL
- hsl(137 29% 19%)
- OKLCH
- oklch(0.335 0.049 152.1)
WCAG contrast: on white 11.72:1 (AAA) · on black 1.79:1 (Fail)
- #001920 color page →
text
#001920
- RGB
- rgb(0 25 32)
- HSL
- hsl(193 100% 6%)
- OKLCH
- oklch(0.197 0.035 218.3)
WCAG contrast: on white 18.10:1 (AAA) · on black 1.15:1 (Fail)
Export Twinkle Night Canvas: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #d6e8ee;
--surface: #98c5d2;
--muted: #538ea1;
--primary: #65719f;
--secondary: #86607d;
--accent: #85514d;
--highlight: #866049;
--border: #6e5c39;
--focus: #223e2a;
--text: #001920;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #d6e8ee;
--color-surface: #98c5d2;
--color-muted: #538ea1;
--color-primary: #65719f;
--color-secondary: #86607d;
--color-accent: #85514d;
--color-highlight: #866049;
--color-border: #6e5c39;
--color-focus: #223e2a;
--color-text: #001920;
}JSON (DTCG tokens)
{
"twinkle-night-canvas-6no": {
"bg": {
"$type": "color",
"$value": "#d6e8ee"
},
"surface": {
"$type": "color",
"$value": "#98c5d2"
},
"muted": {
"$type": "color",
"$value": "#538ea1"
},
"primary": {
"$type": "color",
"$value": "#65719f"
},
"secondary": {
"$type": "color",
"$value": "#86607d"
},
"accent": {
"$type": "color",
"$value": "#85514d"
},
"highlight": {
"$type": "color",
"$value": "#866049"
},
"border": {
"$type": "color",
"$value": "#6e5c39"
},
"focus": {
"$type": "color",
"$value": "#223e2a"
},
"text": {
"$type": "color",
"$value": "#001920"
}
}
}About this palette
Twinkle Night Canvas is a 10-color OKLCH-ready palette tagged pink, 10 colors. Hex values: #D6E8EE, #98C5D2, #538EA1, #65719F, #86607D, #85514D, #866049, #6E5C39, #223E2A, #001920. APCA contrast score Lc 7.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 Twinkle Night Canvas by OKLab color distance.