Chill of the Night to Waikiki Color Palette

About this palette

Chill of the Night to Waikiki is a 5-color cool palette: #2A6B95 (Chill of the Night), #49A8CA (Mystic Blue), #343B66 (Storm Is Coming), #A4CDFF (Baby Blue), #008A9E (Waikiki). It mixes blue, purple, turquoise tones and feels cool overall. The strongest text pairing is #343B66 on #A4CDFF with a contrast ratio of 6.50:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chill of the Night	rgb(42, 107, 149)	hsl(204, 56%, 37%)
Mystic Blue	rgb(73, 168, 202)	hsl(196, 55%, 54%)
Storm Is Coming	rgb(52, 59, 102)	hsl(232, 32%, 30%)
Baby Blue	rgb(164, 205, 255)	hsl(213, 100%, 82%)
Waikiki	rgb(0, 138, 158)	hsl(188, 100%, 31%)

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.

Aa6.50:1 Good#343B66 on #A4CDFF
Aa6.50:1 Good#A4CDFF on #343B66
Aa3.94:1 Poor#49A8CA on #343B66
Aa3.94:1 Poor#343B66 on #49A8CA
Aa3.51:1 Poor#2A6B95 on #A4CDFF
Aa3.51:1 Poor#A4CDFF on #2A6B95

Color blindness preview

CSS variables

/* Chill of the Night to Waikiki — https://swatchly.xyz/palette/2a6b95-49a8ca-343b66-a4cdff-008a9e */
:root {
  --chill-of-the-night: #2a6b95;
  --mystic-blue: #49a8ca;
  --storm-is-coming: #343b66;
  --baby-blue: #a4cdff;
  --waikiki: #008a9e;
}

Tailwind CSS v4

/* Chill of the Night to Waikiki — https://swatchly.xyz/palette/2a6b95-49a8ca-343b66-a4cdff-008a9e */
@theme {
  --color-chill-of-the-night: #2a6b95;
  --color-chill-of-the-night-50: #ecf7ff;
  --color-chill-of-the-night-100: #d6edff;
  --color-chill-of-the-night-200: #acdcff;
  --color-chill-of-the-night-300: #8dc4ed;
  --color-chill-of-the-night-400: #66a4d0;
  --color-chill-of-the-night-500: #4787b3;
  --color-chill-of-the-night-600: #2a6b95;
  --color-chill-of-the-night-700: #1a5579;
  --color-chill-of-the-night-800: #0d4262;
  --color-chill-of-the-night-900: #05334e;
  --color-chill-of-the-night-950: #012033;
  --color-mystic-blue: #49a8ca;
  --color-mystic-blue-50: #e3f7ff;
  --color-mystic-blue-100: #c8efff;
  --color-mystic-blue-200: #9adef9;
  --color-mystic-blue-300: #79c8e6;
  --color-mystic-blue-400: #49a8ca;
  --color-mystic-blue-500: #298dae;
  --color-mystic-blue-600: #007392;
  --color-mystic-blue-700: #005b75;
  --color-mystic-blue-800: #00485c;
  --color-mystic-blue-900: #003849;
  --color-mystic-blue-950: #00232f;
  --color-storm-is-coming: #343b66;
  --color-storm-is-coming-50: #f2f5ff;
  --color-storm-is-coming-100: #e5eaff;
  --color-storm-is-coming-200: #ccd5fd;
  --color-storm-is-coming-300: #b4beea;
  --color-storm-is-coming-400: #939dcd;
  --color-storm-is-coming-500: #7781b1;
  --color-storm-is-coming-600: #5d6694;
  --color-storm-is-coming-700: #474f78;
  --color-storm-is-coming-800: #343b66;
  --color-storm-is-coming-900: #282e4b;
  --color-storm-is-coming-950: #181b31;
  --color-baby-blue: #a4cdff;
  --color-baby-blue-50: #f6faff;
  --color-baby-blue-100: #e8f2ff;
  --color-baby-blue-200: #c9e1ff;
  --color-baby-blue-300: #a4cdff;
  --color-baby-blue-400: #86abd9;
  --color-baby-blue-500: #688ebd;
  --color-baby-blue-600: #4d729f;
  --color-baby-blue-700: #385a82;
  --color-baby-blue-800: #274568;
  --color-baby-blue-900: #1b3451;
  --color-baby-blue-950: #0e2035;
  --color-waikiki: #008a9e;
  --color-waikiki-50: #ddf9ff;
  --color-waikiki-100: #b9f2ff;
  --color-waikiki-200: #93dff0;
  --color-waikiki-300: #6ec8db;
  --color-waikiki-400: #3da8bc;
  --color-waikiki-500: #008a9e;
  --color-waikiki-600: #006f80;
  --color-waikiki-700: #005966;
  --color-waikiki-800: #004651;
  --color-waikiki-900: #00363f;
  --color-waikiki-950: #002329;
}