Black Pearl to Grauzone Color Palette

About this palette

Black Pearl to Grauzone is a 5-color muted palette: #1B2931 (Black Pearl), #CDD7EF (Fly a Kite), #72819A (Stonewash), #4A4B5E (Deep Night), #82A4B2 (Grauzone). It mixes gray, blue tones and feels cool overall. The strongest text pairing is #1B2931 on #CDD7EF with a contrast ratio of 10.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Pearl	rgb(27, 41, 49)	hsl(202, 29%, 15%)
Fly a Kite	rgb(205, 215, 239)	hsl(222, 52%, 87%)
Stonewash	rgb(114, 129, 154)	hsl(218, 17%, 53%)
Deep Night	rgb(74, 75, 94)	hsl(237, 12%, 33%)
Grauzone	rgb(130, 164, 178)	hsl(197, 24%, 60%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa10.34:1 Very good#1B2931 on #CDD7EF
Aa10.34:1 Very good#CDD7EF on #1B2931
Aa5.92:1 Good#CDD7EF on #4A4B5E
Aa5.92:1 Good#4A4B5E on #CDD7EF
Aa5.61:1 Good#1B2931 on #82A4B2
Aa5.61:1 Good#82A4B2 on #1B2931
Aa3.78:1 Poor#1B2931 on #72819A
Aa3.78:1 Poor#72819A on #1B2931

Color blindness preview

CSS variables

/* Black Pearl to Grauzone — https://swatchly.xyz/palette/1b2931-cdd7ef-72819a-4a4b5e-82a4b2 */
:root {
  --black-pearl: #1b2931;
  --fly-a-kite: #cdd7ef;
  --stonewash: #72819a;
  --deep-night: #4a4b5e;
  --grauzone: #82a4b2;
}

Tailwind CSS v4

/* Black Pearl to Grauzone — https://swatchly.xyz/palette/1b2931-cdd7ef-72819a-4a4b5e-82a4b2 */
@theme {
  --color-black-pearl: #1b2931;
  --color-black-pearl-50: #edf7fd;
  --color-black-pearl-100: #e2edf4;
  --color-black-pearl-200: #cddae2;
  --color-black-pearl-300: #b5c3cc;
  --color-black-pearl-400: #94a4ae;
  --color-black-pearl-500: #7a8b94;
  --color-black-pearl-600: #62717b;
  --color-black-pearl-700: #4e5c65;
  --color-black-pearl-800: #3d4a52;
  --color-black-pearl-900: #303b42;
  --color-black-pearl-950: #1b2931;
  --color-fly-a-kite: #cdd7ef;
  --color-fly-a-kite-50: #f1f5ff;
  --color-fly-a-kite-100: #e4ebfa;
  --color-fly-a-kite-200: #cdd7ef;
  --color-fly-a-kite-300: #b8c1d5;
  --color-fly-a-kite-400: #98a1b7;
  --color-fly-a-kite-500: #7d869c;
  --color-fly-a-kite-600: #636b80;
  --color-fly-a-kite-700: #4d5568;
  --color-fly-a-kite-800: #3b4252;
  --color-fly-a-kite-900: #2d3340;
  --color-fly-a-kite-950: #1b1f29;
  --color-stonewash: #72819a;
  --color-stonewash-50: #eef4ff;
  --color-stonewash-100: #dfeafb;
  --color-stonewash-200: #c8d5ea;
  --color-stonewash-300: #afbed5;
  --color-stonewash-400: #8e9db6;
  --color-stonewash-500: #72819a;
  --color-stonewash-600: #5a687f;
  --color-stonewash-700: #465267;
  --color-stonewash-800: #354052;
  --color-stonewash-900: #283141;
  --color-stonewash-950: #181f2a;
  --color-deep-night: #4a4b5e;
  --color-deep-night-50: #f3f4ff;
  --color-deep-night-100: #e9eaf8;
  --color-deep-night-200: #d3d4e5;
  --color-deep-night-300: #bbbccf;
  --color-deep-night-400: #999bb0;
  --color-deep-night-500: #7d7e93;
  --color-deep-night-600: #616376;
  --color-deep-night-700: #4a4b5e;
  --color-deep-night-800: #393a49;
  --color-deep-night-900: #2c2c39;
  --color-deep-night-950: #1a1b23;
  --color-grauzone: #82a4b2;
  --color-grauzone-50: #e5f7ff;
  --color-grauzone-100: #d7eef7;
  --color-grauzone-200: #bfdae5;
  --color-grauzone-300: #a5c3d0;
  --color-grauzone-400: #82a4b2;
  --color-grauzone-500: #688997;
  --color-grauzone-600: #4f6f7c;
  --color-grauzone-700: #3c5964;
  --color-grauzone-800: #2c4650;
  --color-grauzone-900: #20363e;
  --color-grauzone-950: #122228;
}