Blizzard Blue to Black Stallion color palette

A2E2EDBlizzard Blue 7EC7CEWavelet 73A2A7Seaside 007684Waterworld 204C53Nocturnal Expedition 002023Black Stallion

Open in generator Export PNG, PDF, ASE…

About this palette

Blizzard Blue to Black Stallion is a 6-color cool, monochromatic, gradient palette: #A2E2ED (Blizzard Blue), #7EC7CE (Wavelet), #73A2A7 (Seaside), #007684 (Waterworld), #204C53 (Nocturnal Expedition), #002023 (Black Stallion). It mixes turquoise tones and feels cool overall. The strongest text pairing is #A2E2ED on #002023 with a contrast ratio of 11.89:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blizzard Blue	rgb(162, 226, 237)	hsl(189, 68%, 78%)
Wavelet	rgb(126, 199, 206)	hsl(185, 45%, 65%)
Seaside	rgb(115, 162, 167)	hsl(186, 23%, 55%)
Waterworld	rgb(0, 118, 132)	hsl(186, 100%, 26%)
Nocturnal Expedition	rgb(32, 76, 83)	hsl(188, 44%, 23%)
Black Stallion	rgb(0, 32, 35)	hsl(185, 100%, 7%)

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.

Aa11.89:1 Very good#A2E2ED on #002023
Aa11.89:1 Very good#002023 on #A2E2ED
Aa8.89:1 Very good#7EC7CE on #002023
Aa8.89:1 Very good#002023 on #7EC7CE
Aa6.59:1 Good#A2E2ED on #204C53
Aa6.59:1 Good#204C53 on #A2E2ED
Aa6.06:1 Good#73A2A7 on #002023
Aa6.06:1 Good#002023 on #73A2A7

Color blindness preview

CSS variables

/* Blizzard Blue to Black Stallion — https://swatchly.xyz/palette/a2e2ed-7ec7ce-73a2a7-007684-204c53-002023 */
:root {
  --blizzard-blue: #a2e2ed;
  --wavelet: #7ec7ce;
  --seaside: #73a2a7;
  --waterworld: #007684;
  --nocturnal-expedition: #204c53;
  --black-stallion: #002023;
}

Tailwind CSS v4

/* Blizzard Blue to Black Stallion — https://swatchly.xyz/palette/a2e2ed-7ec7ce-73a2a7-007684-204c53-002023 */
@theme {
  --color-blizzard-blue: #a2e2ed;
  --color-blizzard-blue-50: #ddfaff;
  --color-blizzard-blue-100: #caf2f9;
  --color-blizzard-blue-200: #a2e2ed;
  --color-blizzard-blue-300: #94cad3;
  --color-blizzard-blue-400: #70acb6;
  --color-blizzard-blue-500: #52909b;
  --color-blizzard-blue-600: #387680;
  --color-blizzard-blue-700: #245e67;
  --color-blizzard-blue-800: #164a52;
  --color-blizzard-blue-900: #0b3a40;
  --color-blizzard-blue-950: #042429;
  --color-wavelet: #7ec7ce;
  --color-wavelet-50: #d1fafe;
  --color-wavelet-100: #c1f0f4;
  --color-wavelet-200: #a5dce1;
  --color-wavelet-300: #7ec7ce;
  --color-wavelet-400: #62a8af;
  --color-wavelet-500: #458e95;
  --color-wavelet-600: #2b747b;
  --color-wavelet-700: #175e64;
  --color-wavelet-800: #074a50;
  --color-wavelet-900: #003b3f;
  --color-wavelet-950: #002528;
  --color-seaside: #73a2a7;
  --color-seaside-50: #dcf8fb;
  --color-seaside-100: #ceedf1;
  --color-seaside-200: #b4d9dd;
  --color-seaside-300: #98c2c6;
  --color-seaside-400: #73a2a7;
  --color-seaside-500: #5a888d;
  --color-seaside-600: #426f73;
  --color-seaside-700: #30595d;
  --color-seaside-800: #22464a;
  --color-seaside-900: #18373a;
  --color-seaside-950: #0c2326;
  --color-waterworld: #007684;
  --color-waterworld-50: #e1fbff;
  --color-waterworld-100: #c0f6ff;
  --color-waterworld-200: #a2e3ee;
  --color-waterworld-300: #81cdda;
  --color-waterworld-400: #56aebc;
  --color-waterworld-500: #3292a0;
  --color-waterworld-600: #007684;
  --color-waterworld-700: #005e69;
  --color-waterworld-800: #004953;
  --color-waterworld-900: #003940;
  --color-waterworld-950: #002329;
  --color-nocturnal-expedition: #204c53;
  --color-nocturnal-expedition-50: #e1fbff;
  --color-nocturnal-expedition-100: #d5f1f6;
  --color-nocturnal-expedition-200: #bddfe5;
  --color-nocturnal-expedition-300: #a3c9d0;
  --color-nocturnal-expedition-400: #80abb2;
  --color-nocturnal-expedition-500: #649098;
  --color-nocturnal-expedition-600: #4b767d;
  --color-nocturnal-expedition-700: #375f65;
  --color-nocturnal-expedition-800: #204c53;
  --color-nocturnal-expedition-900: #1b3a3f;
  --color-nocturnal-expedition-950: #0e2428;
  --color-black-stallion: #002023;
  --color-black-stallion-50: #e6fafb;
  --color-black-stallion-100: #daf0f2;
  --color-black-stallion-200: #c3dde0;
  --color-black-stallion-300: #aac7ca;
  --color-black-stallion-400: #88a9ac;
  --color-black-stallion-500: #6b8c90;
  --color-black-stallion-600: #517174;
  --color-black-stallion-700: #3c595b;
  --color-black-stallion-800: #2b4447;
  --color-black-stallion-900: #1e3335;
  --color-black-stallion-950: #002023;
}