What are the hex codes in the Sunny Cyan & Saffron palette?

The Sunny Cyan & Saffron color palette consists of Saffron #E8D677, Snow #FEF9EF, Cyan #00C0CE, Cerulean #4176A7.

How should I use the Sunny Cyan & Saffron palette on a website?

Use Snow #FEF9EF as the background, Cerulean #4176A7 for text, Cyan #00C0CE for buttons and links, and Saffron #E8D677 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Snow on Cerulean at 4.57:1.

Which colors in Sunny Cyan & Saffron have enough contrast for text?

The highest-contrast pair is #FEF9EF on #4176A7 with a ratio of 4.57:1, which passes WCAG AA for normal text.

#E8D677Saffron

#FEF9EFSnow

#00C0CECyan

#4176A7Cerulean

Sunny Cyan & Saffron color palette

Summer Yellow White Teal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Saffron	`#E8D677`	`rgb(232, 214, 119)`	`hsl(50, 71%, 69%)`	`oklch(87.1% 0.118 99)`
Snow	`#FEF9EF`	`rgb(254, 249, 239)`	`hsl(40, 88%, 97%)`	`oklch(98.3% 0.014 85)`
Cyan	`#00C0CE`	`rgb(0, 192, 206)`	`hsl(184, 100%, 40%)`	`oklch(73.7% 0.126 204)`
Cerulean	`#4176A7`	`rgb(65, 118, 167)`	`hsl(209, 44%, 45%)`	`oklch(55.1% 0.096 248)`

Why it works and how to use it

Sunny Cyan & Saffron is a vivid complementary color palette tagged summer, yellow, white. Near-complementary hues (about 159° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Cyan takes the lead while the rest support. Lightness runs from 40% to 97%. Well suited to websites, presentations and branding.

Background: Snow (#FEF9EF) is the lightest color, so it belongs on large surfaces.
Text: Cerulean (#4176A7) on #FEF9EF gives 4.57:1, passing WCAG AA.
Primary: Cyan (#00C0CE) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Saffron (#E8D677) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Snow on Cerulean at 4.57:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Sunny Cyan & Saffron

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

#E8D677

#FEF9EF

#00C0CE

#4176A7

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
`#FEF9EF` on `#4176A7`	Aa	4.57:1	AA
`#E8D677` on `#4176A7`	Aa	3.27:1	AA large only
`#00C0CE` on `#4176A7`	Aa	2.16:1	Fail
`#FEF9EF` on `#00C0CE`	Aa	2.12:1	Fail
`#E8D677` on `#00C0CE`	Aa	1.52:1	Fail
`#E8D677` on `#FEF9EF`	Aa	1.4:1	Fail

Similar palettes 24 more in this mood