What are the hex codes in the White & Terracotta palette?

The White & Terracotta color palette consists of White #FFFFFF, Linen #F6EDE7, Clay #C8654A, Espresso #3A2A24.

How should I use the White & Terracotta palette on a website?

Use White #FFFFFF as the background, Espresso #3A2A24 for text, Clay #C8654A for buttons and links, and Linen #F6EDE7 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is White on Espresso at 13.67:1.

Which colors in White & Terracotta have enough contrast for text?

The highest-contrast pair is #FFFFFF on #3A2A24 with a ratio of 13.67:1, which passes WCAG AA for normal text.

#FFFFFFWhite

#F6EDE7Linen

#C8654AClay

#3A2A24Espresso

White & Terracotta color palette

Modern Minimal White Brown Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
White	`#FFFFFF`	`rgb(255, 255, 255)`	`hsl(0, 0%, 100%)`	`oklch(100.0% 0.000 0)`
Linen	`#F6EDE7`	`rgb(246, 237, 231)`	`hsl(24, 45%, 94%)`	`oklch(95.1% 0.013 56)`
Clay	`#C8654A`	`rgb(200, 101, 74)`	`hsl(13, 53%, 54%)`	`oklch(61.8% 0.133 36)`
Espresso	`#3A2A24`	`rgb(58, 42, 36)`	`hsl(16, 23%, 18%)`	`oklch(30.2% 0.026 41)`

Why it works and how to use it

White & Terracotta is a monochromatic color palette tagged modern, minimal, white. A monochromatic set: the same hue family from Espresso down to White. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

With 3 chromatic colors, Clay takes the lead while the rest support. Lightness runs from 18% to 100%. Well suited to websites, presentations and branding.

Background: White (#FFFFFF) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#3A2A24) on #FFFFFF gives 13.67:1, passing WCAG AAA.
Primary: Clay (#C8654A) is the most saturated mid-tone; use it for buttons and links (3.88:1 against the background, fine for UI elements).
Accent: Linen (#F6EDE7) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is White on Espresso at 13.67:1.

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

BrandFeaturesPricingBlogGet started

Design faster with White & Terracotta

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

#FFFFFF

#F6EDE7

#C8654A

#3A2A24

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
`#FFFFFF` on `#3A2A24`	Aa	13.67:1	AAA
`#F6EDE7` on `#3A2A24`	Aa	11.84:1	AAA
`#FFFFFF` on `#C8654A`	Aa	3.88:1	AA large only
`#C8654A` on `#3A2A24`	Aa	3.52:1	AA large only
`#F6EDE7` on `#C8654A`	Aa	3.36:1	AA large only
`#FFFFFF` on `#F6EDE7`	Aa	1.15:1	Fail

Similar palettes 24 more in this mood