What are the hex codes in the Butter & Sky palette?

The Butter & Sky color palette consists of Cream #FFF6C8, Vanilla #FFE58A, Glacier #BFE0FF, Dusk #3F4E6B.

How should I use the Butter & Sky palette on a website?

Use Cream #FFF6C8 as the background, Dusk #3F4E6B for text, Vanilla #FFE58A for buttons and links, and Glacier #BFE0FF for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cream on Dusk at 7.67:1.

Which colors in Butter & Sky have enough contrast for text?

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

#FFF6C8Cream

#FFE58AVanilla

#BFE0FFGlacier

#3F4E6BDusk

Butter & Sky color palette

Modern Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cream	`#FFF6C8`	`rgb(255, 246, 200)`	`hsl(50, 100%, 89%)`	`oklch(96.9% 0.060 98)`
Vanilla	`#FFE58A`	`rgb(255, 229, 138)`	`hsl(47, 100%, 77%)`	`oklch(92.4% 0.115 94)`
Glacier	`#BFE0FF`	`rgb(191, 224, 255)`	`hsl(209, 100%, 87%)`	`oklch(89.3% 0.055 247)`
Dusk	`#3F4E6B`	`rgb(63, 78, 107)`	`hsl(220, 26%, 33%)`	`oklch(42.4% 0.052 263)`

Why it works and how to use it

Butter & Sky is a vivid complementary color palette tagged modern, beige. Cream and Dusk sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Vanilla takes the lead while the rest support. Lightness runs from 33% to 89%. Well suited to websites, presentations and branding.

Background: Cream (#FFF6C8) is the lightest color, so it belongs on large surfaces.
Text: Dusk (#3F4E6B) on #FFF6C8 gives 7.67:1, passing WCAG AAA.
Primary: Vanilla (#FFE58A) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Glacier (#BFE0FF) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cream on Dusk at 7.67:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Butter & Sky

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

#FFF6C8

#FFE58A

#BFE0FF

#3F4E6B

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
`#FFF6C8` on `#3F4E6B`	Aa	7.67:1	AAA
`#FFE58A` on `#3F4E6B`	Aa	6.69:1	AA
`#BFE0FF` on `#3F4E6B`	Aa	6.1:1	AA
`#FFF6C8` on `#BFE0FF`	Aa	1.26:1	Fail
`#FFF6C8` on `#FFE58A`	Aa	1.15:1	Fail
`#FFE58A` on `#BFE0FF`	Aa	1.1:1	Fail

Similar palettes 24 more in this mood