What are the hex codes in the Sea Cliff palette?

The Sea Cliff color palette consists of Peacock #3D5A6C, Slate #6E8FA3, Fog #C8D6D9, Putty #D9C7A6.

How should I use the Sea Cliff palette on a website?

Use Fog #C8D6D9 as the background, Peacock #3D5A6C for text, Putty #D9C7A6 for buttons and links, and Slate #6E8FA3 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Peacock on Fog at 4.89:1.

Which colors in Sea Cliff have enough contrast for text?

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

#3D5A6CPeacock

#6E8FA3Slate

#C8D6D9Fog

#D9C7A6Putty

Sea Cliff color palette

Muted Gray Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Peacock	`#3D5A6C`	`rgb(61, 90, 108)`	`hsl(203, 28%, 33%)`	`oklch(45.2% 0.045 236)`
Slate	`#6E8FA3`	`rgb(110, 143, 163)`	`hsl(203, 22%, 54%)`	`oklch(63.2% 0.048 235)`
Fog	`#C8D6D9`	`rgb(200, 214, 217)`	`hsl(191, 18%, 82%)`	`oklch(86.6% 0.016 212)`
Putty	`#D9C7A6`	`rgb(217, 199, 166)`	`hsl(39, 40%, 75%)`	`oklch(83.6% 0.049 83)`

Why it works and how to use it

Sea Cliff is a complementary color palette tagged muted, gray, beige. Peacock and Putty 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 4 chromatic colors, Putty takes the lead while the rest support. Lightness runs from 33% to 82%. Well suited to websites, presentations and branding.

Background: Fog (#C8D6D9) is the lightest color, so it belongs on large surfaces.
Text: Peacock (#3D5A6C) on #C8D6D9 gives 4.89:1, passing WCAG AA.
Primary: Putty (#D9C7A6) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Slate (#6E8FA3) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Peacock on Fog at 4.89:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Sea Cliff

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

#3D5A6C

#6E8FA3

#C8D6D9

#D9C7A6

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
`#3D5A6C` on `#C8D6D9`	Aa	4.89:1	AA
`#3D5A6C` on `#D9C7A6`	Aa	4.4:1	AA large only
`#6E8FA3` on `#C8D6D9`	Aa	2.3:1	Fail
`#3D5A6C` on `#6E8FA3`	Aa	2.13:1	Fail
`#6E8FA3` on `#D9C7A6`	Aa	2.07:1	Fail
`#C8D6D9` on `#D9C7A6`	Aa	1.11:1	Fail

Similar palettes 24 more in this mood