Start generating

Blue Mana to Innocent Snowdrop color palette

66C7F4Blue Mana614300Very Coffee006591Wavy Navy817FC3OrbitalD49134Vibrant AmberCFCBFFInnocent Snowdrop
Open in generator Export PNG, PDF, ASE…

About this palette

Blue Mana to Innocent Snowdrop is a 6-color cool palette: #66C7F4 (Blue Mana), #614300 (Very Coffee), #006591 (Wavy Navy), #817FC3 (Orbital), #D49134 (Vibrant Amber), #CFCBFF (Innocent Snowdrop). It mixes blue, brown, purple, orange tones and feels cool overall. The strongest text pairing is #614300 on #CFCBFF with a contrast ratio of 5.90:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Blue Manargb(102, 199, 244)hsl(199, 87%, 68%)
Very Coffeergb(97, 67, 0)hsl(41, 100%, 19%)
Wavy Navyrgb(0, 101, 145)hsl(198, 100%, 28%)
Orbitalrgb(129, 127, 195)hsl(242, 36%, 63%)
Vibrant Amberrgb(212, 145, 52)hsl(35, 65%, 52%)
Innocent Snowdroprgb(207, 203, 255)hsl(245, 100%, 90%)

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.

  • Aa5.90:1 Good#614300 on #CFCBFF
  • Aa5.90:1 Good#CFCBFF on #614300
  • Aa4.78:1 Good#66C7F4 on #614300
  • Aa4.78:1 Good#614300 on #66C7F4
  • Aa4.17:1 Poor#006591 on #CFCBFF
  • Aa4.17:1 Poor#CFCBFF on #006591
  • Aa3.42:1 Poor#614300 on #D49134
  • Aa3.42:1 Poor#D49134 on #614300

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Blue Mana to Innocent Snowdrop — https://swatchly.xyz/palette/66c7f4-614300-006591-817fc3-d49134-cfcbff */
:root {
  --blue-mana: #66c7f4;
  --very-coffee: #614300;
  --wavy-navy: #006591;
  --orbital: #817fc3;
  --vibrant-amber: #d49134;
  --innocent-snowdrop: #cfcbff;
}

Tailwind CSS v4

/* Blue Mana to Innocent Snowdrop — https://swatchly.xyz/palette/66c7f4-614300-006591-817fc3-d49134-cfcbff */
@theme {
  --color-blue-mana: #66c7f4;
  --color-blue-mana-50: #e2f5ff;
  --color-blue-mana-100: #c9edff;
  --color-blue-mana-200: #97dcff;
  --color-blue-mana-300: #66c7f4;
  --color-blue-mana-400: #49a8d2;
  --color-blue-mana-500: #228db8;
  --color-blue-mana-600: #007399;
  --color-blue-mana-700: #005b7b;
  --color-blue-mana-800: #004862;
  --color-blue-mana-900: #00384d;
  --color-blue-mana-950: #002332;
  --color-very-coffee: #614300;
  --color-very-coffee-50: #fff4e1;
  --color-very-coffee-100: #fee8c5;
  --color-very-coffee-200: #eed4aa;
  --color-very-coffee-300: #dbbe8e;
  --color-very-coffee-400: #bf9f69;
  --color-very-coffee-500: #a5844d;
  --color-very-coffee-600: #8a6b33;
  --color-very-coffee-700: #735620;
  --color-very-coffee-800: #614300;
  --color-very-coffee-900: #4a3407;
  --color-very-coffee-950: #302001;
  --color-wavy-navy: #006591;
  --color-wavy-navy-50: #ebf7ff;
  --color-wavy-navy-100: #d7efff;
  --color-wavy-navy-200: #b1e0ff;
  --color-wavy-navy-300: #8ccdf6;
  --color-wavy-navy-400: #65b0dd;
  --color-wavy-navy-500: #4595c4;
  --color-wavy-navy-600: #287ba8;
  --color-wavy-navy-700: #006591;
  --color-wavy-navy-800: #004f73;
  --color-wavy-navy-900: #003d59;
  --color-wavy-navy-950: #00263a;
  --color-orbital: #817fc3;
  --color-orbital-50: #f4f4ff;
  --color-orbital-100: #e9eaff;
  --color-orbital-200: #d3d4ff;
  --color-orbital-300: #bbbbf8;
  --color-orbital-400: #9c9bde;
  --color-orbital-500: #817fc3;
  --color-orbital-600: #6764a5;
  --color-orbital-700: #514e89;
  --color-orbital-800: #3f3b6f;
  --color-orbital-900: #302d58;
  --color-orbital-950: #1d1b3a;
  --color-vibrant-amber: #d49134;
  --color-vibrant-amber-50: #fff3e5;
  --color-vibrant-amber-100: #ffe6ca;
  --color-vibrant-amber-200: #ffcd91;
  --color-vibrant-amber-300: #efb46b;
  --color-vibrant-amber-400: #d49134;
  --color-vibrant-amber-500: #b77504;
  --color-vibrant-amber-600: #945e00;
  --color-vibrant-amber-700: #764a00;
  --color-vibrant-amber-800: #5d3900;
  --color-vibrant-amber-900: #482c00;
  --color-vibrant-amber-950: #2e1a00;
  --color-innocent-snowdrop: #cfcbff;
  --color-innocent-snowdrop-50: #f0efff;
  --color-innocent-snowdrop-100: #e5e3ff;
  --color-innocent-snowdrop-200: #cfcbff;
  --color-innocent-snowdrop-300: #bab6e3;
  --color-innocent-snowdrop-400: #9b97c7;
  --color-innocent-snowdrop-500: #817dad;
  --color-innocent-snowdrop-600: #686491;
  --color-innocent-snowdrop-700: #534e77;
  --color-innocent-snowdrop-800: #413d61;
  --color-innocent-snowdrop-900: #322e4c;
  --color-innocent-snowdrop-950: #1e1c32;
}

Similar palettes