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

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

Citrus Rust & Clay is an 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.

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.

Background: Bone (#DEDBC8) is the lightest color, so it belongs on large surfaces.
Text: Rust (#A53500) on #DEDBC8 gives 4.85:1, passing WCAG AA.
Primary: Clay (#CB674D) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sand (#D2AD71) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Rust on Bone at 4.85:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Citrus Rust & Clay

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

#A53500

#CB674D

#D2AD71

#DEDBC8

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
`#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

Similar palettes 24 more in this mood