What are the hex codes in the Studio Citrine & Slate palette?

The Studio Citrine & Slate color palette consists of Ink #0A1A1E, Slate #648691, Citrine #EED200, Ice #D8E2E5.

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

Use Ice #D8E2E5 as the background, Ink #0A1A1E for text, Citrine #EED200 for buttons and links, and Slate #648691 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on Ice at 13.51:1.

Which colors in Studio Citrine & Slate have enough contrast for text?

The highest-contrast pair is #0A1A1E on #D8E2E5 with a ratio of 13.51:1, which passes WCAG AA for normal text.

#0A1A1EInk

#648691Slate

#EED200Citrine

#D8E2E5Ice

Studio Citrine & Slate color palette

Modern Minimal Black Gray Yellow

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Ink	`#0A1A1E`	`rgb(10, 26, 30)`	`hsl(192, 50%, 8%)`	`oklch(20.6% 0.023 216)`
Slate	`#648691`	`rgb(100, 134, 145)`	`hsl(195, 18%, 48%)`	`oklch(59.8% 0.042 220)`
Citrine	`#EED200`	`rgb(238, 210, 0)`	`hsl(53, 100%, 47%)`	`oklch(86.1% 0.179 100)`
Ice	`#D8E2E5`	`rgb(216, 226, 229)`	`hsl(194, 20%, 87%)`	`oklch(90.6% 0.012 218)`

Why it works and how to use it

Studio Citrine & Slate is a complementary color palette tagged modern, minimal, black. Near-complementary hues (about 142° 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.

With 3 chromatic colors, Citrine takes the lead while the rest support. Lightness runs from 8% to 87%. Well suited to websites, presentations and branding.

Background: Ice (#D8E2E5) is the lightest color, so it belongs on large surfaces.
Text: Ink (#0A1A1E) on #D8E2E5 gives 13.51:1, passing WCAG AAA.
Primary: Citrine (#EED200) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Slate (#648691) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Ink on Ice at 13.51:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Studio Citrine & 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

#0A1A1E

#648691

#EED200

#D8E2E5

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
`#0A1A1E` on `#D8E2E5`	Aa	13.51:1	AAA
`#0A1A1E` on `#EED200`	Aa	11.75:1	AAA
`#0A1A1E` on `#648691`	Aa	4.55:1	AA
`#648691` on `#D8E2E5`	Aa	2.97:1	Fail
`#648691` on `#EED200`	Aa	2.58:1	Fail
`#EED200` on `#D8E2E5`	Aa	1.15:1	Fail

Similar palettes 24 more in this mood