Palette · 10 colors · Lc 9.3
Pure Pan Purple System palette
Pure Pan Purple System: a 10-color palette (Pink, 10 Colors). HEX, RGB, HSL and OKLCH for #E7E9F6, #B9C7EE, #80C0FD, #67A6F5, #6783F3, #6D5ACA, #6841A4, #4F2B75, #241B4C, #0E102D, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
- Pink
- 10 Colors
bg
#E7E9F6
surface
#B9C7EE
muted
#80C0FD
primary
#67A6F5
secondary
#6783F3
accent
#6D5ACA
highlight
#6841A4
border
#4F2B75
focus
#241B4C
text
#0E102D
Colors in Pure Pan Purple System: HEX, RGB, HSL & OKLCH
- #E7E9F6 color page →
bg
#E7E9F6
- RGB
- rgb(231 233 246)
- HSL
- hsl(232 45% 94%)
- OKLCH
- oklch(0.936 0.018 279.1)
WCAG contrast: on white 1.20:1 (Fail) · on black 17.38:1 (AAA)
- #B9C7EE color page →
surface
#B9C7EE
- RGB
- rgb(185 199 238)
- HSL
- hsl(224 61% 83%)
- OKLCH
- oklch(0.832 0.057 269.6)
WCAG contrast: on white 1.68:1 (Fail) · on black 12.46:1 (AAA)
- #80C0FD color page →
muted
#80C0FD
- RGB
- rgb(128 192 253)
- HSL
- hsl(209 97% 75%)
- OKLCH
- oklch(0.788 0.109 248.2)
WCAG contrast: on white 1.93:1 (Fail) · on black 10.87:1 (AAA)
- #67A6F5 color page →
primary
#67A6F5
- RGB
- rgb(103 166 245)
- HSL
- hsl(213 88% 68%)
- OKLCH
- oklch(0.716 0.133 254.8)
WCAG contrast: on white 2.51:1 (Fail) · on black 8.34:1 (AAA)
- #6783F3 color page →
secondary
#6783F3
- RGB
- rgb(103 131 243)
- HSL
- hsl(228 85% 68%)
- OKLCH
- oklch(0.643 0.17 270.5)
WCAG contrast: on white 3.43:1 (Fail) · on black 6.11:1 (AA)
- #6D5ACA color page →
accent
#6D5ACA
- RGB
- rgb(109 90 202)
- HSL
- hsl(250 51% 57%)
- OKLCH
- oklch(0.544 0.167 287.3)
WCAG contrast: on white 5.29:1 (AA) · on black 3.96:1 (Fail)
- #6841A4 color page →
highlight
#6841A4
- RGB
- rgb(104 65 164)
- HSL
- hsl(264 43% 45%)
- OKLCH
- oklch(0.471 0.154 298.5)
WCAG contrast: on white 7.28:1 (AAA) · on black 2.88:1 (Fail)
- #4F2B75 color page →
border
#4F2B75
- RGB
- rgb(79 43 117)
- HSL
- hsl(269 46% 31%)
- OKLCH
- oklch(0.374 0.123 303.4)
WCAG contrast: on white 10.85:1 (AAA) · on black 1.93:1 (Fail)
- #241B4C color page →
focus
#241B4C
- RGB
- rgb(36 27 76)
- HSL
- hsl(251 48% 20%)
- OKLCH
- oklch(0.264 0.087 287.3)
WCAG contrast: on white 15.71:1 (AAA) · on black 1.33:1 (Fail)
- #0E102D color page →
text
#0E102D
- RGB
- rgb(14 16 45)
- HSL
- hsl(236 53% 12%)
- OKLCH
- oklch(0.191 0.057 276.5)
WCAG contrast: on white 18.57:1 (AAA) · on black 1.13:1 (Fail)
Export Pure Pan Purple System: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #e7e9f6;
--surface: #b9c7ee;
--muted: #80c0fd;
--primary: #67a6f5;
--secondary: #6783f3;
--accent: #6d5aca;
--highlight: #6841a4;
--border: #4f2b75;
--focus: #241b4c;
--text: #0e102d;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #e7e9f6;
--color-surface: #b9c7ee;
--color-muted: #80c0fd;
--color-primary: #67a6f5;
--color-secondary: #6783f3;
--color-accent: #6d5aca;
--color-highlight: #6841a4;
--color-border: #4f2b75;
--color-focus: #241b4c;
--color-text: #0e102d;
}JSON (DTCG tokens)
{
"pure-pan-purple-system-7ln": {
"bg": {
"$type": "color",
"$value": "#e7e9f6"
},
"surface": {
"$type": "color",
"$value": "#b9c7ee"
},
"muted": {
"$type": "color",
"$value": "#80c0fd"
},
"primary": {
"$type": "color",
"$value": "#67a6f5"
},
"secondary": {
"$type": "color",
"$value": "#6783f3"
},
"accent": {
"$type": "color",
"$value": "#6d5aca"
},
"highlight": {
"$type": "color",
"$value": "#6841a4"
},
"border": {
"$type": "color",
"$value": "#4f2b75"
},
"focus": {
"$type": "color",
"$value": "#241b4c"
},
"text": {
"$type": "color",
"$value": "#0e102d"
}
}
}About this palette
Pure Pan Purple System is a 10-color OKLCH-ready palette tagged pink, 10 colors. Hex values: #E7E9F6, #B9C7EE, #80C0FD, #67A6F5, #6783F3, #6D5ACA, #6841A4, #4F2B75, #241B4C, #0E102D. 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 Pure Pan Purple System by OKLab color distance.