Alpine Expedition to Cold and Dark color palette

AAF1FFAlpine Expedition F19D41Nuclear Mango 7481E8Pan Purple 8D4A00Otterly Brown 00414ECold and Dark

Open in generator Export PNG, PDF, ASE…

About this palette

Alpine Expedition to Cold and Dark is a 5-color cool palette: #AAF1FF (Alpine Expedition), #F19D41 (Nuclear Mango), #7481E8 (Pan Purple), #8D4A00 (Otterly Brown), #00414E (Cold and Dark). It mixes turquoise, orange, purple, brown, blue tones and feels cool overall. The strongest text pairing is #AAF1FF on #00414E with a contrast ratio of 8.97:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Alpine Expedition	rgb(170, 241, 255)	hsl(190, 100%, 83%)
Nuclear Mango	rgb(241, 157, 65)	hsl(31, 86%, 60%)
Pan Purple	rgb(116, 129, 232)	hsl(233, 72%, 68%)
Otterly Brown	rgb(141, 74, 0)	hsl(31, 100%, 28%)
Cold and Dark	rgb(0, 65, 78)	hsl(190, 100%, 15%)

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.

Aa8.97:1 Very good#AAF1FF on #00414E
Aa8.97:1 Very good#00414E on #AAF1FF
Aa5.38:1 Good#AAF1FF on #8D4A00
Aa5.38:1 Good#8D4A00 on #AAF1FF
Aa5.17:1 Good#F19D41 on #00414E
Aa5.17:1 Good#00414E on #F19D41
Aa3.24:1 Poor#7481E8 on #00414E
Aa3.24:1 Poor#00414E on #7481E8

Color blindness preview

CSS variables

/* Alpine Expedition to Cold and Dark — https://swatchly.xyz/palette/aaf1ff-f19d41-7481e8-8d4a00-00414e */
:root {
  --alpine-expedition: #aaf1ff;
  --nuclear-mango: #f19d41;
  --pan-purple: #7481e8;
  --otterly-brown: #8d4a00;
  --cold-and-dark: #00414e;
}

Tailwind CSS v4

/* Alpine Expedition to Cold and Dark — https://swatchly.xyz/palette/aaf1ff-f19d41-7481e8-8d4a00-00414e */
@theme {
  --color-alpine-expedition: #aaf1ff;
  --color-alpine-expedition-50: #cff7ff;
  --color-alpine-expedition-100: #aaf1ff;
  --color-alpine-expedition-200: #a6dce6;
  --color-alpine-expedition-300: #8bc7d3;
  --color-alpine-expedition-400: #67aab7;
  --color-alpine-expedition-500: #4a909d;
  --color-alpine-expedition-600: #307682;
  --color-alpine-expedition-700: #1c5f6b;
  --color-alpine-expedition-800: #0c4b55;
  --color-alpine-expedition-900: #033a42;
  --color-alpine-expedition-950: #00242a;
  --color-nuclear-mango: #f19d41;
  --color-nuclear-mango-50: #ffe9d6;
  --color-nuclear-mango-100: #ffd9b7;
  --color-nuclear-mango-200: #ffbb79;
  --color-nuclear-mango-300: #f19d41;
  --color-nuclear-mango-400: #d1811e;
  --color-nuclear-mango-500: #b26900;
  --color-nuclear-mango-600: #915500;
  --color-nuclear-mango-700: #754400;
  --color-nuclear-mango-800: #5e3500;
  --color-nuclear-mango-900: #4c2a00;
  --color-nuclear-mango-950: #311900;
  --color-pan-purple: #7481e8;
  --color-pan-purple-50: #f4f6ff;
  --color-pan-purple-100: #e8ecff;
  --color-pan-purple-200: #d0d9ff;
  --color-pan-purple-300: #b5c1ff;
  --color-pan-purple-400: #8f9eff;
  --color-pan-purple-500: #7481e8;
  --color-pan-purple-600: #5a64c8;
  --color-pan-purple-700: #454da8;
  --color-pan-purple-800: #343989;
  --color-pan-purple-900: #272a6e;
  --color-pan-purple-950: #161849;
  --color-otterly-brown: #8d4a00;
  --color-otterly-brown-50: #fff2ea;
  --color-otterly-brown-100: #ffe6d4;
  --color-otterly-brown-200: #ffceaa;
  --color-otterly-brown-300: #f4b585;
  --color-otterly-brown-400: #da945e;
  --color-otterly-brown-500: #c07940;
  --color-otterly-brown-600: #a56024;
  --color-otterly-brown-700: #8d4a00;
  --color-otterly-brown-800: #6f3900;
  --color-otterly-brown-900: #572b00;
  --color-otterly-brown-950: #381a00;
  --color-cold-and-dark: #00414e;
  --color-cold-and-dark-50: #e5f9ff;
  --color-cold-and-dark-100: #d0f2fc;
  --color-cold-and-dark-200: #b7e0eb;
  --color-cold-and-dark-300: #9bcad7;
  --color-cold-and-dark-400: #78adbb;
  --color-cold-and-dark-500: #5c92a1;
  --color-cold-and-dark-600: #437986;
  --color-cold-and-dark-700: #30626f;
  --color-cold-and-dark-800: #214f5b;
  --color-cold-and-dark-900: #00414e;
  --color-cold-and-dark-950: #0a2930;
}