What are the hex codes in the Ruby Clay & Pine palette?

The Ruby Clay & Pine color palette consists of Clay #B15959, White #FDFDFD, Baby Pink #E9CCD3, Pine #507663.

How should I use the Ruby Clay & Pine palette on a website?

Use White #FDFDFD as the background, Pine #507663 for text, Baby Pink #E9CCD3 for buttons and links, and Clay #B15959 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is White on Pine at 5.02:1.

Which colors in Ruby Clay & Pine have enough contrast for text?

The highest-contrast pair is #FDFDFD on #507663 with a ratio of 5.02:1, which passes WCAG AA for normal text.

#B15959Clay

#FDFDFDWhite

#E9CCD3Baby Pink

#507663Pine

Ruby Clay & Pine color palette

Modern White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Clay	`#B15959`	`rgb(177, 89, 89)`	`hsl(0, 36%, 52%)`	`oklch(57.0% 0.115 21)`
White	`#FDFDFD`	`rgb(253, 253, 253)`	`hsl(0, 0%, 99%)`	`oklch(99.4% 0.000 0)`
Baby Pink	`#E9CCD3`	`rgb(233, 204, 211)`	`hsl(346, 40%, 86%)`	`oklch(87.1% 0.034 1)`
Pine	`#507663`	`rgb(80, 118, 99)`	`hsl(150, 19%, 39%)`	`oklch(53.1% 0.053 162)`

Why it works and how to use it

Ruby Clay & Pine is a complementary color palette tagged modern, white. Near-complementary hues (about 164° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Baby Pink takes the lead while the rest support. Lightness runs from 39% to 99%. Well suited to websites, presentations and branding.

Background: White (#FDFDFD) is the lightest color, so it belongs on large surfaces.
Text: Pine (#507663) on #FDFDFD gives 5.02:1, passing WCAG AA.
Primary: Baby Pink (#E9CCD3) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Clay (#B15959) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Ruby Clay & Pine

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

#B15959

#FDFDFD

#E9CCD3

#507663

Color-blind check: under protanopia and deuteranopia, Clay and Pine become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#FDFDFD` on `#507663`	Aa	5.02:1	AA
`#B15959` on `#FDFDFD`	Aa	4.65:1	AA
`#E9CCD3` on `#507663`	Aa	3.41:1	AA large only
`#B15959` on `#E9CCD3`	Aa	3.16:1	AA large only
`#FDFDFD` on `#E9CCD3`	Aa	1.47:1	Fail
`#B15959` on `#507663`	Aa	1.08:1	Fail

Similar palettes 24 more in this mood