What are the hex codes in the Studio Terracotta palette?

The Studio Terracotta color palette consists of Smoke #F7F3EF, Almond #E9DED4, Burnt Orange #C65D3B, Raisin #2E2622.

How should I use the Studio Terracotta palette on a website?

Use Smoke #F7F3EF as the background, Raisin #2E2622 for text, Burnt Orange #C65D3B for buttons and links, and Almond #E9DED4 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Raisin at 13.43:1.

Which colors in Studio Terracotta have enough contrast for text?

The highest-contrast pair is #F7F3EF on #2E2622 with a ratio of 13.43:1, which passes WCAG AA for normal text.

#F7F3EFSmoke

#E9DED4Almond

#C65D3BBurnt Orange

#2E2622Raisin

Studio Terracotta color palette

Modern Minimal White Gray Orange

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Smoke	`#F7F3EF`	`rgb(247, 243, 239)`	`hsl(30, 33%, 95%)`	`oklch(96.6% 0.007 68)`
Almond	`#E9DED4`	`rgb(233, 222, 212)`	`hsl(29, 32%, 87%)`	`oklch(90.7% 0.018 65)`
Burnt Orange	`#C65D3B`	`rgb(198, 93, 59)`	`hsl(15, 55%, 50%)`	`oklch(60.1% 0.143 38)`
Raisin	`#2E2622`	`rgb(46, 38, 34)`	`hsl(20, 15%, 16%)`	`oklch(27.6% 0.014 48)`

Why it works and how to use it

Studio Terracotta is a monochromatic color palette tagged modern, minimal, white. All four colors sit within 14° of hue, so the scheme reads as one color explored across light and dark. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

Two of the four colors are near-neutral, which leaves room for Burnt Orange to lead. Lightness runs from 16% to 95%. Well suited to websites, presentations and branding.

Background: Smoke (#F7F3EF) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#2E2622) on #F7F3EF gives 13.43:1, passing WCAG AAA.
Primary: Burnt Orange (#C65D3B) is the most saturated mid-tone; use it for buttons and links (3.78:1 against the background, fine for UI elements).
Accent: Almond (#E9DED4) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Raisin at 13.43:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Studio 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

#F7F3EF

#E9DED4

#C65D3B

#2E2622

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
`#F7F3EF` on `#2E2622`	Aa	13.43:1	AAA
`#E9DED4` on `#2E2622`	Aa	11.2:1	AAA
`#F7F3EF` on `#C65D3B`	Aa	3.78:1	AA large only
`#C65D3B` on `#2E2622`	Aa	3.55:1	AA large only
`#E9DED4` on `#C65D3B`	Aa	3.15:1	AA large only
`#F7F3EF` on `#E9DED4`	Aa	1.2:1	Fail

Similar palettes 24 more in this mood