Slate UI Palette

CSS variables

:root {
  --color-1: #0F172A;
  --color-2: #334155;
  --color-3: #64748B;
  --color-4: #CBD5E1;
  --color-5: #F8FAFC;
}

Tailwind config

// tailwind.config.js
colors: {
  "slate-ui-1": "#0F172A",
  "slate-ui-2": "#334155",
  "slate-ui-3": "#64748B",
  "slate-ui-4": "#CBD5E1",
  "slate-ui-5": "#F8FAFC",
}

About this palette

The Slate UI palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.

Readable text on each color

White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.

#0F172AWhite17.85:1AA

#334155White10.35:1AA

#64748BWhite4.76:1AA

#CBD5E1Near-black12.73:1AA

#F8FAFCNear-black18.06:1AA

These colours on each other

10 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.

text \\ background	#0F172A	#334155	#64748B	#CBD5E1	#F8FAFC
#0F172A	·	1.72Fails	3.75Large only	12.02AA	17.06AA
#334155	1.72Fails	·	2.18Fails	6.97AA	9.90AA
#64748B	3.75Large only	2.18Fails	·	3.21Large only	4.55AA
#CBD5E1	12.02AA	6.97AA	3.21Large only	·	1.42Fails
#F8FAFC	17.06AA	9.90AA	4.55AA	1.42Fails	·

More palettes

Gradients in the same range

Midnight Blue Steel Slate Fade

Slate UI Palette

Related

Gradients in the same range