What are the hex codes in the Yellow & Indigo palette?

The Yellow & Indigo color palette consists of Gold #FFD100, Pineapple #FFEA80, Dusk #46458C, Ink #141235.

How should I use the Yellow & Indigo palette on a website?

Use Pineapple #FFEA80 as the background, Ink #141235 for text, Gold #FFD100 for buttons and links, and Dusk #46458C for accents. 4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Pineapple on Ink at 14.84:1.

Which colors in Yellow & Indigo have enough contrast for text?

The highest-contrast pair is #FFEA80 on #141235 with a ratio of 14.84:1, which passes WCAG AA for normal text.

#FFD100Gold

#FFEA80Pineapple

#46458CDusk

#141235Ink

Yellow & Indigo color palette

Dark Yellow Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Gold	`#FFD100`	`rgb(255, 209, 0)`	`hsl(49, 100%, 50%)`	`oklch(87.5% 0.179 93)`
Pineapple	`#FFEA80`	`rgb(255, 234, 128)`	`hsl(50, 100%, 75%)`	`oklch(93.3% 0.129 98)`
Dusk	`#46458C`	`rgb(70, 69, 140)`	`hsl(241, 34%, 41%)`	`oklch(42.9% 0.115 281)`
Ink	`#141235`	`rgb(20, 18, 53)`	`hsl(243, 49%, 14%)`	`oklch(20.8% 0.066 282)`

Why it works and how to use it

Yellow & Indigo is a vivid complementary color palette tagged dark, yellow, blue. Near-complementary hues (about 169° 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 4 chromatic colors, Gold takes the lead while the rest support. Lightness runs from 14% to 75%. Well suited to websites, presentations and branding.

Background: Pineapple (#FFEA80) is the lightest color, so it belongs on large surfaces.
Text: Ink (#141235) on #FFEA80 gives 14.84:1, passing WCAG AAA.
Primary: Gold (#FFD100) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Dusk (#46458C) for highlights, badges and hover states.

4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Pineapple on Ink at 14.84:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Yellow & Indigo

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

#FFD100

#FFEA80

#46458C

#141235

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
`#FFEA80` on `#141235`	Aa	14.84:1	AAA
`#FFD100` on `#141235`	Aa	12.31:1	AAA
`#FFEA80` on `#46458C`	Aa	6.96:1	AA
`#FFD100` on `#46458C`	Aa	5.77:1	AA
`#46458C` on `#141235`	Aa	2.13:1	Fail
`#FFD100` on `#FFEA80`	Aa	1.21:1	Fail

Similar palettes 24 more in this mood