Palette · 10 colors · Lc 9
Cinnapink Beacon palette
Cinnapink Beacon: a 10-color palette (Red, Gray, Warm, Monochromatic). HEX, RGB, HSL and OKLCH for #F4EEEF, #EAD0D4, #CCADB4, #BD8F96, #A06B77, #845360, #65444D, #472B31, #271C1F, #10080A, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
- Red
- Gray
- Warm
- Monochromatic
- 10 Colors
bg
#F4EEEF
surface
#EAD0D4
muted
#CCADB4
primary
#BD8F96
secondary
#A06B77
accent
#845360
highlight
#65444D
border
#472B31
focus
#271C1F
text
#10080A
Colors in Cinnapink Beacon: HEX, RGB, HSL & OKLCH
- #F4EEEF color page →
bg
#F4EEEF
- RGB
- rgb(244 238 239)
- HSL
- hsl(350 21% 95%)
- OKLCH
- oklch(0.954 0.007 5.6)
WCAG contrast: on white 1.14:1 (Fail) · on black 18.32:1 (AAA)
- #EAD0D4 color page →
surface
#EAD0D4
- RGB
- rgb(234 208 212)
- HSL
- hsl(351 38% 87%)
- OKLCH
- oklch(0.88 0.029 7.2)
WCAG contrast: on white 1.45:1 (Fail) · on black 14.47:1 (AAA)
- #CCADB4 color page →
muted
#CCADB4
- RGB
- rgb(204 173 180)
- HSL
- hsl(346 23% 74%)
- OKLCH
- oklch(0.777 0.037 2.8)
WCAG contrast: on white 2.05:1 (Fail) · on black 10.20:1 (AAA)
- #BD8F96 color page →
primary
#BD8F96
- RGB
- rgb(189 143 150)
- HSL
- hsl(351 26% 65%)
- OKLCH
- oklch(0.696 0.056 8.5)
WCAG contrast: on white 2.78:1 (Fail) · on black 7.53:1 (AAA)
- #A06B77 color page →
secondary
#A06B77
- RGB
- rgb(160 107 119)
- HSL
- hsl(346 22% 52%)
- OKLCH
- oklch(0.587 0.069 4.6)
WCAG contrast: on white 4.31:1 (Fail) · on black 4.86:1 (AA)
- #845360 color page →
accent
#845360
- RGB
- rgb(132 83 96)
- HSL
- hsl(344 23% 42%)
- OKLCH
- oklch(0.501 0.068 2.6)
WCAG contrast: on white 6.19:1 (AA) · on black 3.38:1 (Fail)
- #65444D color page →
highlight
#65444D
- RGB
- rgb(101 68 77)
- HSL
- hsl(344 20% 33%)
- OKLCH
- oklch(0.427 0.047 1.4)
WCAG contrast: on white 8.44:1 (AAA) · on black 2.48:1 (Fail)
- #472B31 color page →
border
#472B31
- RGB
- rgb(71 43 49)
- HSL
- hsl(347 25% 22%)
- OKLCH
- oklch(0.326 0.042 5.7)
WCAG contrast: on white 12.66:1 (AAA) · on black 1.65:1 (Fail)
- #271C1F color page →
focus
#271C1F
- RGB
- rgb(39 28 31)
- HSL
- hsl(344 16% 13%)
- OKLCH
- oklch(0.241 0.018 0.5)
WCAG contrast: on white 16.50:1 (AAA) · on black 1.27:1 (Fail)
- #10080A color page →
text
#10080A
- RGB
- rgb(16 8 10)
- HSL
- hsl(345 33% 5%)
- OKLCH
- oklch(0.147 0.015 1.9)
WCAG contrast: on white 19.78:1 (AAA) · on black 1.06:1 (Fail)
Export Cinnapink Beacon: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #f4eeef;
--surface: #ead0d4;
--muted: #ccadb4;
--primary: #bd8f96;
--secondary: #a06b77;
--accent: #845360;
--highlight: #65444d;
--border: #472b31;
--focus: #271c1f;
--text: #10080a;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #f4eeef;
--color-surface: #ead0d4;
--color-muted: #ccadb4;
--color-primary: #bd8f96;
--color-secondary: #a06b77;
--color-accent: #845360;
--color-highlight: #65444d;
--color-border: #472b31;
--color-focus: #271c1f;
--color-text: #10080a;
}JSON (DTCG tokens)
{
"cinnapink-beacon-7l6": {
"bg": {
"$type": "color",
"$value": "#f4eeef"
},
"surface": {
"$type": "color",
"$value": "#ead0d4"
},
"muted": {
"$type": "color",
"$value": "#ccadb4"
},
"primary": {
"$type": "color",
"$value": "#bd8f96"
},
"secondary": {
"$type": "color",
"$value": "#a06b77"
},
"accent": {
"$type": "color",
"$value": "#845360"
},
"highlight": {
"$type": "color",
"$value": "#65444d"
},
"border": {
"$type": "color",
"$value": "#472b31"
},
"focus": {
"$type": "color",
"$value": "#271c1f"
},
"text": {
"$type": "color",
"$value": "#10080a"
}
}
}About this palette
Cinnapink Beacon is a 10-color OKLCH-ready palette tagged red, gray, warm, monochromatic, 10 colors. Hex values: #F4EEEF, #EAD0D4, #CCADB4, #BD8F96, #A06B77, #845360, #65444D, #472B31, #271C1F, #10080A. APCA contrast score Lc 9. 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 Cinnapink Beacon by OKLab color distance.