Blue Mana to Cabaret Color Palette

About this palette

Blue Mana to Cabaret is a 5-color cool palette: #62C4FF (Blue Mana), #DCF6D0 (Green Glint), #004E7A (Sea Paint), #161B00 (Nightmare), #CB536B (Cabaret). It mixes blue, white, green, red tones and feels cool overall. The strongest text pairing is #DCF6D0 on #161B00 with a contrast ratio of 15.23:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blue Mana	rgb(98, 196, 255)	hsl(203, 100%, 69%)
Green Glint	rgb(220, 246, 208)	hsl(101, 68%, 89%)
Sea Paint	rgb(0, 78, 122)	hsl(202, 100%, 24%)
Nightmare	rgb(22, 27, 0)	hsl(71, 100%, 5%)
Cabaret	rgb(203, 83, 107)	hsl(348, 54%, 56%)

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.

Aa15.23:1 Super#DCF6D0 on #161B00
Aa15.23:1 Super#161B00 on #DCF6D0
Aa9.12:1 Very good#62C4FF on #161B00
Aa9.12:1 Very good#161B00 on #62C4FF
Aa7.65:1 Very good#DCF6D0 on #004E7A
Aa7.65:1 Very good#004E7A on #DCF6D0
Aa4.58:1 Good#62C4FF on #004E7A
Aa4.58:1 Good#004E7A on #62C4FF

Color blindness preview

CSS variables

/* Blue Mana to Cabaret — https://swatchly.xyz/palette/62c4ff-dcf6d0-004e7a-161b00-cb536b */
:root {
  --blue-mana: #62c4ff;
  --green-glint: #dcf6d0;
  --sea-paint: #004e7a;
  --nightmare: #161b00;
  --cabaret: #cb536b;
}

Tailwind CSS v4

/* Blue Mana to Cabaret — https://swatchly.xyz/palette/62c4ff-dcf6d0-004e7a-161b00-cb536b */
@theme {
  --color-blue-mana: #62c4ff;
  --color-blue-mana-50: #e3f4ff;
  --color-blue-mana-100: #cceaff;
  --color-blue-mana-200: #9fd9ff;
  --color-blue-mana-300: #62c4ff;
  --color-blue-mana-400: #45a5dd;
  --color-blue-mana-500: #1d8ac2;
  --color-blue-mana-600: #0070a1;
  --color-blue-mana-700: #005982;
  --color-blue-mana-800: #004768;
  --color-blue-mana-900: #003752;
  --color-blue-mana-950: #002235;
  --color-green-glint: #dcf6d0;
  --color-green-glint-50: #edfbe7;
  --color-green-glint-100: #dcf6d0;
  --color-green-glint-200: #cddfc4;
  --color-green-glint-300: #b4c9aa;
  --color-green-glint-400: #93aa88;
  --color-green-glint-500: #778f6c;
  --color-green-glint-600: #5e7453;
  --color-green-glint-700: #485c3e;
  --color-green-glint-800: #37482e;
  --color-green-glint-900: #293822;
  --color-green-glint-950: #182313;
  --color-sea-paint: #004e7a;
  --color-sea-paint-50: #edf7ff;
  --color-sea-paint-100: #daeeff;
  --color-sea-paint-200: #b4ddff;
  --color-sea-paint-300: #93c9f4;
  --color-sea-paint-400: #6eabdb;
  --color-sea-paint-500: #5191c1;
  --color-sea-paint-600: #3777a5;
  --color-sea-paint-700: #23618b;
  --color-sea-paint-800: #004e7a;
  --color-sea-paint-900: #083c5d;
  --color-sea-paint-950: #02263e;
  --color-nightmare: #161b00;
  --color-nightmare-50: #f3f8e4;
  --color-nightmare-100: #e9eed8;
  --color-nightmare-200: #d5dbc1;
  --color-nightmare-300: #bec5a7;
  --color-nightmare-400: #9ea685;
  --color-nightmare-500: #818968;
  --color-nightmare-600: #666d4d;
  --color-nightmare-700: #4e5538;
  --color-nightmare-800: #3b4028;
  --color-nightmare-900: #2b2f1b;
  --color-nightmare-950: #161b00;
  --color-cabaret: #cb536b;
  --color-cabaret-50: #fff0f1;
  --color-cabaret-100: #ffe1e4;
  --color-cabaret-200: #ffc2ca;
  --color-cabaret-300: #ff9dab;
  --color-cabaret-400: #e97287;
  --color-cabaret-500: #cb536b;
  --color-cabaret-600: #ac3953;
  --color-cabaret-700: #8e253f;
  --color-cabaret-800: #741730;
  --color-cabaret-900: #5d0c23;
  --color-cabaret-950: #3e0415;
}