What are the hex codes in the Citron & Slate palette?

The Citron & Slate color palette consists of Smoke #F3F6F7, Lavender Gray #C0C9CE, Citrine #E6D400, Raisin #1F2A2E.

How should I use the Citron & Slate palette on a website?

Use Smoke #F3F6F7 as the background, Raisin #1F2A2E for text, Citrine #E6D400 for buttons and links, and Lavender Gray #C0C9CE for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Raisin at 13.53:1.

Which colors in Citron & Slate have enough contrast for text?

The highest-contrast pair is #F3F6F7 on #1F2A2E with a ratio of 13.53:1, which passes WCAG AA for normal text.

#F3F6F7Smoke

#C0C9CELavender Gray

#E6D400Citrine

#1F2A2ERaisin

Citron & Slate color palette

Minimal White Gray Yellow

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Smoke	`#F3F6F7`	`rgb(243, 246, 247)`	`hsl(195, 20%, 96%)`	`oklch(97.1% 0.003 220)`
Lavender Gray	`#C0C9CE`	`rgb(192, 201, 206)`	`hsl(201, 13%, 78%)`	`oklch(83.0% 0.012 232)`
Citrine	`#E6D400`	`rgb(230, 212, 0)`	`hsl(55, 100%, 45%)`	`oklch(85.8% 0.181 103)`
Raisin	`#1F2A2E`	`rgb(31, 42, 46)`	`hsl(196, 19%, 15%)`	`oklch(27.6% 0.017 222)`

Why it works and how to use it

Citron & Slate is a complementary color palette tagged minimal, white, gray. Near-complementary hues (about 141° 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.

Two of the four colors are near-neutral, which leaves room for Citrine to lead. Lightness runs from 15% to 96%. Well suited to websites, presentations and branding.

Background: Smoke (#F3F6F7) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#1F2A2E) on #F3F6F7 gives 13.53:1, passing WCAG AAA.
Primary: Citrine (#E6D400) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Lavender Gray (#C0C9CE) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Smoke on Raisin at 13.53:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Citron & Slate

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

#F3F6F7

#C0C9CE

#E6D400

#1F2A2E

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
`#F3F6F7` on `#1F2A2E`	Aa	13.53:1	AAA
`#E6D400` on `#1F2A2E`	Aa	9.65:1	AAA
`#C0C9CE` on `#1F2A2E`	Aa	8.74:1	AAA
`#F3F6F7` on `#C0C9CE`	Aa	1.55:1	Fail
`#F3F6F7` on `#E6D400`	Aa	1.4:1	Fail
`#C0C9CE` on `#E6D400`	Aa	1.1:1	Fail

Similar palettes 24 more in this mood