Start generating

Pink Glitter to Nocturnal Expedition color palette

FFE1D6Pink GlitterFD9E7EFlash in the PanE76111Ferocious Fox006985Sea Goddess004954Nocturnal Expedition
Open in generator Export PNG, PDF, ASE…

About this palette

Pink Glitter to Nocturnal Expedition is a 5-color warm, vintage palette: #FFE1D6 (Pink Glitter), #FD9E7E (Flash in the Pan), #E76111 (Ferocious Fox), #006985 (Sea Goddess), #004954 (Nocturnal Expedition). It mixes orange, pink, blue, turquoise tones and feels warm overall. The strongest text pairing is #FFE1D6 on #004954 with a contrast ratio of 8.17:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pink Glitterrgb(255, 225, 214)hsl(16, 100%, 92%)
Flash in the Panrgb(253, 158, 126)hsl(15, 97%, 74%)
Ferocious Foxrgb(231, 97, 17)hsl(22, 86%, 49%)
Sea Goddessrgb(0, 105, 133)hsl(193, 100%, 26%)
Nocturnal Expeditionrgb(0, 73, 84)hsl(188, 100%, 16%)

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.17:1 Very good#FFE1D6 on #004954
  • Aa8.17:1 Very good#004954 on #FFE1D6
  • Aa5.06:1 Good#FFE1D6 on #006985
  • Aa5.06:1 Good#006985 on #FFE1D6
  • Aa4.98:1 Good#FD9E7E on #004954
  • Aa4.98:1 Good#004954 on #FD9E7E
  • Aa3.09:1 Poor#FD9E7E on #006985
  • Aa3.09:1 Poor#006985 on #FD9E7E

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pink Glitter to Nocturnal Expedition — https://swatchly.xyz/palette/ffe1d6-fd9e7e-e76111-006985-004954 */
:root {
  --pink-glitter: #ffe1d6;
  --flash-in-the-pan: #fd9e7e;
  --ferocious-fox: #e76111;
  --sea-goddess: #006985;
  --nocturnal-expedition: #004954;
}

Tailwind CSS v4

/* Pink Glitter to Nocturnal Expedition — https://swatchly.xyz/palette/ffe1d6-fd9e7e-e76111-006985-004954 */
@theme {
  --color-pink-glitter: #ffe1d6;
  --color-pink-glitter-50: #ffefe9;
  --color-pink-glitter-100: #ffe1d6;
  --color-pink-glitter-200: #e6d0c8;
  --color-pink-glitter-300: #d2b9b0;
  --color-pink-glitter-400: #b49990;
  --color-pink-glitter-500: #997f75;
  --color-pink-glitter-600: #7e655c;
  --color-pink-glitter-700: #664f47;
  --color-pink-glitter-800: #513d36;
  --color-pink-glitter-900: #3f2e28;
  --color-pink-glitter-950: #281c18;
  --color-flash-in-the-pan: #fd9e7e;
  --color-flash-in-the-pan-50: #ffede7;
  --color-flash-in-the-pan-100: #ffded3;
  --color-flash-in-the-pan-200: #ffc1ac;
  --color-flash-in-the-pan-300: #fd9e7e;
  --color-flash-in-the-pan-400: #da8163;
  --color-flash-in-the-pan-500: #bf6647;
  --color-flash-in-the-pan-600: #a14d30;
  --color-flash-in-the-pan-700: #85391e;
  --color-flash-in-the-pan-800: #6d2a11;
  --color-flash-in-the-pan-900: #571e08;
  --color-flash-in-the-pan-950: #391003;
  --color-ferocious-fox: #e76111;
  --color-ferocious-fox-50: #fff4f0;
  --color-ferocious-fox-100: #ffeae1;
  --color-ferocious-fox-200: #ffd2be;
  --color-ferocious-fox-300: #ffb393;
  --color-ferocious-fox-400: #ff8146;
  --color-ferocious-fox-500: #e76111;
  --color-ferocious-fox-600: #bd4b00;
  --color-ferocious-fox-700: #973a00;
  --color-ferocious-fox-800: #772c00;
  --color-ferocious-fox-900: #5c2000;
  --color-ferocious-fox-950: #3b1200;
  --color-sea-goddess: #006985;
  --color-sea-goddess-50: #e8f8ff;
  --color-sea-goddess-100: #d0f1ff;
  --color-sea-goddess-200: #aae4fa;
  --color-sea-goddess-300: #8dd0ea;
  --color-sea-goddess-400: #66b3cf;
  --color-sea-goddess-500: #4699b6;
  --color-sea-goddess-600: #297f9c;
  --color-sea-goddess-700: #006985;
  --color-sea-goddess-800: #005269;
  --color-sea-goddess-900: #003f52;
  --color-sea-goddess-950: #002835;
  --color-nocturnal-expedition: #004954;
  --color-nocturnal-expedition-50: #e3faff;
  --color-nocturnal-expedition-100: #cef3fb;
  --color-nocturnal-expedition-200: #b4e1ea;
  --color-nocturnal-expedition-300: #97cbd5;
  --color-nocturnal-expedition-400: #72acb7;
  --color-nocturnal-expedition-500: #54909c;
  --color-nocturnal-expedition-600: #397480;
  --color-nocturnal-expedition-700: #255c66;
  --color-nocturnal-expedition-800: #004954;
  --color-nocturnal-expedition-900: #0d373f;
  --color-nocturnal-expedition-950: #052228;
}

Similar palettes