Rich Black to Ginger Dough Color Palette

About this palette

Rich Black to Ginger Dough is a 5-color cool palette: #003B42 (Rich Black), #91B0FF (Kitten’s Eye), #FFF1E5 (Sugar Glaze), #006470 (Wakame Green), #B16A2F (Ginger Dough). It mixes turquoise, blue, white, orange tones and feels cool overall. The strongest text pairing is #003B42 on #FFF1E5 with a contrast ratio of 11.13:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rich Black	rgb(0, 59, 66)	hsl(186, 100%, 13%)
Kitten’s Eye	rgb(145, 176, 255)	hsl(223, 100%, 78%)
Sugar Glaze	rgb(255, 241, 229)	hsl(28, 100%, 95%)
Wakame Green	rgb(0, 100, 112)	hsl(186, 100%, 22%)
Ginger Dough	rgb(177, 106, 47)	hsl(27, 58%, 44%)

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.

Aa11.13:1 Very good#003B42 on #FFF1E5
Aa11.13:1 Very good#FFF1E5 on #003B42
Aa6.20:1 Good#FFF1E5 on #006470
Aa6.20:1 Good#006470 on #FFF1E5
Aa5.78:1 Good#003B42 on #91B0FF
Aa5.78:1 Good#91B0FF on #003B42
Aa3.81:1 Poor#FFF1E5 on #B16A2F
Aa3.81:1 Poor#B16A2F on #FFF1E5

Color blindness preview

CSS variables

/* Rich Black to Ginger Dough — https://swatchly.xyz/palette/003b42-91b0ff-fff1e5-006470-b16a2f */
:root {
  --rich-black: #003b42;
  --kitten-s-eye: #91b0ff;
  --sugar-glaze: #fff1e5;
  --wakame-green: #006470;
  --ginger-dough: #b16a2f;
}

Tailwind CSS v4

/* Rich Black to Ginger Dough — https://swatchly.xyz/palette/003b42-91b0ff-fff1e5-006470-b16a2f */
@theme {
  --color-rich-black: #003b42;
  --color-rich-black-50: #e0fbff;
  --color-rich-black-100: #d2f2f7;
  --color-rich-black-200: #b9e0e6;
  --color-rich-black-300: #9ecad1;
  --color-rich-black-400: #7aabb3;
  --color-rich-black-500: #5d9098;
  --color-rich-black-600: #44757d;
  --color-rich-black-700: #305e64;
  --color-rich-black-800: #214a50;
  --color-rich-black-900: #003b42;
  --color-rich-black-950: #0a2428;
  --color-kitten-s-eye: #91b0ff;
  --color-kitten-s-eye-50: #e6eeff;
  --color-kitten-s-eye-100: #d5e1ff;
  --color-kitten-s-eye-200: #b5cbff;
  --color-kitten-s-eye-300: #91b0ff;
  --color-kitten-s-eye-400: #7693de;
  --color-kitten-s-eye-500: #5e7ac4;
  --color-kitten-s-eye-600: #4861a7;
  --color-kitten-s-eye-700: #374d8c;
  --color-kitten-s-eye-800: #293c74;
  --color-kitten-s-eye-900: #1f2f5f;
  --color-kitten-s-eye-950: #111c3f;
  --color-sugar-glaze: #fff1e5;
  --color-sugar-glaze-50: #fff1e5;
  --color-sugar-glaze-100: #f1e8e1;
  --color-sugar-glaze-200: #dfd5cc;
  --color-sugar-glaze-300: #c9beb4;
  --color-sugar-glaze-400: #ab9f94;
  --color-sugar-glaze-500: #908379;
  --color-sugar-glaze-600: #75695f;
  --color-sugar-glaze-700: #5e534a;
  --color-sugar-glaze-800: #4a4038;
  --color-sugar-glaze-900: #39312a;
  --color-sugar-glaze-950: #241e19;
  --color-wakame-green: #006470;
  --color-wakame-green-50: #e1fbff;
  --color-wakame-green-100: #c6f5fd;
  --color-wakame-green-200: #abe3ed;
  --color-wakame-green-300: #8ecfda;
  --color-wakame-green-400: #66b1bd;
  --color-wakame-green-500: #4796a2;
  --color-wakame-green-600: #2a7b87;
  --color-wakame-green-700: #006470;
  --color-wakame-green-800: #004e58;
  --color-wakame-green-900: #003c44;
  --color-wakame-green-950: #00262b;
  --color-ginger-dough: #b16a2f;
  --color-ginger-dough-50: #fff1e6;
  --color-ginger-dough-100: #ffe2cd;
  --color-ginger-dough-200: #ffc59b;
  --color-ginger-dough-300: #edaa79;
  --color-ginger-dough-400: #cf8750;
  --color-ginger-dough-500: #b16a2f;
  --color-ginger-dough-600: #945214;
  --color-ginger-dough-700: #7a3e00;
  --color-ginger-dough-800: #603000;
  --color-ginger-dough-900: #4c2500;
  --color-ginger-dough-950: #321600;
}