What are the hex codes in the Bold Cinnamon & Caramel palette?

The Bold Cinnamon & Caramel color palette consists of Cinnamon #E16700, Caramel #D98900, Citrine #D5D65B, Emerald #67C48E.

How should I use the Bold Cinnamon & Caramel palette on a website?

Use Citrine #D5D65B as the background, Cinnamon #E16700 for text, Caramel #D98900 for buttons and links, and Emerald #67C48E for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Bold Cinnamon & Caramel have enough contrast for text?

The highest-contrast pair is #E16700 on #D5D65B with a ratio of 2.21:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#E16700Cinnamon

#D98900Caramel

#D5D65BCitrine

#67C48EEmerald

Bold Cinnamon & Caramel color palette

Food Summer Vibrant Warm Brown Green

Color codes click any value to copy

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

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.

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 Secondary

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.

Palette card

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

:root {
  --cinnamon: #E16700;
  --caramel: #D98900;
  --citrine: #D5D65B;
  --emerald: #67C48E;
}

$cinnamon: #E16700;
$caramel: #D98900;
$citrine: #D5D65B;
$emerald: #67C48E;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cinnamon': '#E16700',
        'caramel': '#D98900',
        'citrine': '#D5D65B',
        'emerald': '#67C48E',
      },
    },
  },
};

{
  "name": "Bold Cinnamon & Caramel",
  "colors": [
    "#E16700",
    "#D98900",
    "#D5D65B",
    "#67C48E"
  ]
}

background: linear-gradient(135deg, #E16700, #D98900, #D5D65B, #67C48E);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-11-20 · Free for commercial use, no attribution needed.

Similar palettes 25 more in this mood