What are the hex codes in the Citrus Rust & Clay palette?

The Citrus Rust & Clay color palette consists of Rust #A53500, Clay #CB674D, Sand #D2AD71, Bone #DEDBC8.

How should I use the Citrus Rust & Clay palette on a website?

Use Bone #DEDBC8 as the background, Rust #A53500 for text, Clay #CB674D for buttons and links, and Sand #D2AD71 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Rust on Bone at 4.85:1.

Which colors in Citrus Rust & Clay have enough contrast for text?

The highest-contrast pair is #A53500 on #DEDBC8 with a ratio of 4.85:1, which passes WCAG AA for normal text.

#A53500Rust

#CB674DClay

#D2AD71Sand

#DEDBC8Bone

Citrus Rust & Clay color palette

Warm Earthy Brown Beige Gray

Open in generator

Ask AI about this palette: ChatGPT Claude Perplexity

Citrus Rust & Clay is a analogous color palette tagged warm, earthy, brown. Analogous neighbors on the wheel (Rust, Clay, Sand) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Rust	`#A53500`	`rgb(165, 53, 0)`	`hsl(19, 100%, 32%)`	`oklch(48.9% 0.156 39)`
Clay	`#CB674D`	`rgb(203, 103, 77)`	`hsl(12, 55%, 55%)`	`oklch(62.6% 0.133 36)`
Sand	`#D2AD71`	`rgb(210, 173, 113)`	`hsl(37, 52%, 63%)`	`oklch(76.7% 0.089 79)`
Bone	`#DEDBC8`	`rgb(222, 219, 200)`	`hsl(52, 25%, 83%)`	`oklch(88.9% 0.026 100)`

Why it works and how to use it

The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (83% down to 32% lightness). A natural fit for wellness, organic and outdoor brands.

Pair	Sample	Ratio	Level
`#A53500` on `#DEDBC8`	Aa	4.85:1	AA
`#A53500` on `#D2AD71`	Aa	3.2:1	AA large only
`#CB674D` on `#DEDBC8`	Aa	2.7:1	Fail
`#A53500` on `#CB674D`	Aa	1.8:1	Fail
`#CB674D` on `#D2AD71`	Aa	1.78:1	Fail
`#D2AD71` on `#DEDBC8`	Aa	1.51:1	Fail

Citrus Rust & Clay color palette

Color codes click any value to copy

Why it works and how to use it

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

Design faster with Citrus Rust & Clay

Color blindness simulation

Contrast check WCAG ratios between palette colors

Similar palettes 24 more in this mood