Corbeau to Blue Lips Color Palette

About this palette

Corbeau to Blue Lips is a 5-color cool, monochromatic, gradient palette: #0D1623 (Corbeau), #2B3F5F (Nautilus), #5B71AA (Twinkle Night), #71A5EB (Windjammer), #A3BDE4 (Blue Lips). It mixes black, blue tones and feels cool overall. The strongest text pairing is #0D1623 on #A3BDE4 with a contrast ratio of 9.48:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Corbeau	rgb(13, 22, 35)	hsl(215, 46%, 9%)
Nautilus	rgb(43, 63, 95)	hsl(217, 38%, 27%)
Twinkle Night	rgb(91, 113, 170)	hsl(223, 32%, 51%)
Windjammer	rgb(113, 165, 235)	hsl(214, 75%, 68%)
Blue Lips	rgb(163, 189, 228)	hsl(216, 55%, 77%)

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.

Aa9.48:1 Very good#0D1623 on #A3BDE4
Aa9.48:1 Very good#A3BDE4 on #0D1623
Aa7.17:1 Very good#0D1623 on #71A5EB
Aa7.17:1 Very good#71A5EB on #0D1623
Aa5.54:1 Good#2B3F5F on #A3BDE4
Aa5.54:1 Good#A3BDE4 on #2B3F5F
Aa4.19:1 Poor#2B3F5F on #71A5EB
Aa4.19:1 Poor#71A5EB on #2B3F5F

Color blindness preview

CSS variables

/* Corbeau to Blue Lips — https://swatchly.xyz/palette/0d1623-2b3f5f-5b71aa-71a5eb-a3bde4 */
:root {
  --corbeau: #0d1623;
  --nautilus: #2b3f5f;
  --twinkle-night: #5b71aa;
  --windjammer: #71a5eb;
  --blue-lips: #a3bde4;
}

Tailwind CSS v4

/* Corbeau to Blue Lips — https://swatchly.xyz/palette/0d1623-2b3f5f-5b71aa-71a5eb-a3bde4 */
@theme {
  --color-corbeau: #0d1623;
  --color-corbeau-50: #eff6ff;
  --color-corbeau-100: #e4ecf8;
  --color-corbeau-200: #cfd8e6;
  --color-corbeau-300: #b7c2d2;
  --color-corbeau-400: #97a2b4;
  --color-corbeau-500: #798596;
  --color-corbeau-600: #5e6979;
  --color-corbeau-700: #46505e;
  --color-corbeau-800: #333c48;
  --color-corbeau-900: #242b34;
  --color-corbeau-950: #0d1623;
  --color-nautilus: #2b3f5f;
  --color-nautilus-50: #f0f6ff;
  --color-nautilus-100: #e0ecff;
  --color-nautilus-200: #c6d9f6;
  --color-nautilus-300: #acc2e3;
  --color-nautilus-400: #8ba1c5;
  --color-nautilus-500: #6e85a9;
  --color-nautilus-600: #556a8c;
  --color-nautilus-700: #405371;
  --color-nautilus-800: #2b3f5f;
  --color-nautilus-900: #233046;
  --color-nautilus-950: #141d2d;
  --color-twinkle-night: #5b71aa;
  --color-twinkle-night-50: #f1f5ff;
  --color-twinkle-night-100: #e5edff;
  --color-twinkle-night-200: #cadaff;
  --color-twinkle-night-300: #afc4f8;
  --color-twinkle-night-400: #8ea5df;
  --color-twinkle-night-500: #748bc5;
  --color-twinkle-night-600: #5b71aa;
  --color-twinkle-night-700: #45598d;
  --color-twinkle-night-800: #344572;
  --color-twinkle-night-900: #26345b;
  --color-twinkle-night-950: #16203c;
  --color-windjammer: #71a5eb;
  --color-windjammer-50: #f0f6ff;
  --color-windjammer-100: #e0edff;
  --color-windjammer-200: #c0dbff;
  --color-windjammer-300: #9ac5ff;
  --color-windjammer-400: #71a5eb;
  --color-windjammer-500: #5689cd;
  --color-windjammer-600: #3d6dae;
  --color-windjammer-700: #295691;
  --color-windjammer-800: #1b4276;
  --color-windjammer-900: #11335e;
  --color-windjammer-950: #071f3e;
  --color-blue-lips: #a3bde4;
  --color-blue-lips-50: #ebf3ff;
  --color-blue-lips-100: #dae9ff;
  --color-blue-lips-200: #c0d4f3;
  --color-blue-lips-300: #a3bde4;
  --color-blue-lips-400: #869ec3;
  --color-blue-lips-500: #6c84a8;
  --color-blue-lips-600: #536a8d;
  --color-blue-lips-700: #405474;
  --color-blue-lips-800: #30425d;
  --color-blue-lips-900: #24334a;
  --color-blue-lips-950: #152030;
}