Polar Wind to Dark Knight Color Palette

About this palette

Polar Wind to Dark Knight is a 4-color cool, gradient palette: #BBE0EE (Polar Wind), #33A5D5 (Laguna), #39547B (St. Tropaz), #181728 (Dark Knight). It mixes blue, black tones and feels cool overall. The strongest text pairing is #BBE0EE on #181728 with a contrast ratio of 12.59:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Polar Wind	rgb(187, 224, 238)	hsl(196, 60%, 83%)
Laguna	rgb(51, 165, 213)	hsl(198, 66%, 52%)
St. Tropaz	rgb(57, 84, 123)	hsl(215, 37%, 35%)
Dark Knight	rgb(24, 23, 40)	hsl(244, 27%, 12%)

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.

Aa12.59:1 Super#BBE0EE on #181728
Aa12.59:1 Super#181728 on #BBE0EE
Aa6.28:1 Good#33A5D5 on #181728
Aa6.28:1 Good#181728 on #33A5D5
Aa5.50:1 Good#BBE0EE on #39547B
Aa5.50:1 Good#39547B on #BBE0EE

Color blindness preview

CSS variables

/* Polar Wind to Dark Knight — https://swatchly.xyz/palette/bbe0ee-33a5d5-39547b-181728 */
:root {
  --polar-wind: #bbe0ee;
  --laguna: #33a5d5;
  --st-tropaz: #39547b;
  --dark-knight: #181728;
}

Tailwind CSS v4

/* Polar Wind to Dark Knight — https://swatchly.xyz/palette/bbe0ee-33a5d5-39547b-181728 */
@theme {
  --color-polar-wind: #bbe0ee;
  --color-polar-wind-50: #eaf9ff;
  --color-polar-wind-100: #daf1f9;
  --color-polar-wind-200: #bbe0ee;
  --color-polar-wind-300: #a9c8d4;
  --color-polar-wind-400: #87a9b5;
  --color-polar-wind-500: #6a8d9a;
  --color-polar-wind-600: #51727e;
  --color-polar-wind-700: #3c5b66;
  --color-polar-wind-800: #2c4751;
  --color-polar-wind-900: #20373f;
  --color-polar-wind-950: #122228;
  --color-laguna: #33a5d5;
  --color-laguna-50: #e3f5ff;
  --color-laguna-100: #c9ecff;
  --color-laguna-200: #96dcff;
  --color-laguna-300: #6ac6f1;
  --color-laguna-400: #33a5d5;
  --color-laguna-500: #008ab9;
  --color-laguna-600: #007096;
  --color-laguna-700: #005978;
  --color-laguna-800: #004660;
  --color-laguna-900: #00374c;
  --color-laguna-950: #002332;
  --color-st-tropaz: #39547b;
  --color-st-tropaz-50: #eff6ff;
  --color-st-tropaz-100: #dfecff;
  --color-st-tropaz-200: #c1d9fb;
  --color-st-tropaz-300: #a7c2e9;
  --color-st-tropaz-400: #85a2cc;
  --color-st-tropaz-500: #6986b0;
  --color-st-tropaz-600: #506b93;
  --color-st-tropaz-700: #39547b;
  --color-st-tropaz-800: #2c4160;
  --color-st-tropaz-900: #20324c;
  --color-st-tropaz-950: #121f31;
  --color-dark-knight: #181728;
  --color-dark-knight-50: #f4f4ff;
  --color-dark-knight-100: #e9e9f9;
  --color-dark-knight-200: #d6d6e7;
  --color-dark-knight-300: #bfbfd3;
  --color-dark-knight-400: #9f9fb5;
  --color-dark-knight-500: #838298;
  --color-dark-knight-600: #67677c;
  --color-dark-knight-700: #505062;
  --color-dark-knight-800: #3c3c4c;
  --color-dark-knight-900: #2c2c39;
  --color-dark-knight-950: #181728;
}