Start generating

Winter Wizard to Nocturnal Expedition color palette

95E1FFWinter Wizard62A6BDSurgical00ADD9Gummy Dolphins0088B9Mermaid Dreams00657DHarem Silk00475DNocturnal Expedition
Open in generator Export PNG, PDF, ASE…

About this palette

Winter Wizard to Nocturnal Expedition is a 6-color cool, monochromatic palette: #95E1FF (Winter Wizard), #62A6BD (Surgical), #00ADD9 (Gummy Dolphins), #0088B9 (Mermaid Dreams), #00657D (Harem Silk), #00475D (Nocturnal Expedition). It mixes blue tones and feels cool overall. The strongest text pairing is #95E1FF on #00475D with a contrast ratio of 7.04:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Winter Wizardrgb(149, 225, 255)hsl(197, 100%, 79%)
Surgicalrgb(98, 166, 189)hsl(195, 41%, 56%)
Gummy Dolphinsrgb(0, 173, 217)hsl(192, 100%, 43%)
Mermaid Dreamsrgb(0, 136, 185)hsl(196, 100%, 36%)
Harem Silkrgb(0, 101, 125)hsl(192, 100%, 25%)
Nocturnal Expeditionrgb(0, 71, 93)hsl(194, 100%, 18%)

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.

  • Aa7.04:1 Very good#95E1FF on #00475D
  • Aa7.04:1 Very good#00475D on #95E1FF
  • Aa4.59:1 Good#95E1FF on #00657D
  • Aa4.59:1 Good#00657D on #95E1FF
  • Aa3.87:1 Poor#00ADD9 on #00475D
  • Aa3.87:1 Poor#00475D on #00ADD9
  • Aa3.74:1 Poor#62A6BD on #00475D
  • Aa3.74:1 Poor#00475D on #62A6BD

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Winter Wizard to Nocturnal Expedition — https://swatchly.xyz/palette/95e1ff-62a6bd-00add9-0088b9-00657d-00475d */
:root {
  --winter-wizard: #95e1ff;
  --surgical: #62a6bd;
  --gummy-dolphins: #00add9;
  --mermaid-dreams: #0088b9;
  --harem-silk: #00657d;
  --nocturnal-expedition: #00475d;
}

Tailwind CSS v4

/* Winter Wizard to Nocturnal Expedition — https://swatchly.xyz/palette/95e1ff-62a6bd-00add9-0088b9-00657d-00475d */
@theme {
  --color-winter-wizard: #95e1ff;
  --color-winter-wizard-50: #e3f7ff;
  --color-winter-wizard-100: #caf0ff;
  --color-winter-wizard-200: #95e1ff;
  --color-winter-wizard-300: #89c9e3;
  --color-winter-wizard-400: #63abc6;
  --color-winter-wizard-500: #4490ab;
  --color-winter-wizard-600: #28758f;
  --color-winter-wizard-700: #115e76;
  --color-winter-wizard-800: #004a5f;
  --color-winter-wizard-900: #00394a;
  --color-winter-wizard-950: #00232f;
  --color-surgical: #62a6bd;
  --color-surgical-50: #e1f7ff;
  --color-surgical-100: #c5f0ff;
  --color-surgical-200: #a9dcef;
  --color-surgical-300: #8bc6da;
  --color-surgical-400: #62a6bd;
  --color-surgical-500: #478ba2;
  --color-surgical-600: #2e7186;
  --color-surgical-700: #1a5b6e;
  --color-surgical-800: #0c4858;
  --color-surgical-900: #033846;
  --color-surgical-950: #00242e;
  --color-gummy-dolphins: #00add9;
  --color-gummy-dolphins-50: #e4f7ff;
  --color-gummy-dolphins-100: #caf0ff;
  --color-gummy-dolphins-200: #93e1ff;
  --color-gummy-dolphins-300: #5eccf4;
  --color-gummy-dolphins-400: #00add9;
  --color-gummy-dolphins-500: #0090b5;
  --color-gummy-dolphins-600: #007493;
  --color-gummy-dolphins-700: #005c75;
  --color-gummy-dolphins-800: #00485d;
  --color-gummy-dolphins-900: #003849;
  --color-gummy-dolphins-950: #00242f;
  --color-mermaid-dreams: #0088b9;
  --color-mermaid-dreams-50: #e7f6ff;
  --color-mermaid-dreams-100: #ceedff;
  --color-mermaid-dreams-200: #9ddcff;
  --color-mermaid-dreams-300: #6ec6f4;
  --color-mermaid-dreams-400: #3da5d7;
  --color-mermaid-dreams-500: #0088b9;
  --color-mermaid-dreams-600: #006d96;
  --color-mermaid-dreams-700: #005778;
  --color-mermaid-dreams-800: #00445f;
  --color-mermaid-dreams-900: #00354b;
  --color-mermaid-dreams-950: #002131;
  --color-harem-silk: #00657d;
  --color-harem-silk-50: #e7f9ff;
  --color-harem-silk-100: #cef2ff;
  --color-harem-silk-200: #aae3f7;
  --color-harem-silk-300: #8dcee5;
  --color-harem-silk-400: #66b1c9;
  --color-harem-silk-500: #4696af;
  --color-harem-silk-600: #297b94;
  --color-harem-silk-700: #00657d;
  --color-harem-silk-800: #004f62;
  --color-harem-silk-900: #003d4d;
  --color-harem-silk-950: #002631;
  --color-nocturnal-expedition: #00475d;
  --color-nocturnal-expedition-50: #e9f8ff;
  --color-nocturnal-expedition-100: #d2f1ff;
  --color-nocturnal-expedition-200: #b3dff3;
  --color-nocturnal-expedition-300: #97c9df;
  --color-nocturnal-expedition-400: #71aac2;
  --color-nocturnal-expedition-500: #538ea6;
  --color-nocturnal-expedition-600: #397289;
  --color-nocturnal-expedition-700: #255a6f;
  --color-nocturnal-expedition-800: #00475d;
  --color-nocturnal-expedition-900: #0c3645;
  --color-nocturnal-expedition-950: #04212c;
}

Similar palettes