Palette · 8 colors · Lc 8.9
Garfield Canvas palette
Garfield Canvas: a 8-color palette (Yellow, Warm, Dark Mode UI, UI System). HEX, RGB, HSL and OKLCH for #070403, #220D06, #38221B, #5A3121, #A94D26, #C1844C, #C6B39C, #F5EEEC, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.
- Yellow
- Warm
- Dark Mode UI
- UI System
- 8 Colors
bg
#070403
surface
#220D06
muted
#38221B
primary
#5A3121
secondary
#A94D26
accent
#C1844C
highlight
#C6B39C
text
#F5EEEC
Colors in Garfield Canvas: HEX, RGB, HSL & OKLCH
- #070403 color page →
bg
#070403
- RGB
- rgb(7 4 3)
- HSL
- hsl(15 40% 2%)
- OKLCH
- oklch(0.112 0.009 44.4)
WCAG contrast: on white 20.43:1 (AAA) · on black 1.02:1 (Fail)
- #220D06 color page →
surface
#220D06
- RGB
- rgb(34 13 6)
- HSL
- hsl(15 70% 8%)
- OKLCH
- oklch(0.19 0.039 40.3)
WCAG contrast: on white 18.61:1 (AAA) · on black 1.12:1 (Fail)
- #38221B color page →
muted
#38221B
- RGB
- rgb(56 34 27)
- HSL
- hsl(14 35% 16%)
- OKLCH
- oklch(0.278 0.036 38.4)
WCAG contrast: on white 14.86:1 (AAA) · on black 1.41:1 (Fail)
- #5A3121 color page →
primary
#5A3121
- RGB
- rgb(90 49 33)
- HSL
- hsl(17 46% 24%)
- OKLCH
- oklch(0.361 0.065 41.8)
WCAG contrast: on white 11.07:1 (AAA) · on black 1.89:1 (Fail)
- #A94D26 color page →
secondary
#A94D26
- RGB
- rgb(169 77 38)
- HSL
- hsl(18 63% 41%)
- OKLCH
- oklch(0.531 0.132 41.9)
WCAG contrast: on white 5.56:1 (AA) · on black 3.77:1 (Fail)
- #C1844C color page →
accent
#C1844C
- RGB
- rgb(193 132 76)
- HSL
- hsl(29 49% 53%)
- OKLCH
- oklch(0.664 0.104 62)
WCAG contrast: on white 3.14:1 (Fail) · on black 6.67:1 (AA)
- #C6B39C color page →
highlight
#C6B39C
- RGB
- rgb(198 179 156)
- HSL
- hsl(33 27% 69%)
- OKLCH
- oklch(0.777 0.038 72.5)
WCAG contrast: on white 2.03:1 (Fail) · on black 10.32:1 (AAA)
- #F5EEEC color page →
text
#F5EEEC
- RGB
- rgb(245 238 236)
- HSL
- hsl(13 31% 94%)
- OKLCH
- oklch(0.954 0.008 36.6)
WCAG contrast: on white 1.14:1 (Fail) · on black 18.32:1 (AAA)
Export Garfield Canvas: CSS variables, Tailwind & JSON
CSS variables
:root {
--bg: #070403;
--surface: #220d06;
--muted: #38221b;
--primary: #5a3121;
--secondary: #a94d26;
--accent: #c1844c;
--highlight: #c6b39c;
--text: #f5eeec;
}Tailwind CSS v4 @theme
@theme {
--color-bg: #070403;
--color-surface: #220d06;
--color-muted: #38221b;
--color-primary: #5a3121;
--color-secondary: #a94d26;
--color-accent: #c1844c;
--color-highlight: #c6b39c;
--color-text: #f5eeec;
}JSON (DTCG tokens)
{
"garfield-canvas-s": {
"bg": {
"$type": "color",
"$value": "#070403"
},
"surface": {
"$type": "color",
"$value": "#220d06"
},
"muted": {
"$type": "color",
"$value": "#38221b"
},
"primary": {
"$type": "color",
"$value": "#5a3121"
},
"secondary": {
"$type": "color",
"$value": "#a94d26"
},
"accent": {
"$type": "color",
"$value": "#c1844c"
},
"highlight": {
"$type": "color",
"$value": "#c6b39c"
},
"text": {
"$type": "color",
"$value": "#f5eeec"
}
}
}About this palette
Garfield Canvas is a 8-color OKLCH-ready palette tagged yellow, warm, dark mode ui, ui system, 8 colors. Hex values: #070403, #220D06, #38221B, #5A3121, #A94D26, #C1844C, #C6B39C, #F5EEEC. APCA contrast score Lc 8.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 Garfield Canvas by OKLab color distance.