Maple Syrup Color Palette
Deep maple brown warming into golden syrup.
Make it a gradient → Want to adjust the palette colors? Use the Color Palette Generator →
Colors
#4A2511
#7A3E17
#A6591F
#C97A2E
#E8A24D
Contrast on Light & Dark Backgrounds
| Color | Hex | On White | On Black |
|---|---|---|---|
| #4A2511 | T - | T - | |
| #7A3E17 | T - | T - | |
| #A6591F | T - | T - | |
| #C97A2E | T - | T - | |
| #E8A24D | T - | T - |
Each circle shows the color as text on white and black, with a simulated WCAG AA pass/fail badge. Not a guarantee of accessibility compliance. Click a check to verify it on colorcontrastcheck.com.
Maple Syrup CSS Code
oklch(31.02% 0.064 47.42) oklch(43.3% 0.0976 50.1) oklch(54.56% 0.1221 53.07) oklch(65.18% 0.1318 60.25) oklch(76.45% 0.1302 68.8)
The same colors in OKLCH. In a gradient, OKLCH can also blend them more vividly. How OKLCH gradients work →
Similar Palettes
More Color Palettes
FAQ
What colors are in the Maple Syrup palette?
Deep maple brown warming into golden syrup.
How do I turn the Maple Syrup palette into a CSS gradient?
Use background: linear-gradient(to right, #4A2511, #7A3E17, #A6591F, #C97A2E, #E8A24D);, or click "Make it a gradient" above to open it in the live generator.