Start generating

Cooler Than Ever to Midnight Velvet color palette

71B8FCCooler Than Ever4A843FBeanpoleD5E7FFVeiling Waterfalls724400Hazelnut Chocolate301D37Midnight Velvet
Open in generator Export PNG, PDF, ASE…

About this palette

Cooler Than Ever to Midnight Velvet is a 5-color cool palette: #71B8FC (Cooler Than Ever), #4A843F (Beanpole), #D5E7FF (Veiling Waterfalls), #724400 (Hazelnut Chocolate), #301D37 (Midnight Velvet). It mixes blue, green, brown, purple tones and feels cool overall. The strongest text pairing is #D5E7FF on #301D37 with a contrast ratio of 12.31:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cooler Than Everrgb(113, 184, 252)hsl(209, 96%, 72%)
Beanpolergb(74, 132, 63)hsl(110, 35%, 38%)
Veiling Waterfallsrgb(213, 231, 255)hsl(214, 100%, 92%)
Hazelnut Chocolatergb(114, 68, 0)hsl(36, 100%, 22%)
Midnight Velvetrgb(48, 29, 55)hsl(284, 31%, 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.

  • Aa12.31:1 Super#D5E7FF on #301D37
  • Aa12.31:1 Super#301D37 on #D5E7FF
  • Aa7.34:1 Very good#71B8FC on #301D37
  • Aa7.34:1 Very good#301D37 on #71B8FC
  • Aa6.57:1 Good#D5E7FF on #724400
  • Aa6.57:1 Good#724400 on #D5E7FF
  • Aa3.92:1 Poor#71B8FC on #724400
  • Aa3.92:1 Poor#724400 on #71B8FC

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cooler Than Ever to Midnight Velvet — https://swatchly.xyz/palette/71b8fc-4a843f-d5e7ff-724400-301d37 */
:root {
  --cooler-than-ever: #71b8fc;
  --beanpole: #4a843f;
  --veiling-waterfalls: #d5e7ff;
  --hazelnut-chocolate: #724400;
  --midnight-velvet: #301d37;
}

Tailwind CSS v4

/* Cooler Than Ever to Midnight Velvet — https://swatchly.xyz/palette/71b8fc-4a843f-d5e7ff-724400-301d37 */
@theme {
  --color-cooler-than-ever: #71b8fc;
  --color-cooler-than-ever-50: #e0efff;
  --color-cooler-than-ever-100: #cae4ff;
  --color-cooler-than-ever-200: #a1d0ff;
  --color-cooler-than-ever-300: #71b8fc;
  --color-cooler-than-ever-400: #569bdc;
  --color-cooler-than-ever-500: #3a81c2;
  --color-cooler-than-ever-600: #2269a5;
  --color-cooler-than-ever-700: #0f548a;
  --color-cooler-than-ever-800: #014273;
  --color-cooler-than-ever-900: #00345d;
  --color-cooler-than-ever-950: #00203d;
  --color-beanpole: #4a843f;
  --color-beanpole-50: #e2ffdc;
  --color-beanpole-100: #d3f9cc;
  --color-beanpole-200: #bce9b4;
  --color-beanpole-300: #a3d599;
  --color-beanpole-400: #80b875;
  --color-beanpole-500: #649e58;
  --color-beanpole-600: #4a843f;
  --color-beanpole-700: #346a2a;
  --color-beanpole-800: #24541a;
  --color-beanpole-900: #18410f;
  --color-beanpole-950: #0b2905;
  --color-veiling-waterfalls: #d5e7ff;
  --color-veiling-waterfalls-50: #e7f1ff;
  --color-veiling-waterfalls-100: #d5e7ff;
  --color-veiling-waterfalls-200: #c6d4e6;
  --color-veiling-waterfalls-300: #afbfd3;
  --color-veiling-waterfalls-400: #90a0b6;
  --color-veiling-waterfalls-500: #76869b;
  --color-veiling-waterfalls-600: #5d6c81;
  --color-veiling-waterfalls-700: #485669;
  --color-veiling-waterfalls-800: #374353;
  --color-veiling-waterfalls-900: #293441;
  --color-veiling-waterfalls-950: #18202a;
  --color-hazelnut-chocolate: #724400;
  --color-hazelnut-chocolate-50: #fff3e7;
  --color-hazelnut-chocolate-100: #ffe6ce;
  --color-hazelnut-chocolate-200: #f7cea5;
  --color-hazelnut-chocolate-300: #e3b586;
  --color-hazelnut-chocolate-400: #c5935e;
  --color-hazelnut-chocolate-500: #a87740;
  --color-hazelnut-chocolate-600: #8a5c25;
  --color-hazelnut-chocolate-700: #724400;
  --color-hazelnut-chocolate-800: #593504;
  --color-hazelnut-chocolate-900: #462800;
  --color-hazelnut-chocolate-950: #2d1700;
  --color-midnight-velvet: #301d37;
  --color-midnight-velvet-50: #fbf1ff;
  --color-midnight-velvet-100: #f4e5fa;
  --color-midnight-velvet-200: #e2d0e9;
  --color-midnight-velvet-300: #cdb8d5;
  --color-midnight-velvet-400: #af98b7;
  --color-midnight-velvet-500: #957e9d;
  --color-midnight-velvet-600: #7b6583;
  --color-midnight-velvet-700: #64506c;
  --color-midnight-velvet-800: #514058;
  --color-midnight-velvet-900: #413247;
  --color-midnight-velvet-950: #301d37;
}

Similar palettes