Corbeau to Peacock Pride Color Palette

About this palette

Corbeau to Peacock Pride is a 4-color dark, cool, gradient palette: #170C26 (Corbeau), #240E4A (Your Darkness), #283C48 (Depths of the Nile), #006760 (Peacock Pride). It mixes black, purple, gray, turquoise tones and feels cool overall. The strongest text pairing is #170C26 on #006760 with a contrast ratio of 2.78:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Corbeau	rgb(23, 12, 38)	hsl(265, 52%, 10%)
Your Darkness	rgb(36, 14, 74)	hsl(262, 68%, 17%)
Depths of the Nile	rgb(40, 60, 72)	hsl(202, 29%, 22%)
Peacock Pride	rgb(0, 103, 96)	hsl(176, 100%, 20%)

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.

Color blindness preview

CSS variables

/* Corbeau to Peacock Pride — https://swatchly.xyz/palette/170c26-240e4a-283c48-006760 */
:root {
  --corbeau: #170c26;
  --your-darkness: #240e4a;
  --depths-of-the-nile: #283c48;
  --peacock-pride: #006760;
}

Tailwind CSS v4

/* Corbeau to Peacock Pride — https://swatchly.xyz/palette/170c26-240e4a-283c48-006760 */
@theme {
  --color-corbeau: #170c26;
  --color-corbeau-50: #f7f3ff;
  --color-corbeau-100: #eee7fe;
  --color-corbeau-200: #dbd2ee;
  --color-corbeau-300: #c5bbda;
  --color-corbeau-400: #a69bbc;
  --color-corbeau-500: #887d9e;
  --color-corbeau-600: #6b6080;
  --color-corbeau-700: #524864;
  --color-corbeau-800: #3c344b;
  --color-corbeau-900: #2a2436;
  --color-corbeau-950: #170c26;
  --color-your-darkness: #240e4a;
  --color-your-darkness-50: #f5f3ff;
  --color-your-darkness-100: #ece8ff;
  --color-your-darkness-200: #d9d0ff;
  --color-your-darkness-300: #c3b6f5;
  --color-your-darkness-400: #a595da;
  --color-your-darkness-500: #8979be;
  --color-your-darkness-600: #6f5fa1;
  --color-your-darkness-700: #594985;
  --color-your-darkness-800: #45386c;
  --color-your-darkness-900: #352a56;
  --color-your-darkness-950: #240e4a;
  --color-depths-of-the-nile: #283c48;
  --color-depths-of-the-nile-50: #ebf7ff;
  --color-depths-of-the-nile-100: #dfeef7;
  --color-depths-of-the-nile-200: #c9dae6;
  --color-depths-of-the-nile-300: #b0c4d1;
  --color-depths-of-the-nile-400: #90a6b4;
  --color-depths-of-the-nile-500: #768c9a;
  --color-depths-of-the-nile-600: #5d7380;
  --color-depths-of-the-nile-700: #495d69;
  --color-depths-of-the-nile-800: #394b55;
  --color-depths-of-the-nile-900: #283c48;
  --color-depths-of-the-nile-950: #1a262d;
  --color-peacock-pride: #006760;
  --color-peacock-pride-50: #d6fffa;
  --color-peacock-pride-100: #c6f7f0;
  --color-peacock-pride-200: #ace6de;
  --color-peacock-pride-300: #8ed1c9;
  --color-peacock-pride-400: #67b3ab;
  --color-peacock-pride-500: #479990;
  --color-peacock-pride-600: #2a7e76;
  --color-peacock-pride-700: #006760;
  --color-peacock-pride-800: #00514b;
  --color-peacock-pride-900: #003e3a;
  --color-peacock-pride-950: #002724;
}