Palette · 7 colors · Lc 9.3
Classic Twinkle Night Quartz palette
Classic Twinkle Night Quartz: a 7-color palette (Pink, Monochromatic, 7 Colors). HEX, RGB, HSL and OKLCH for #070812, #282940, #464678, #686DA6, #8E8EBA, #BDC1E5, #EEF1FF, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
- Pink
- Monochromatic
- 7 Colors
bg
#070812
surface
#282940
muted
#464678
primary
#686DA6
secondary
#8E8EBA
accent
#BDC1E5
text
#EEF1FF
Colors in Classic Twinkle Night Quartz: HEX, RGB, HSL & OKLCH
- #070812 color page →
bg
#070812
- RGB
- rgb(7 8 18)
- HSL
- hsl(235 44% 5%)
- OKLCH
- oklch(0.139 0.022 278)
WCAG contrast: on white 19.95:1 (AAA) · on black 1.05:1 (Fail)
- #282940 color page →
surface
#282940
- RGB
- rgb(40 41 64)
- HSL
- hsl(237 23% 20%)
- OKLCH
- oklch(0.291 0.042 281.5)
WCAG contrast: on white 14.17:1 (AAA) · on black 1.48:1 (Fail)
- #464678 color page →
muted
#464678
- RGB
- rgb(70 70 120)
- HSL
- hsl(240 26% 37%)
- OKLCH
- oklch(0.418 0.082 282.2)
WCAG contrast: on white 8.72:1 (AAA) · on black 2.40:1 (Fail)
- #686DA6 color page →
primary
#686DA6
- RGB
- rgb(104 109 166)
- HSL
- hsl(235 26% 53%)
- OKLCH
- oklch(0.555 0.088 279.3)
WCAG contrast: on white 4.85:1 (AA) · on black 4.32:1 (Fail)
- #8E8EBA color page →
secondary
#8E8EBA
- RGB
- rgb(142 142 186)
- HSL
- hsl(240 24% 64%)
- OKLCH
- oklch(0.663 0.065 284.5)
WCAG contrast: on white 3.12:1 (Fail) · on black 6.72:1 (AA)
- #BDC1E5 color page →
accent
#BDC1E5
- RGB
- rgb(189 193 229)
- HSL
- hsl(234 43% 82%)
- OKLCH
- oklch(0.82 0.051 280.2)
WCAG contrast: on white 1.76:1 (Fail) · on black 11.92:1 (AAA)
- #EEF1FF color page →
text
#EEF1FF
- RGB
- rgb(238 241 255)
- HSL
- hsl(229 100% 97%)
- OKLCH
- oklch(0.96 0.019 276.3)
WCAG contrast: on white 1.12:1 (Fail) · on black 18.66:1 (AAA)
Export Classic Twinkle Night Quartz: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #070812;
--surface: #282940;
--muted: #464678;
--primary: #686da6;
--secondary: #8e8eba;
--accent: #bdc1e5;
--text: #eef1ff;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #070812;
--color-surface: #282940;
--color-muted: #464678;
--color-primary: #686da6;
--color-secondary: #8e8eba;
--color-accent: #bdc1e5;
--color-text: #eef1ff;
}JSON (DTCG tokens)
{
"classic-twinkle-night-quartz-2fx": {
"bg": {
"$type": "color",
"$value": "#070812"
},
"surface": {
"$type": "color",
"$value": "#282940"
},
"muted": {
"$type": "color",
"$value": "#464678"
},
"primary": {
"$type": "color",
"$value": "#686da6"
},
"secondary": {
"$type": "color",
"$value": "#8e8eba"
},
"accent": {
"$type": "color",
"$value": "#bdc1e5"
},
"text": {
"$type": "color",
"$value": "#eef1ff"
}
}
}About this palette
Classic Twinkle Night Quartz is a 7-color OKLCH-ready palette tagged pink, monochromatic, 7 colors. Hex values: #070812, #282940, #464678, #686DA6, #8E8EBA, #BDC1E5, #EEF1FF. APCA contrast score Lc 9.3. 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 Twinkle Night Quartz by OKLab color distance.