Cinder to Diamond White Color Palette

About this palette

Cinder to Diamond White is a 5-color muted, gradient palette: #21292D (Cinder), #3B525D (Nocturne Blue), #547A87 (Night Owl), #A2B5BF (Shallow Sea), #DEEEF5 (Diamond White). It mixes gray, blue, white tones and feels cool overall. The strongest text pairing is #21292D on #DEEEF5 with a contrast ratio of 12.43:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cinder	rgb(33, 41, 45)	hsl(200, 15%, 15%)
Nocturne Blue	rgb(59, 82, 93)	hsl(199, 22%, 30%)
Night Owl	rgb(84, 122, 135)	hsl(195, 23%, 43%)
Shallow Sea	rgb(162, 181, 191)	hsl(201, 18%, 69%)
Diamond White	rgb(222, 238, 245)	hsl(198, 53%, 92%)

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.

Aa12.43:1 Super#21292D on #DEEEF5
Aa12.43:1 Super#DEEEF5 on #21292D
Aa6.97:1 Good#21292D on #A2B5BF
Aa6.97:1 Good#A2B5BF on #21292D
Aa6.92:1 Good#3B525D on #DEEEF5
Aa6.92:1 Good#DEEEF5 on #3B525D
Aa3.91:1 Poor#547A87 on #DEEEF5
Aa3.91:1 Poor#DEEEF5 on #547A87

Color blindness preview

CSS variables

/* Cinder to Diamond White — https://swatchly.xyz/palette/21292d-3b525d-547a87-a2b5bf-deeef5 */
:root {
  --cinder: #21292d;
  --nocturne-blue: #3b525d;
  --night-owl: #547a87;
  --shallow-sea: #a2b5bf;
  --diamond-white: #deeef5;
}

Tailwind CSS v4

/* Cinder to Diamond White — https://swatchly.xyz/palette/21292d-3b525d-547a87-a2b5bf-deeef5 */
@theme {
  --color-cinder: #21292d;
  --color-cinder-50: #f0f6f9;
  --color-cinder-100: #e6ecf0;
  --color-cinder-200: #d1d9dd;
  --color-cinder-300: #bac2c7;
  --color-cinder-400: #9aa3a8;
  --color-cinder-500: #808a8e;
  --color-cinder-600: #687175;
  --color-cinder-700: #535c60;
  --color-cinder-800: #424a4e;
  --color-cinder-900: #353b3f;
  --color-cinder-950: #21292d;
  --color-nocturne-blue: #3b525d;
  --color-nocturne-blue-50: #e9f8ff;
  --color-nocturne-blue-100: #deeef6;
  --color-nocturne-blue-200: #c6dae3;
  --color-nocturne-blue-300: #acc2cd;
  --color-nocturne-blue-400: #89a2ae;
  --color-nocturne-blue-500: #6d8591;
  --color-nocturne-blue-600: #536a75;
  --color-nocturne-blue-700: #3b525d;
  --color-nocturne-blue-800: #2e4048;
  --color-nocturne-blue-900: #223138;
  --color-nocturne-blue-950: #131e23;
  --color-night-owl: #547a87;
  --color-night-owl-50: #e7f9ff;
  --color-night-owl-100: #d9f2fa;
  --color-night-owl-200: #c3e0ea;
  --color-night-owl-300: #aaccd7;
  --color-night-owl-400: #89aebb;
  --color-night-owl-500: #6d94a1;
  --color-night-owl-600: #547a87;
  --color-night-owl-700: #3e616d;
  --color-night-owl-800: #2d4c57;
  --color-night-owl-900: #203a43;
  --color-night-owl-950: #11242b;
  --color-shallow-sea: #a2b5bf;
  --color-shallow-sea-50: #e3eff6;
  --color-shallow-sea-100: #d5e3ea;
  --color-shallow-sea-200: #becdd6;
  --color-shallow-sea-300: #a2b5bf;
  --color-shallow-sea-400: #8698a2;
  --color-shallow-sea-500: #6e8089;
  --color-shallow-sea-600: #576871;
  --color-shallow-sea-700: #44535b;
  --color-shallow-sea-800: #354349;
  --color-shallow-sea-900: #29353b;
  --color-shallow-sea-950: #182125;
  --color-diamond-white: #deeef5;
  --color-diamond-white-50: #eef7fa;
  --color-diamond-white-100: #deeef5;
  --color-diamond-white-200: #ced9df;
  --color-diamond-white-300: #b6c3c9;
  --color-diamond-white-400: #96a4aa;
  --color-diamond-white-500: #7a898f;
  --color-diamond-white-600: #616e74;
  --color-diamond-white-700: #4b585d;
  --color-diamond-white-800: #394449;
  --color-diamond-white-900: #2b3538;
  --color-diamond-white-950: #1a2023;
}