Corbeau to Copacabana Color Palette

About this palette

Corbeau to Copacabana is a 4-color dark, cool, gradient palette: #160C28 (Corbeau), #361D44 (Midnight Velvet), #494051 (Madonna), #006A8C (Copacabana). It mixes black, purple, gray, blue tones and feels cool overall. The strongest text pairing is #160C28 on #006A8C with a contrast ratio of 3.08:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Corbeau	rgb(22, 12, 40)	hsl(261, 54%, 10%)
Midnight Velvet	rgb(54, 29, 68)	hsl(278, 40%, 19%)
Madonna	rgb(73, 64, 81)	hsl(272, 12%, 28%)
Copacabana	rgb(0, 106, 140)	hsl(195, 100%, 27%)

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.

Aa3.08:1 Poor#160C28 on #006A8C
Aa3.08:1 Poor#006A8C on #160C28

Color blindness preview

CSS variables

/* Corbeau to Copacabana — https://swatchly.xyz/palette/160c28-361d44-494051-006a8c */
:root {
  --corbeau: #160c28;
  --midnight-velvet: #361d44;
  --madonna: #494051;
  --copacabana: #006a8c;
}

Tailwind CSS v4

/* Corbeau to Copacabana — https://swatchly.xyz/palette/160c28-361d44-494051-006a8c */
@theme {
  --color-corbeau: #160c28;
  --color-corbeau-50: #f6f3ff;
  --color-corbeau-100: #ede7ff;
  --color-corbeau-200: #dad2f0;
  --color-corbeau-300: #c4bbdc;
  --color-corbeau-400: #a59bbf;
  --color-corbeau-500: #877da1;
  --color-corbeau-600: #6a6082;
  --color-corbeau-700: #514866;
  --color-corbeau-800: #3b344d;
  --color-corbeau-900: #292437;
  --color-corbeau-950: #160c28;
  --color-midnight-velvet: #361d44;
  --color-midnight-velvet-50: #faf2ff;
  --color-midnight-velvet-100: #f4e4ff;
  --color-midnight-velvet-200: #e4cef3;
  --color-midnight-velvet-300: #cfb6df;
  --color-midnight-velvet-400: #af93c1;
  --color-midnight-velvet-500: #9276a3;
  --color-midnight-velvet-600: #755a85;
  --color-midnight-velvet-700: #5b4469;
  --color-midnight-velvet-800: #453151;
  --color-midnight-velvet-900: #361d44;
  --color-midnight-velvet-950: #1e1324;
  --color-madonna: #494051;
  --color-madonna-50: #f8f2fe;
  --color-madonna-100: #efe8f5;
  --color-madonna-200: #dcd4e3;
  --color-madonna-300: #c6bdce;
  --color-madonna-400: #a79eb1;
  --color-madonna-500: #8d8396;
  --color-madonna-600: #72697b;
  --color-madonna-700: #5c5363;
  --color-madonna-800: #494051;
  --color-madonna-900: #38313e;
  --color-madonna-950: #231e27;
  --color-copacabana: #006a8c;
  --color-copacabana-50: #e9f8ff;
  --color-copacabana-100: #ceefff;
  --color-copacabana-200: #a0ddfa;
  --color-copacabana-300: #7fc6e6;
  --color-copacabana-400: #54a5c8;
  --color-copacabana-500: #3187aa;
  --color-copacabana-600: #006a8c;
  --color-copacabana-700: #005470;
  --color-copacabana-800: #004258;
  --color-copacabana-900: #003345;
  --color-copacabana-950: #00202d;
}