Start generating

The Big Freeze to Midnight Velvet color palette

BCFDFEThe Big FreezeEFBE8FPeachy-Kini00B1ADTeal Me No Lies93642DWoodgrain623D78Heartless321F40Midnight Velvet
Open in generator Export PNG, PDF, ASE…

About this palette

The Big Freeze to Midnight Velvet is a 6-color cool palette: #BCFDFE (The Big Freeze), #EFBE8F (Peachy-Kini), #00B1AD (Teal Me No Lies), #93642D (Woodgrain), #623D78 (Heartless), #321F40 (Midnight Velvet). It mixes turquoise, orange, brown, purple tones and feels cool overall. The strongest text pairing is #BCFDFE on #321F40 with a contrast ratio of 13.25:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
The Big Freezergb(188, 253, 254)hsl(181, 97%, 87%)
Peachy-Kinirgb(239, 190, 143)hsl(29, 75%, 75%)
Teal Me No Liesrgb(0, 177, 173)hsl(179, 100%, 35%)
Woodgrainrgb(147, 100, 45)hsl(32, 53%, 38%)
Heartlessrgb(98, 61, 120)hsl(278, 33%, 35%)
Midnight Velvetrgb(50, 31, 64)hsl(275, 35%, 19%)

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.

  • Aa13.25:1 Super#BCFDFE on #321F40
  • Aa13.25:1 Super#321F40 on #BCFDFE
  • Aa8.84:1 Very good#EFBE8F on #321F40
  • Aa8.84:1 Very good#321F40 on #EFBE8F
  • Aa7.57:1 Very good#BCFDFE on #623D78
  • Aa7.57:1 Very good#623D78 on #BCFDFE
  • Aa5.61:1 Good#00B1AD on #321F40
  • Aa5.61:1 Good#321F40 on #00B1AD

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* The Big Freeze to Midnight Velvet — https://swatchly.xyz/palette/bcfdfe-efbe8f-00b1ad-93642d-623d78-321f40 */
:root {
  --the-big-freeze: #bcfdfe;
  --peachy-kini: #efbe8f;
  --teal-me-no-lies: #00b1ad;
  --woodgrain: #93642d;
  --heartless: #623d78;
  --midnight-velvet: #321f40;
}

Tailwind CSS v4

/* The Big Freeze to Midnight Velvet — https://swatchly.xyz/palette/bcfdfe-efbe8f-00b1ad-93642d-623d78-321f40 */
@theme {
  --color-the-big-freeze: #bcfdfe;
  --color-the-big-freeze-50: #e3ffff;
  --color-the-big-freeze-100: #bcfdfe;
  --color-the-big-freeze-200: #b7e5e5;
  --color-the-big-freeze-300: #9acfd0;
  --color-the-big-freeze-400: #74b0b1;
  --color-the-big-freeze-500: #559495;
  --color-the-big-freeze-600: #3a7879;
  --color-the-big-freeze-700: #256061;
  --color-the-big-freeze-800: #174b4c;
  --color-the-big-freeze-900: #0c3a3b;
  --color-the-big-freeze-950: #042525;
  --color-peachy-kini: #efbe8f;
  --color-peachy-kini-50: #fff8f1;
  --color-peachy-kini-100: #ffeddd;
  --color-peachy-kini-200: #fad7b6;
  --color-peachy-kini-300: #efbe8f;
  --color-peachy-kini-400: #cb9e73;
  --color-peachy-kini-500: #ae8053;
  --color-peachy-kini-600: #906538;
  --color-peachy-kini-700: #754e24;
  --color-peachy-kini-800: #5d3b15;
  --color-peachy-kini-900: #482b0b;
  --color-peachy-kini-950: #2e1a04;
  --color-teal-me-no-lies: #00b1ad;
  --color-teal-me-no-lies-50: #c9fffc;
  --color-teal-me-no-lies-100: #abf8f4;
  --color-teal-me-no-lies-200: #87e6e2;
  --color-teal-me-no-lies-300: #5ed0cc;
  --color-teal-me-no-lies-400: #00b1ad;
  --color-teal-me-no-lies-500: #009490;
  --color-teal-me-no-lies-600: #007774;
  --color-teal-me-no-lies-700: #005f5d;
  --color-teal-me-no-lies-800: #004b49;
  --color-teal-me-no-lies-900: #003a39;
  --color-teal-me-no-lies-950: #002524;
  --color-woodgrain: #93642d;
  --color-woodgrain-50: #fff3e7;
  --color-woodgrain-100: #ffe7cf;
  --color-woodgrain-200: #f8d1a9;
  --color-woodgrain-300: #e6ba8c;
  --color-woodgrain-400: #c99966;
  --color-woodgrain-500: #af7e48;
  --color-woodgrain-600: #93642d;
  --color-woodgrain-700: #784e19;
  --color-woodgrain-800: #603b0a;
  --color-woodgrain-900: #4c2c02;
  --color-woodgrain-950: #311a00;
  --color-heartless: #623d78;
  --color-heartless-50: #f9f2ff;
  --color-heartless-100: #f4e4ff;
  --color-heartless-200: #e7c9fc;
  --color-heartless-300: #d2afe9;
  --color-heartless-400: #b38ccb;
  --color-heartless-500: #9670af;
  --color-heartless-600: #7a5590;
  --color-heartless-700: #623d78;
  --color-heartless-800: #4c2f5d;
  --color-heartless-900: #3b234a;
  --color-heartless-950: #251430;
  --color-midnight-velvet: #321f40;
  --color-midnight-velvet-50: #f9f2ff;
  --color-midnight-velvet-100: #f3e5ff;
  --color-midnight-velvet-200: #e1d0ef;
  --color-midnight-velvet-300: #cbb8dc;
  --color-midnight-velvet-400: #ad98bf;
  --color-midnight-velvet-500: #947ea5;
  --color-midnight-velvet-600: #7a668b;
  --color-midnight-velvet-700: #655174;
  --color-midnight-velvet-800: #524160;
  --color-midnight-velvet-900: #43344f;
  --color-midnight-velvet-950: #321f40;
}

Similar palettes