Rich Black to On Cloud Nine Color Palette

About this palette

Rich Black to On Cloud Nine is a 5-color cool, vintage palette: #023F43 (Rich Black), #875A52 (Wild West), #89C3CE (Cerulean Skies), #C47C79 (Old Rose), #C2E6E8 (On Cloud Nine). It mixes turquoise, red tones and feels cool overall. The strongest text pairing is #023F43 on #C2E6E8 with a contrast ratio of 8.79:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rich Black	rgb(2, 63, 67)	hsl(184, 94%, 14%)
Wild West	rgb(135, 90, 82)	hsl(9, 24%, 43%)
Cerulean Skies	rgb(137, 195, 206)	hsl(190, 41%, 67%)
Old Rose	rgb(196, 124, 121)	hsl(2, 39%, 62%)
On Cloud Nine	rgb(194, 230, 232)	hsl(183, 45%, 84%)

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.

Aa8.79:1 Very good#023F43 on #C2E6E8
Aa8.79:1 Very good#C2E6E8 on #023F43
Aa6.00:1 Good#023F43 on #89C3CE
Aa6.00:1 Good#89C3CE on #023F43
Aa4.37:1 Poor#875A52 on #C2E6E8
Aa4.37:1 Poor#C2E6E8 on #875A52
Aa3.63:1 Poor#023F43 on #C47C79
Aa3.63:1 Poor#C47C79 on #023F43

Color blindness preview

CSS variables

/* Rich Black to On Cloud Nine — https://swatchly.xyz/palette/023f43-875a52-89c3ce-c47c79-c2e6e8 */
:root {
  --rich-black: #023f43;
  --wild-west: #875a52;
  --cerulean-skies: #89c3ce;
  --old-rose: #c47c79;
  --on-cloud-nine: #c2e6e8;
}

Tailwind CSS v4

/* Rich Black to On Cloud Nine — https://swatchly.xyz/palette/023f43-875a52-89c3ce-c47c79-c2e6e8 */
@theme {
  --color-rich-black: #023f43;
  --color-rich-black-50: #defcfe;
  --color-rich-black-100: #d1f3f5;
  --color-rich-black-200: #b9e0e3;
  --color-rich-black-300: #9dcbce;
  --color-rich-black-400: #7aadb1;
  --color-rich-black-500: #5e9296;
  --color-rich-black-600: #45787c;
  --color-rich-black-700: #316165;
  --color-rich-black-800: #224d51;
  --color-rich-black-900: #023f43;
  --color-rich-black-950: #0b2729;
  --color-wild-west: #875a52;
  --color-wild-west-50: #fff2ef;
  --color-wild-west-100: #ffe3de;
  --color-wild-west-200: #f3cbc4;
  --color-wild-west-300: #dfb2aa;
  --color-wild-west-400: #c09188;
  --color-wild-west-500: #a4756c;
  --color-wild-west-600: #875a52;
  --color-wild-west-700: #6d463f;
  --color-wild-west-800: #57352f;
  --color-wild-west-900: #452823;
  --color-wild-west-950: #2c1814;
  --color-cerulean-skies: #89c3ce;
  --color-cerulean-skies-50: #d6f7fe;
  --color-cerulean-skies-100: #c7edf4;
  --color-cerulean-skies-200: #acd9e2;
  --color-cerulean-skies-300: #89c3ce;
  --color-cerulean-skies-400: #6da5af;
  --color-cerulean-skies-500: #528b95;
  --color-cerulean-skies-600: #3a717b;
  --color-cerulean-skies-700: #285b64;
  --color-cerulean-skies-800: #1a4850;
  --color-cerulean-skies-900: #113940;
  --color-cerulean-skies-950: #062429;
  --color-old-rose: #c47c79;
  --color-old-rose-50: #fff5f4;
  --color-old-rose-100: #ffeae9;
  --color-old-rose-200: #ffd2cf;
  --color-old-rose-300: #f6b7b4;
  --color-old-rose-400: #dd9794;
  --color-old-rose-500: #c47c79;
  --color-old-rose-600: #a45f5d;
  --color-old-rose-700: #874846;
  --color-old-rose-800: #6c3534;
  --color-old-rose-900: #552626;
  --color-old-rose-950: #361515;
  --color-on-cloud-nine: #c2e6e8;
  --color-on-cloud-nine-50: #ebfeff;
  --color-on-cloud-nine-100: #e1f5f7;
  --color-on-cloud-nine-200: #c2e6e8;
  --color-on-cloud-nine-300: #b0cdce;
  --color-on-cloud-nine-400: #8cadaf;
  --color-on-cloud-nine-500: #6f9092;
  --color-on-cloud-nine-600: #547576;
  --color-on-cloud-nine-700: #3f5c5e;
  --color-on-cloud-nine-800: #2e4849;
  --color-on-cloud-nine-900: #213739;
  --color-on-cloud-nine-950: #132223;
}