Palette · 10 colors · Lc 8.4
Campanula Beacon palette
Campanula Beacon: a 10-color palette (Violet, Cold, 10 Colors). HEX, RGB, HSL and OKLCH for #D6E2EF, #B5DEF5, #7DC6E4, #48B2E8, #3D93DA, #1275C9, #3B4B97, #27357E, #032755, #071A2D, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
bg
#D6E2EF
surface
#B5DEF5
muted
#7DC6E4
primary
#48B2E8
secondary
#3D93DA
accent
#1275C9
highlight
#3B4B97
border
#27357E
focus
#032755
text
#071A2D
Colors in Campanula Beacon: HEX, RGB, HSL & OKLCH
- #D6E2EF color page →
bg
#D6E2EF
- RGB
- rgb(214 226 239)
- HSL
- hsl(211 44% 89%)
- OKLCH
- oklch(0.908 0.022 250.2)
WCAG contrast: on white 1.31:1 (Fail) · on black 15.98:1 (AAA)
- #B5DEF5 color page →
surface
#B5DEF5
- RGB
- rgb(181 222 245)
- HSL
- hsl(202 76% 84%)
- OKLCH
- oklch(0.879 0.053 232.7)
WCAG contrast: on white 1.42:1 (Fail) · on black 14.73:1 (AAA)
- #7DC6E4 color page →
muted
#7DC6E4
- RGB
- rgb(125 198 228)
- HSL
- hsl(197 66% 69%)
- OKLCH
- oklch(0.79 0.084 226.1)
WCAG contrast: on white 1.89:1 (Fail) · on black 11.06:1 (AAA)
- #48B2E8 color page →
primary
#48B2E8
- RGB
- rgb(72 178 232)
- HSL
- hsl(200 78% 60%)
- OKLCH
- oklch(0.725 0.124 234.5)
WCAG contrast: on white 2.38:1 (Fail) · on black 8.80:1 (AAA)
- #3D93DA color page →
secondary
#3D93DA
- RGB
- rgb(61 147 218)
- HSL
- hsl(207 68% 55%)
- OKLCH
- oklch(0.644 0.135 246.9)
WCAG contrast: on white 3.28:1 (Fail) · on black 6.38:1 (AA)
- #1275C9 color page →
accent
#1275C9
- RGB
- rgb(18 117 201)
- HSL
- hsl(208 84% 43%)
- OKLCH
- oklch(0.555 0.154 251)
WCAG contrast: on white 4.75:1 (AA) · on black 4.41:1 (Fail)
- #3B4B97 color page →
highlight
#3B4B97
- RGB
- rgb(59 75 151)
- HSL
- hsl(230 44% 41%)
- OKLCH
- oklch(0.441 0.125 271.5)
WCAG contrast: on white 7.95:1 (AAA) · on black 2.63:1 (Fail)
- #27357E color page →
border
#27357E
- RGB
- rgb(39 53 126)
- HSL
- hsl(230 53% 32%)
- OKLCH
- oklch(0.363 0.124 270.7)
WCAG contrast: on white 11.07:1 (AAA) · on black 1.89:1 (Fail)
- #032755 color page →
focus
#032755
- RGB
- rgb(3 39 85)
- HSL
- hsl(214 93% 17%)
- OKLCH
- oklch(0.279 0.093 256.8)
WCAG contrast: on white 14.73:1 (AAA) · on black 1.42:1 (Fail)
- #071A2D color page →
text
#071A2D
- RGB
- rgb(7 26 45)
- HSL
- hsl(210 73% 10%)
- OKLCH
- oklch(0.213 0.045 250.5)
WCAG contrast: on white 17.57:1 (AAA) · on black 1.19:1 (Fail)
Export Campanula Beacon: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #d6e2ef;
--surface: #b5def5;
--muted: #7dc6e4;
--primary: #48b2e8;
--secondary: #3d93da;
--accent: #1275c9;
--highlight: #3b4b97;
--border: #27357e;
--focus: #032755;
--text: #071a2d;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #d6e2ef;
--color-surface: #b5def5;
--color-muted: #7dc6e4;
--color-primary: #48b2e8;
--color-secondary: #3d93da;
--color-accent: #1275c9;
--color-highlight: #3b4b97;
--color-border: #27357e;
--color-focus: #032755;
--color-text: #071a2d;
}JSON (DTCG tokens)
{
"campanula-beacon-3vq": {
"bg": {
"$type": "color",
"$value": "#d6e2ef"
},
"surface": {
"$type": "color",
"$value": "#b5def5"
},
"muted": {
"$type": "color",
"$value": "#7dc6e4"
},
"primary": {
"$type": "color",
"$value": "#48b2e8"
},
"secondary": {
"$type": "color",
"$value": "#3d93da"
},
"accent": {
"$type": "color",
"$value": "#1275c9"
},
"highlight": {
"$type": "color",
"$value": "#3b4b97"
},
"border": {
"$type": "color",
"$value": "#27357e"
},
"focus": {
"$type": "color",
"$value": "#032755"
},
"text": {
"$type": "color",
"$value": "#071a2d"
}
}
}About this palette
Campanula Beacon is a 10-color OKLCH-ready palette tagged violet, cold, 10 colors. Hex values: #D6E2EF, #B5DEF5, #7DC6E4, #48B2E8, #3D93DA, #1275C9, #3B4B97, #27357E, #032755, #071A2D. APCA contrast score Lc 8.4. 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 Campanula Beacon by OKLab color distance.