Start generating

Frost Fairy to Palm Leaf color palette

BDCBEFFrost Fairy9EA9EEWondrous WisteriaB8908CRosy Brown527360Cactus763C3ECuba Libre2C4A30Palm Leaf
Open in generator Export PNG, PDF, ASE…

About this palette

Frost Fairy to Palm Leaf is a 6-color cool palette: #BDCBEF (Frost Fairy), #9EA9EE (Wondrous Wisteria), #B8908C (Rosy Brown), #527360 (Cactus), #763C3E (Cuba Libre), #2C4A30 (Palm Leaf). It mixes blue, purple, red, green tones and feels cool overall. The strongest text pairing is #BDCBEF on #2C4A30 with a contrast ratio of 6.08:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Frost Fairyrgb(189, 203, 239)hsl(223, 61%, 84%)
Wondrous Wisteriargb(158, 169, 238)hsl(232, 70%, 78%)
Rosy Brownrgb(184, 144, 140)hsl(5, 24%, 64%)
Cactusrgb(82, 115, 96)hsl(145, 17%, 39%)
Cuba Librergb(118, 60, 62)hsl(358, 33%, 35%)
Palm Leafrgb(44, 74, 48)hsl(128, 25%, 23%)

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.

  • Aa6.08:1 Good#BDCBEF on #2C4A30
  • Aa6.08:1 Good#2C4A30 on #BDCBEF
  • Aa5.21:1 Good#BDCBEF on #763C3E
  • Aa5.21:1 Good#763C3E on #BDCBEF
  • Aa4.40:1 Poor#9EA9EE on #2C4A30
  • Aa4.40:1 Poor#2C4A30 on #9EA9EE
  • Aa3.77:1 Poor#9EA9EE on #763C3E
  • Aa3.77:1 Poor#763C3E on #9EA9EE

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Frost Fairy to Palm Leaf — https://swatchly.xyz/palette/bdcbef-9ea9ee-b8908c-527360-763c3e-2c4a30 */
:root {
  --frost-fairy: #bdcbef;
  --wondrous-wisteria: #9ea9ee;
  --rosy-brown: #b8908c;
  --cactus: #527360;
  --cuba-libre: #763c3e;
  --palm-leaf: #2c4a30;
}

Tailwind CSS v4

/* Frost Fairy to Palm Leaf — https://swatchly.xyz/palette/bdcbef-9ea9ee-b8908c-527360-763c3e-2c4a30 */
@theme {
  --color-frost-fairy: #bdcbef;
  --color-frost-fairy-50: #f9fbff;
  --color-frost-fairy-100: #edf2ff;
  --color-frost-fairy-200: #d6e0fa;
  --color-frost-fairy-300: #bdcbef;
  --color-frost-fairy-400: #9daaca;
  --color-frost-fairy-500: #7f8cad;
  --color-frost-fairy-600: #647090;
  --color-frost-fairy-700: #4d5774;
  --color-frost-fairy-800: #3a435c;
  --color-frost-fairy-900: #2a3247;
  --color-frost-fairy-950: #191f2e;
  --color-wondrous-wisteria: #9ea9ee;
  --color-wondrous-wisteria-50: #f8f9ff;
  --color-wondrous-wisteria-100: #eff1ff;
  --color-wondrous-wisteria-200: #d8dfff;
  --color-wondrous-wisteria-300: #bfc8ff;
  --color-wondrous-wisteria-400: #9ea9ee;
  --color-wondrous-wisteria-500: #818bcd;
  --color-wondrous-wisteria-600: #656eae;
  --color-wondrous-wisteria-700: #4e5590;
  --color-wondrous-wisteria-800: #3b4174;
  --color-wondrous-wisteria-900: #2b305b;
  --color-wondrous-wisteria-950: #191c3a;
  --color-rosy-brown: #b8908c;
  --color-rosy-brown-50: #ffefed;
  --color-rosy-brown-100: #fce0dd;
  --color-rosy-brown-200: #ebcac7;
  --color-rosy-brown-300: #d6b1ae;
  --color-rosy-brown-400: #b8908c;
  --color-rosy-brown-500: #9d7672;
  --color-rosy-brown-600: #815d5a;
  --color-rosy-brown-700: #694946;
  --color-rosy-brown-800: #543836;
  --color-rosy-brown-900: #432b29;
  --color-rosy-brown-950: #2b1a18;
  --color-cactus: #527360;
  --color-cactus-50: #e7fbef;
  --color-cactus-100: #dbf1e4;
  --color-cactus-200: #c4dfce;
  --color-cactus-300: #aac9b6;
  --color-cactus-400: #88aa96;
  --color-cactus-500: #6c8e7a;
  --color-cactus-600: #527360;
  --color-cactus-700: #3e5c4b;
  --color-cactus-800: #2e483a;
  --color-cactus-900: #22382b;
  --color-cactus-950: #13231a;
  --color-cuba-libre: #763c3e;
  --color-cuba-libre-50: #fff1f1;
  --color-cuba-libre-100: #ffe4e3;
  --color-cuba-libre-200: #fcc7c7;
  --color-cuba-libre-300: #e9adad;
  --color-cuba-libre-400: #cb8b8b;
  --color-cuba-libre-500: #ae6e6f;
  --color-cuba-libre-600: #8f5455;
  --color-cuba-libre-700: #763c3e;
  --color-cuba-libre-800: #5c2f30;
  --color-cuba-libre-900: #492224;
  --color-cuba-libre-950: #2f1415;
  --color-palm-leaf: #2c4a30;
  --color-palm-leaf-50: #e8fbe9;
  --color-palm-leaf-100: #dcf2de;
  --color-palm-leaf-200: #c6e0c8;
  --color-palm-leaf-300: #adcaaf;
  --color-palm-leaf-400: #8bab8e;
  --color-palm-leaf-500: #6f9072;
  --color-palm-leaf-600: #557459;
  --color-palm-leaf-700: #415d44;
  --color-palm-leaf-800: #2c4a30;
  --color-palm-leaf-900: #233826;
  --color-palm-leaf-950: #142316;
}

Similar palettes