What are the hex codes in the Citrus Cinnamon & Dusty Rose palette?

The Citrus Cinnamon & Dusty Rose color palette consists of Cedar #8E451A, Cinnamon #DC6E2D, Dusty Rose #FFAA79, Snow #FFF9F4.

How should I use the Citrus Cinnamon & Dusty Rose palette on a website?

Use Snow #FFF9F4 as the background, Cedar #8E451A for text, Dusty Rose #FFAA79 for buttons and links, and Cinnamon #DC6E2D for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cedar on Snow at 6.67:1.

Which colors in Citrus Cinnamon & Dusty Rose have enough contrast for text?

The highest-contrast pair is #8E451A on #FFF9F4 with a ratio of 6.67:1, which passes WCAG AA for normal text.

#8E451ACedar

#DC6E2DCinnamon

#FFAA79Dusty Rose

#FFF9F4Snow

Citrus Cinnamon & Dusty Rose color palette

Gradient Warm Earthy Brown Beige White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cedar	`#8E451A`	`rgb(142, 69, 26)`	`hsl(22, 69%, 33%)`	`oklch(47.6% 0.113 48)`
Cinnamon	`#DC6E2D`	`rgb(220, 110, 45)`	`hsl(22, 71%, 52%)`	`oklch(65.7% 0.157 48)`
Dusty Rose	`#FFAA79`	`rgb(255, 170, 121)`	`hsl(22, 100%, 74%)`	`oklch(81.1% 0.119 50)`
Snow	`#FFF9F4`	`rgb(255, 249, 244)`	`hsl(27, 100%, 98%)`	`oklch(98.5% 0.009 63)`

Why it works and how to use it

Citrus Cinnamon & Dusty Rose is a vivid monochromatic color palette tagged gradient, warm, earthy. All four colors sit within 0° of hue, so the scheme reads as one color explored across light and dark. These are bold, punchy colors that need generous white space around them. The overall temperature is warm.

With 3 chromatic colors, Dusty Rose takes the lead while the rest support. Lightness runs from 33% to 98%. Well suited to wellness, organic and outdoor brands.

Background: Snow (#FFF9F4) is the lightest color, so it belongs on large surfaces.
Text: Cedar (#8E451A) on #FFF9F4 gives 6.67:1, passing WCAG AA.
Primary: Dusty Rose (#FFAA79) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cinnamon (#DC6E2D) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cedar on Snow at 6.67:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Citrus Cinnamon & Dusty Rose

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

#8E451A

#DC6E2D

#FFAA79

#FFF9F4

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
`#8E451A` on `#FFF9F4`	Aa	6.67:1	AA
`#8E451A` on `#FFAA79`	Aa	3.74:1	AA large only
`#DC6E2D` on `#FFF9F4`	Aa	3.19:1	AA large only
`#8E451A` on `#DC6E2D`	Aa	2.09:1	Fail
`#DC6E2D` on `#FFAA79`	Aa	1.79:1	Fail
`#FFAA79` on `#FFF9F4`	Aa	1.78:1	Fail

:root {
  --cedar: #8E451A;
  --cinnamon: #DC6E2D;
  --dusty-rose: #FFAA79;
  --snow: #FFF9F4;
}

$cedar: #8E451A;
$cinnamon: #DC6E2D;
$dusty-rose: #FFAA79;
$snow: #FFF9F4;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cedar': '#8E451A',
        'cinnamon': '#DC6E2D',
        'dusty-rose': '#FFAA79',
        'snow': '#FFF9F4',
      },
    },
  },
};

{
  "name": "Citrus Cinnamon & Dusty Rose",
  "colors": [
    "#8E451A",
    "#DC6E2D",
    "#FFAA79",
    "#FFF9F4"
  ]
}

background: linear-gradient(135deg, #8E451A, #DC6E2D, #FFAA79, #FFF9F4);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-01-08 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood