What are the hex codes in the Ruby Terracotta & Tan palette?

The Ruby Terracotta & Tan color palette consists of Terracotta #D67E6A, Tan #E6BF82, Sage #7ABAB1, Raisin #1B1B1D.

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

Use Tan #E6BF82 as the background, Raisin #1B1B1D for text, Terracotta #D67E6A for buttons and links, and Sage #7ABAB1 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Tan on Raisin at 9.94:1.

Which colors in Ruby Terracotta & Tan have enough contrast for text?

The highest-contrast pair is #E6BF82 on #1B1B1D with a ratio of 9.94:1, which passes WCAG AA for normal text.

#D67E6ATerracotta

#E6BF82Tan

#7ABAB1Sage

#1B1B1DRaisin

Ruby Terracotta & Tan color palette

Modern

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Terracotta	`#D67E6A`	`rgb(214, 126, 106)`	`hsl(11, 57%, 63%)`	`oklch(68.3% 0.114 34)`
Tan	`#E6BF82`	`rgb(230, 191, 130)`	`hsl(37, 67%, 71%)`	`oklch(82.5% 0.090 78)`
Sage	`#7ABAB1`	`rgb(122, 186, 177)`	`hsl(172, 32%, 60%)`	`oklch(74.3% 0.067 185)`
Raisin	`#1B1B1D`	`rgb(27, 27, 29)`	`hsl(240, 4%, 11%)`	`oklch(22.3% 0.004 286)`

Why it works and how to use it

Ruby Terracotta & Tan is a complementary color palette tagged modern. Terracotta and Sage sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Terracotta takes the lead while the rest support. Lightness runs from 11% to 71%. Well suited to websites, presentations and branding.

Background: Tan (#E6BF82) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#1B1B1D) on #E6BF82 gives 9.94:1, passing WCAG AAA.
Primary: Terracotta (#D67E6A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sage (#7ABAB1) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Tan on Raisin at 9.94:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Ruby Terracotta & Tan

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

#D67E6A

#E6BF82

#7ABAB1

#1B1B1D

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
`#E6BF82` on `#1B1B1D`	Aa	9.94:1	AAA
`#7ABAB1` on `#1B1B1D`	Aa	7.77:1	AAA
`#D67E6A` on `#1B1B1D`	Aa	5.77:1	AA
`#D67E6A` on `#E6BF82`	Aa	1.72:1	Fail
`#D67E6A` on `#7ABAB1`	Aa	1.35:1	Fail
`#E6BF82` on `#7ABAB1`	Aa	1.28:1	Fail

Similar palettes 24 more in this mood