Start generating

Stormy Night to Glacial Drift color palette

3E235CStormy Night00615BMosqueA86C38EagleDC8B00Fleur de Sel CaramelDDACFFTestosteroseC3F9EDGlacial Drift
Open in generator Export PNG, PDF, ASE…

About this palette

Stormy Night to Glacial Drift is a 6-color cool palette: #3E235C (Stormy Night), #00615B (Mosque), #A86C38 (Eagle), #DC8B00 (Fleur de Sel Caramel), #DDACFF (Testosterose), #C3F9ED (Glacial Drift). It mixes purple, turquoise, orange, white tones and feels cool overall. The strongest text pairing is #3E235C on #C3F9ED with a contrast ratio of 11.31:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Stormy Nightrgb(62, 35, 92)hsl(268, 45%, 25%)
Mosquergb(0, 97, 91)hsl(176, 100%, 19%)
Eaglergb(168, 108, 56)hsl(28, 50%, 44%)
Fleur de Sel Caramelrgb(220, 139, 0)hsl(38, 100%, 43%)
Testosterosergb(221, 172, 255)hsl(275, 100%, 84%)
Glacial Driftrgb(195, 249, 237)hsl(167, 82%, 87%)

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.31:1 Very good#3E235C on #C3F9ED
  • Aa11.31:1 Very good#C3F9ED on #3E235C
  • Aa7.14:1 Very good#3E235C on #DDACFF
  • Aa7.14:1 Very good#DDACFF on #3E235C
  • Aa6.32:1 Good#00615B on #C3F9ED
  • Aa6.32:1 Good#C3F9ED on #00615B
  • Aa4.84:1 Good#3E235C on #DC8B00
  • Aa4.84:1 Good#DC8B00 on #3E235C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Stormy Night to Glacial Drift — https://swatchly.xyz/palette/3e235c-00615b-a86c38-dc8b00-ddacff-c3f9ed */
:root {
  --stormy-night: #3e235c;
  --mosque: #00615b;
  --eagle: #a86c38;
  --fleur-de-sel-caramel: #dc8b00;
  --testosterose: #ddacff;
  --glacial-drift: #c3f9ed;
}

Tailwind CSS v4

/* Stormy Night to Glacial Drift — https://swatchly.xyz/palette/3e235c-00615b-a86c38-dc8b00-ddacff-c3f9ed */
@theme {
  --color-stormy-night: #3e235c;
  --color-stormy-night-50: #f7f3ff;
  --color-stormy-night-100: #f0e6ff;
  --color-stormy-night-200: #e1cdff;
  --color-stormy-night-300: #ccb4ef;
  --color-stormy-night-400: #ae93d3;
  --color-stormy-night-500: #9277b8;
  --color-stormy-night-600: #785d9a;
  --color-stormy-night-700: #60487f;
  --color-stormy-night-800: #4c3667;
  --color-stormy-night-900: #3e235c;
  --color-stormy-night-950: #251836;
  --color-mosque: #00615b;
  --color-mosque-50: #d6fffa;
  --color-mosque-100: #c8f6f1;
  --color-mosque-200: #ace4de;
  --color-mosque-300: #8ecfc8;
  --color-mosque-400: #67b0a9;
  --color-mosque-500: #47948d;
  --color-mosque-600: #2a7872;
  --color-mosque-700: #00615b;
  --color-mosque-800: #024c47;
  --color-mosque-900: #003b37;
  --color-mosque-950: #002522;
  --color-eagle: #a86c38;
  --color-eagle-50: #fff0e5;
  --color-eagle-100: #ffe1ca;
  --color-eagle-200: #f9c69e;
  --color-eagle-300: #e5ac7e;
  --color-eagle-400: #c68957;
  --color-eagle-500: #a86c38;
  --color-eagle-600: #8c5421;
  --color-eagle-700: #73410f;
  --color-eagle-800: #5d3103;
  --color-eagle-900: #4a2500;
  --color-eagle-950: #301600;
  --color-fleur-de-sel-caramel: #dc8b00;
  --color-fleur-de-sel-caramel-50: #fff2e5;
  --color-fleur-de-sel-caramel-100: #ffe5ca;
  --color-fleur-de-sel-caramel-200: #ffcc92;
  --color-fleur-de-sel-caramel-300: #f6af58;
  --color-fleur-de-sel-caramel-400: #dc8b00;
  --color-fleur-de-sel-caramel-500: #b87300;
  --color-fleur-de-sel-caramel-600: #955c00;
  --color-fleur-de-sel-caramel-700: #774900;
  --color-fleur-de-sel-caramel-800: #5e3800;
  --color-fleur-de-sel-caramel-900: #492b00;
  --color-fleur-de-sel-caramel-950: #2f1a00;
  --color-testosterose: #ddacff;
  --color-testosterose-50: #faf3ff;
  --color-testosterose-100: #f4e7ff;
  --color-testosterose-200: #eaccff;
  --color-testosterose-300: #ddacff;
  --color-testosterose-400: #bb8eda;
  --color-testosterose-500: #9f71bf;
  --color-testosterose-600: #8356a1;
  --color-testosterose-700: #6a4185;
  --color-testosterose-800: #54306b;
  --color-testosterose-900: #422255;
  --color-testosterose-950: #2a1338;
  --color-glacial-drift: #c3f9ed;
  --color-glacial-drift-50: #e0fdf6;
  --color-glacial-drift-100: #c3f9ed;
  --color-glacial-drift-200: #bbe2d9;
  --color-glacial-drift-300: #a0ccc2;
  --color-glacial-drift-400: #7cada3;
  --color-glacial-drift-500: #5f9287;
  --color-glacial-drift-600: #45776d;
  --color-glacial-drift-700: #315f56;
  --color-glacial-drift-800: #224b43;
  --color-glacial-drift-900: #173a34;
  --color-glacial-drift-950: #0b2420;
}

Similar palettes