Ink Blue Palette

CSS variables

:root {
  --color-1: #050A30;
  --color-2: #0B1D6B;
  --color-3: #173EA5;
  --color-4: #6C8BD4;
  --color-5: #E6ECF8;
}

Tailwind config

// tailwind.config.js
colors: {
  "ink-blue-1": "#050A30",
  "ink-blue-2": "#0B1D6B",
  "ink-blue-3": "#173EA5",
  "ink-blue-4": "#6C8BD4",
  "ink-blue-5": "#E6ECF8",
}

About this palette

The Ink Blue 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.

#050A30White19.22:1AA

#0B1D6BWhite14.98:1AA

#173EA5White9.26:1AA

#6C8BD4Near-black5.65:1AA

#E6ECF8Near-black15.94:1AA

These colours on each other

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

text \\ background	#050A30	#0B1D6B	#173EA5	#6C8BD4	#E6ECF8
#050A30	·	1.28Fails	2.08Fails	5.75AA	16.22AA
#0B1D6B	1.28Fails	·	1.62Fails	4.48Large only	12.64AA
#173EA5	2.08Fails	1.62Fails	·	2.77Fails	7.81AA
#6C8BD4	5.75AA	4.48Large only	2.77Fails	·	2.82Fails
#E6ECF8	16.22AA	12.64AA	7.81AA	2.82Fails	·

More palettes

Gradients in the same range

Slate Fade Midnight Blue Arctic

Ink Blue Palette

Related

Gradients in the same range