Palette · 10 colors · Lc 9.8
True Starstruck Harbor palette
True Starstruck Harbor: a 10-color palette (Violet, Cold, Monochromatic, 10 Colors). HEX, RGB, HSL and OKLCH for #03060D, #0D1931, #16326A, #204A8F, #3D61B2, #517ECE, #76A0EF, #99BAF5, #C2DCFF, #EAF1FF, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
- Violet
- Cold
- Monochromatic
- 10 Colors
bg
#03060D
surface
#0D1931
muted
#16326A
primary
#204A8F
secondary
#3D61B2
accent
#517ECE
highlight
#76A0EF
border
#99BAF5
focus
#C2DCFF
text
#EAF1FF
Colors in True Starstruck Harbor: HEX, RGB, HSL & OKLCH
- #03060D color page →
bg
#03060D
- RGB
- rgb(3 6 13)
- HSL
- hsl(222 63% 3%)
- OKLCH
- oklch(0.121 0.019 259)
WCAG contrast: on white 20.27:1 (AAA) · on black 1.03:1 (Fail)
- #0D1931 color page →
surface
#0D1931
- RGB
- rgb(13 25 49)
- HSL
- hsl(220 58% 12%)
- OKLCH
- oklch(0.217 0.05 262.8)
WCAG contrast: on white 17.49:1 (AAA) · on black 1.20:1 (Fail)
- #16326A color page →
muted
#16326A
- RGB
- rgb(22 50 106)
- HSL
- hsl(220 66% 25%)
- OKLCH
- oklch(0.331 0.104 262.3)
WCAG contrast: on white 12.36:1 (AAA) · on black 1.69:1 (Fail)
- #204A8F color page →
primary
#204A8F
- RGB
- rgb(32 74 143)
- HSL
- hsl(217 63% 34%)
- OKLCH
- oklch(0.419 0.124 259.9)
WCAG contrast: on white 8.61:1 (AAA) · on black 2.43:1 (Fail)
- #3D61B2 color page →
secondary
#3D61B2
- RGB
- rgb(61 97 178)
- HSL
- hsl(222 49% 47%)
- OKLCH
- oklch(0.508 0.135 264.2)
WCAG contrast: on white 5.91:1 (AA) · on black 3.55:1 (Fail)
- #517ECE color page →
accent
#517ECE
- RGB
- rgb(81 126 206)
- HSL
- hsl(218 56% 56%)
- OKLCH
- oklch(0.598 0.132 261.1)
WCAG contrast: on white 4.01:1 (Fail) · on black 5.22:1 (AA)
- #76A0EF color page →
highlight
#76A0EF
- RGB
- rgb(118 160 239)
- HSL
- hsl(219 79% 70%)
- OKLCH
- oklch(0.708 0.125 262.3)
WCAG contrast: on white 2.61:1 (Fail) · on black 8.04:1 (AAA)
- #99BAF5 color page →
border
#99BAF5
- RGB
- rgb(153 186 245)
- HSL
- hsl(218 82% 78%)
- OKLCH
- oklch(0.786 0.092 261.8)
WCAG contrast: on white 1.96:1 (Fail) · on black 10.69:1 (AAA)
- #C2DCFF color page →
focus
#C2DCFF
- RGB
- rgb(194 220 255)
- HSL
- hsl(214 100% 88%)
- OKLCH
- oklch(0.887 0.056 255.9)
WCAG contrast: on white 1.40:1 (Fail) · on black 14.97:1 (AAA)
- #EAF1FF color page →
text
#EAF1FF
- RGB
- rgb(234 241 255)
- HSL
- hsl(220 100% 96%)
- OKLCH
- oklch(0.957 0.02 264.5)
WCAG contrast: on white 1.13:1 (Fail) · on black 18.52:1 (AAA)
Export True Starstruck Harbor: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #03060d;
--surface: #0d1931;
--muted: #16326a;
--primary: #204a8f;
--secondary: #3d61b2;
--accent: #517ece;
--highlight: #76a0ef;
--border: #99baf5;
--focus: #c2dcff;
--text: #eaf1ff;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #03060d;
--color-surface: #0d1931;
--color-muted: #16326a;
--color-primary: #204a8f;
--color-secondary: #3d61b2;
--color-accent: #517ece;
--color-highlight: #76a0ef;
--color-border: #99baf5;
--color-focus: #c2dcff;
--color-text: #eaf1ff;
}JSON (DTCG tokens)
{
"true-starstruck-harbor-5sq": {
"bg": {
"$type": "color",
"$value": "#03060d"
},
"surface": {
"$type": "color",
"$value": "#0d1931"
},
"muted": {
"$type": "color",
"$value": "#16326a"
},
"primary": {
"$type": "color",
"$value": "#204a8f"
},
"secondary": {
"$type": "color",
"$value": "#3d61b2"
},
"accent": {
"$type": "color",
"$value": "#517ece"
},
"highlight": {
"$type": "color",
"$value": "#76a0ef"
},
"border": {
"$type": "color",
"$value": "#99baf5"
},
"focus": {
"$type": "color",
"$value": "#c2dcff"
},
"text": {
"$type": "color",
"$value": "#eaf1ff"
}
}
}About this palette
True Starstruck Harbor is a 10-color OKLCH-ready palette tagged violet, cold, monochromatic, 10 colors. Hex values: #03060D, #0D1931, #16326A, #204A8F, #3D61B2, #517ECE, #76A0EF, #99BAF5, #C2DCFF, #EAF1FF. APCA contrast score Lc 9.8. 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 True Starstruck Harbor by OKLab color distance.