Frost Fairy to Elite Teal color palette

B4D1F3Frost Fairy 6BB1FFFennel Flower D7646FBerrylicious 8D6000Alligator 0B4F50Cape Verde 00373AElite Teal

Open in generator Export PNG, PDF, ASE…

About this palette

Frost Fairy to Elite Teal is a 6-color cool palette: #B4D1F3 (Frost Fairy), #6BB1FF (Fennel Flower), #D7646F (Berrylicious), #8D6000 (Alligator), #0B4F50 (Cape Verde), #00373A (Elite Teal). It mixes blue, red, brown, turquoise tones and feels cool overall. The strongest text pairing is #B4D1F3 on #00373A with a contrast ratio of 8.31:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frost Fairy	rgb(180, 209, 243)	hsl(212, 72%, 83%)
Fennel Flower	rgb(107, 177, 255)	hsl(212, 100%, 71%)
Berrylicious	rgb(215, 100, 111)	hsl(354, 59%, 62%)
Alligator	rgb(141, 96, 0)	hsl(41, 100%, 28%)
Cape Verde	rgb(11, 79, 80)	hsl(181, 76%, 18%)
Elite Teal	rgb(0, 55, 58)	hsl(183, 100%, 11%)

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.31:1 Very good#B4D1F3 on #00373A
Aa8.31:1 Very good#00373A on #B4D1F3
Aa5.94:1 Good#B4D1F3 on #0B4F50
Aa5.94:1 Good#0B4F50 on #B4D1F3
Aa5.82:1 Good#6BB1FF on #00373A
Aa5.82:1 Good#00373A on #6BB1FF
Aa4.16:1 Poor#6BB1FF on #0B4F50
Aa4.16:1 Poor#0B4F50 on #6BB1FF

Color blindness preview

CSS variables

/* Frost Fairy to Elite Teal — https://swatchly.xyz/palette/b4d1f3-6bb1ff-d7646f-8d6000-0b4f50-00373a */
:root {
  --frost-fairy: #b4d1f3;
  --fennel-flower: #6bb1ff;
  --berrylicious: #d7646f;
  --alligator: #8d6000;
  --cape-verde: #0b4f50;
  --elite-teal: #00373a;
}

Tailwind CSS v4

/* Frost Fairy to Elite Teal — https://swatchly.xyz/palette/b4d1f3-6bb1ff-d7646f-8d6000-0b4f50-00373a */
@theme {
  --color-frost-fairy: #b4d1f3;
  --color-frost-fairy-50: #e3f0ff;
  --color-frost-fairy-100: #d2e5fd;
  --color-frost-fairy-200: #b4d1f3;
  --color-frost-fairy-300: #a3bcd9;
  --color-frost-fairy-400: #839ebe;
  --color-frost-fairy-500: #6984a4;
  --color-frost-fairy-600: #526b89;
  --color-frost-fairy-700: #3f5671;
  --color-frost-fairy-800: #30445b;
  --color-frost-fairy-900: #233448;
  --color-frost-fairy-950: #14202e;
  --color-fennel-flower: #6bb1ff;
  --color-fennel-flower-50: #f5faff;
  --color-fennel-flower-100: #e8f3ff;
  --color-fennel-flower-200: #cae2ff;
  --color-fennel-flower-300: #a5cfff;
  --color-fennel-flower-400: #6bb1ff;
  --color-fennel-flower-500: #4e93de;
  --color-fennel-flower-600: #2f75be;
  --color-fennel-flower-700: #185b9e;
  --color-fennel-flower-800: #054681;
  --color-fennel-flower-900: #003565;
  --color-fennel-flower-950: #001f40;
  --color-berrylicious: #d7646f;
  --color-berrylicious-50: #fff3f3;
  --color-berrylicious-100: #ffe7e8;
  --color-berrylicious-200: #ffcdcf;
  --color-berrylicious-300: #ffadb1;
  --color-berrylicious-400: #f1828a;
  --color-berrylicious-500: #d7646f;
  --color-berrylicious-600: #b64754;
  --color-berrylicious-700: #97313f;
  --color-berrylicious-800: #7a202e;
  --color-berrylicious-900: #611321;
  --color-berrylicious-950: #3f0712;
  --color-alligator: #8d6000;
  --color-alligator-50: #fff3e3;
  --color-alligator-100: #ffe7c5;
  --color-alligator-200: #f6d09a;
  --color-alligator-300: #e2b879;
  --color-alligator-400: #c5974f;
  --color-alligator-500: #a97b2c;
  --color-alligator-600: #8d6000;
  --color-alligator-700: #704c00;
  --color-alligator-800: #583b00;
  --color-alligator-900: #452d00;
  --color-alligator-950: #2c1b00;
  --color-cape-verde: #0b4f50;
  --color-cape-verde-50: #dcfdfd;
  --color-cape-verde-100: #cff4f4;
  --color-cape-verde-200: #b5e2e2;
  --color-cape-verde-300: #99cdcd;
  --color-cape-verde-400: #75aeaf;
  --color-cape-verde-500: #589494;
  --color-cape-verde-600: #3e797a;
  --color-cape-verde-700: #2a6262;
  --color-cape-verde-800: #0b4f50;
  --color-cape-verde-900: #103c3d;
  --color-cape-verde-950: #062627;
  --color-elite-teal: #00373a;
  --color-elite-teal-50: #e0fbfd;
  --color-elite-teal-100: #d3f2f4;
  --color-elite-teal-200: #bbe0e2;
  --color-elite-teal-300: #a0cacd;
  --color-elite-teal-400: #7cabad;
  --color-elite-teal-500: #5e8f91;
  --color-elite-teal-600: #447376;
  --color-elite-teal-700: #305b5d;
  --color-elite-teal-800: #214649;
  --color-elite-teal-900: #00373a;
  --color-elite-teal-950: #0a2122;
}