Palette · 10 colors · Lc 8.4
Aster Canvas palette
Aster Canvas: a 10-color palette (Pink, Monochromatic, 10 Colors). HEX, RGB, HSL and OKLCH for #E8E8F6, #CFCAE8, #B2B2D8, #A29BC8, #7A71AA, #675B90, #49426B, #2E2B4F, #17152D, #09070F, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
- Pink
- Monochromatic
- 10 Colors
bg
#E8E8F6
surface
#CFCAE8
muted
#B2B2D8
primary
#A29BC8
secondary
#7A71AA
accent
#675B90
highlight
#49426B
border
#2E2B4F
focus
#17152D
text
#09070F
Colors in Aster Canvas: HEX, RGB, HSL & OKLCH
- #E8E8F6 color page →
bg
#E8E8F6
- RGB
- rgb(232 232 246)
- HSL
- hsl(240 44% 94%)
- OKLCH
- oklch(0.935 0.019 286)
WCAG contrast: on white 1.21:1 (Fail) · on black 17.30:1 (AAA)
- #CFCAE8 color page →
surface
#CFCAE8
- RGB
- rgb(207 202 232)
- HSL
- hsl(250 39% 85%)
- OKLCH
- oklch(0.852 0.042 293.1)
WCAG contrast: on white 1.58:1 (Fail) · on black 13.26:1 (AAA)
- #B2B2D8 color page →
muted
#B2B2D8
- RGB
- rgb(178 178 216)
- HSL
- hsl(240 33% 77%)
- OKLCH
- oklch(0.776 0.054 285.1)
WCAG contrast: on white 2.04:1 (Fail) · on black 10.25:1 (AAA)
- #A29BC8 color page →
primary
#A29BC8
- RGB
- rgb(162 155 200)
- HSL
- hsl(249 29% 70%)
- OKLCH
- oklch(0.711 0.065 291.8)
WCAG contrast: on white 2.60:1 (Fail) · on black 8.05:1 (AAA)
- #7A71AA color page →
secondary
#7A71AA
- RGB
- rgb(122 113 170)
- HSL
- hsl(249 25% 55%)
- OKLCH
- oklch(0.58 0.087 290.7)
WCAG contrast: on white 4.40:1 (Fail) · on black 4.77:1 (AA)
- #675B90 color page →
accent
#675B90
- RGB
- rgb(103 91 144)
- HSL
- hsl(254 23% 46%)
- OKLCH
- oklch(0.505 0.084 293.6)
WCAG contrast: on white 6.04:1 (AA) · on black 3.47:1 (Fail)
- #49426B color page →
highlight
#49426B
- RGB
- rgb(73 66 107)
- HSL
- hsl(250 24% 34%)
- OKLCH
- oklch(0.405 0.068 290.9)
WCAG contrast: on white 9.23:1 (AAA) · on black 2.27:1 (Fail)
- #2E2B4F color page →
border
#2E2B4F
- RGB
- rgb(46 43 79)
- HSL
- hsl(245 30% 24%)
- OKLCH
- oklch(0.311 0.063 285.9)
WCAG contrast: on white 13.33:1 (AAA) · on black 1.57:1 (Fail)
- #17152D color page →
focus
#17152D
- RGB
- rgb(23 21 45)
- HSL
- hsl(245 36% 13%)
- OKLCH
- oklch(0.212 0.046 285.5)
WCAG contrast: on white 17.77:1 (AAA) · on black 1.18:1 (Fail)
- #09070F color page →
text
#09070F
- RGB
- rgb(9 7 15)
- HSL
- hsl(255 36% 4%)
- OKLCH
- oklch(0.136 0.018 296.5)
WCAG contrast: on white 20.02:1 (AAA) · on black 1.04:1 (Fail)
Export Aster Canvas: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #e8e8f6;
--surface: #cfcae8;
--muted: #b2b2d8;
--primary: #a29bc8;
--secondary: #7a71aa;
--accent: #675b90;
--highlight: #49426b;
--border: #2e2b4f;
--focus: #17152d;
--text: #09070f;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #e8e8f6;
--color-surface: #cfcae8;
--color-muted: #b2b2d8;
--color-primary: #a29bc8;
--color-secondary: #7a71aa;
--color-accent: #675b90;
--color-highlight: #49426b;
--color-border: #2e2b4f;
--color-focus: #17152d;
--color-text: #09070f;
}JSON (DTCG tokens)
{
"aster-canvas-4s4": {
"bg": {
"$type": "color",
"$value": "#e8e8f6"
},
"surface": {
"$type": "color",
"$value": "#cfcae8"
},
"muted": {
"$type": "color",
"$value": "#b2b2d8"
},
"primary": {
"$type": "color",
"$value": "#a29bc8"
},
"secondary": {
"$type": "color",
"$value": "#7a71aa"
},
"accent": {
"$type": "color",
"$value": "#675b90"
},
"highlight": {
"$type": "color",
"$value": "#49426b"
},
"border": {
"$type": "color",
"$value": "#2e2b4f"
},
"focus": {
"$type": "color",
"$value": "#17152d"
},
"text": {
"$type": "color",
"$value": "#09070f"
}
}
}About this palette
Aster Canvas is a 10-color OKLCH-ready palette tagged pink, monochromatic, 10 colors. Hex values: #E8E8F6, #CFCAE8, #B2B2D8, #A29BC8, #7A71AA, #675B90, #49426B, #2E2B4F, #17152D, #09070F. 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 Aster Canvas by OKLab color distance.