#F94144
#F3722C
#F9C74F
#90BE6D
#E16700Cinnamon
#D98900Caramel
#D5D65BCitrine
#67C48EEmerald
Bold Cinnamon & Caramel is a vivid split color palette tagged food, summer, vibrant. A split scheme: Cinnamon plays against Emerald across roughly 118° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is warm.
Color codes click any value to copy
| Swatch | Name | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| Cinnamon | #E16700 | rgb(225, 103, 0) | hsl(27, 100%, 44%) | oklch(65.2% 0.175 49) | |
| Caramel | #D98900 | rgb(217, 137, 0) | hsl(38, 100%, 43%) | oklch(69.7% 0.152 69) | |
| Citrine | #D5D65B | rgb(213, 214, 91) | hsl(60, 60%, 60%) | oklch(85.2% 0.145 110) | |
| Emerald | #67C48E | rgb(103, 196, 142) | hsl(145, 44%, 59%) | oklch(74.8% 0.119 156) |
Why it works and how to use it
With 4 chromatic colors, Caramel takes the lead while the rest support. Lightness runs from 43% to 60%. Well suited to menus and packaging.
- Background: Citrine (#D5D65B) is the lightest color, so it belongs on large surfaces.
- Text: Cinnamon (#E16700) on #D5D65B gives 2.21:1, so pair it with a darker neutral for body copy.
- Primary: Caramel (#D98900) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
- Accent: Emerald (#67C48E) for highlights, badges and hover states.
No pair inside the palette reaches 4.5:1, so add black or white for body text.
Preview on a real UI see how the palette feels in context
BrandFeaturesPricingBlogGet started
Design faster with Bold Cinnamon & Caramel
A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.
Primary action SecondaryCard title
Card title
Card title
Roles are assigned by lightness.
Color blindness simulation
#E16700
#D98900
#D5D65B
#67C48E
Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.
Contrast check WCAG ratios between palette colors
| Pair | Sample | Ratio | Level |
|---|---|---|---|
#E16700 on #D5D65B | Aa | 2.21:1 | Fail |
#D98900 on #D5D65B | Aa | 1.81:1 | Fail |
#E16700 on #67C48E | Aa | 1.61:1 | Fail |
#D5D65B on #67C48E | Aa | 1.38:1 | Fail |
#D98900 on #67C48E | Aa | 1.31:1 | Fail |
#E16700 on #D98900 | Aa | 1.23:1 | Fail |
Similar palettes 24 more in this mood
#F54D00
#E77E00
#E7D052
#7AC27F
#CDD61D
#FF9600
#499526
#8F6E00
#FF8C00
#FFD23F
#8CC63F
#FFFFFF
#DD9F6E
#EDD693
#9DBE7C
#FDFDFD
#F23F86
#F8676A
#FFC088
#B3B453
#9A002E
#A83CB4
#B66746
#F151AA
#9C6500
#E26C53
#B89500
#FF9E5E
#983C18
#B16100
#C8567B
#FF9C9B
#B1DA87
#5EDD9C
#B9A900
#9A6700
#874C00
#AB3F00
#7F7300
#AD7E00
#4D3424
#88604A
#BBE9CD
#F6FCF8
#B40064
#A87E00
#C27067
#FFB179
#C4CE00
#F49450
#FF7470
#A47900
#853310
#B2003C
#A659B4
#FF78C4
#B3001B
#F2A900
#1A1A1A
#FFF5E1
#9B3E00
#D6B800
#1A1A1A
#FFF5E1
#3B2314
#6B4530
#A8D5BA
#F1F7F3
#DDA300
#D3E359
#35D07D
#FDFDFD
#B15959
#DFB2BB
#FAF2EC
#51423D
#910039
#A0771C
#E87E00
#FFC0B1
#C24F00
#F8A79C
#FFF1E6
#57412F
#E6FBBC
#C5AD39
#903F00
#491D00
#FFBA85
#FFEFC0
#A8E45F
#FAFAFA