Start generating

Puffy Cloud to O Tannenbaum color palette

D1E2FFPuffy Cloud72AD67FerntasticA07100Glazed ChestnutE4AF47Gold of Triumph864185Prunella005A25O Tannenbaum
Open in generator Export PNG, PDF, ASE…

About this palette

Puffy Cloud to O Tannenbaum is a 6-color cool, earthy palette: #D1E2FF (Puffy Cloud), #72AD67 (Ferntastic), #A07100 (Glazed Chestnut), #E4AF47 (Gold of Triumph), #864185 (Prunella), #005A25 (O Tannenbaum). It mixes blue, green, yellow, pink tones and feels cool overall. The strongest text pairing is #D1E2FF on #005A25 with a contrast ratio of 6.44:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Puffy Cloudrgb(209, 226, 255)hsl(218, 100%, 91%)
Ferntasticrgb(114, 173, 103)hsl(111, 30%, 54%)
Glazed Chestnutrgb(160, 113, 0)hsl(42, 100%, 31%)
Gold of Triumphrgb(228, 175, 71)hsl(40, 74%, 59%)
Prunellargb(134, 65, 133)hsl(301, 35%, 39%)
O Tannenbaumrgb(0, 90, 37)hsl(145, 100%, 18%)

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.44:1 Good#D1E2FF on #005A25
  • Aa6.44:1 Good#005A25 on #D1E2FF
  • Aa5.16:1 Good#D1E2FF on #864185
  • Aa5.16:1 Good#864185 on #D1E2FF
  • Aa4.23:1 Poor#E4AF47 on #005A25
  • Aa4.23:1 Poor#005A25 on #E4AF47
  • Aa3.38:1 Poor#E4AF47 on #864185
  • Aa3.38:1 Poor#864185 on #E4AF47

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Puffy Cloud to O Tannenbaum — https://swatchly.xyz/palette/d1e2ff-72ad67-a07100-e4af47-864185-005a25 */
:root {
  --puffy-cloud: #d1e2ff;
  --ferntastic: #72ad67;
  --glazed-chestnut: #a07100;
  --gold-of-triumph: #e4af47;
  --prunella: #864185;
  --o-tannenbaum: #005a25;
}

Tailwind CSS v4

/* Puffy Cloud to O Tannenbaum — https://swatchly.xyz/palette/d1e2ff-72ad67-a07100-e4af47-864185-005a25 */
@theme {
  --color-puffy-cloud: #d1e2ff;
  --color-puffy-cloud-50: #fafcff;
  --color-puffy-cloud-100: #edf4ff;
  --color-puffy-cloud-200: #d1e2ff;
  --color-puffy-cloud-300: #bcc9e1;
  --color-puffy-cloud-400: #99a8c2;
  --color-puffy-cloud-500: #7c8ba6;
  --color-puffy-cloud-600: #616f88;
  --color-puffy-cloud-700: #4a576e;
  --color-puffy-cloud-800: #374356;
  --color-puffy-cloud-900: #2a3344;
  --color-puffy-cloud-950: #191f2b;
  --color-ferntastic: #72ad67;
  --color-ferntastic-50: #dcffd5;
  --color-ferntastic-100: #cef5c6;
  --color-ferntastic-200: #b4e2ab;
  --color-ferntastic-300: #98cc8e;
  --color-ferntastic-400: #72ad67;
  --color-ferntastic-500: #58924d;
  --color-ferntastic-600: #407736;
  --color-ferntastic-700: #2d6024;
  --color-ferntastic-800: #1f4c17;
  --color-ferntastic-900: #153c0e;
  --color-ferntastic-950: #0a2605;
  --color-glazed-chestnut: #a07100;
  --color-glazed-chestnut-50: #fff1db;
  --color-glazed-chestnut-100: #ffe3b5;
  --color-glazed-chestnut-200: #f2cb8a;
  --color-glazed-chestnut-300: #ddb165;
  --color-glazed-chestnut-400: #be8f36;
  --color-glazed-chestnut-500: #a07100;
  --color-glazed-chestnut-600: #815b00;
  --color-glazed-chestnut-700: #674800;
  --color-glazed-chestnut-800: #523800;
  --color-glazed-chestnut-900: #402b00;
  --color-glazed-chestnut-950: #2a1b00;
  --color-gold-of-triumph: #e4af47;
  --color-gold-of-triumph-50: #ffefd3;
  --color-gold-of-triumph-100: #ffe1ae;
  --color-gold-of-triumph-200: #f3ca7f;
  --color-gold-of-triumph-300: #e4af47;
  --color-gold-of-triumph-400: #c49127;
  --color-gold-of-triumph-500: #a67800;
  --color-gold-of-triumph-600: #876000;
  --color-gold-of-triumph-700: #6c4d00;
  --color-gold-of-triumph-800: #563c00;
  --color-gold-of-triumph-900: #442f00;
  --color-gold-of-triumph-950: #2b1c00;
  --color-prunella: #864185;
  --color-prunella-50: #fff0fe;
  --color-prunella-100: #ffe0fd;
  --color-prunella-200: #fcc4fa;
  --color-prunella-300: #ecace9;
  --color-prunella-400: #d18bcf;
  --color-prunella-500: #b870b6;
  --color-prunella-600: #9d579b;
  --color-prunella-700: #864185;
  --color-prunella-800: #6b306a;
  --color-prunella-900: #542254;
  --color-prunella-950: #371237;
  --color-o-tannenbaum: #005a25;
  --color-o-tannenbaum-50: #dfffe4;
  --color-o-tannenbaum-100: #cbf9d3;
  --color-o-tannenbaum-200: #b1e8ba;
  --color-o-tannenbaum-300: #95d4a1;
  --color-o-tannenbaum-400: #71b880;
  --color-o-tannenbaum-500: #549d65;
  --color-o-tannenbaum-600: #39834c;
  --color-o-tannenbaum-700: #256c39;
  --color-o-tannenbaum-800: #005a25;
  --color-o-tannenbaum-900: #09451e;
  --color-o-tannenbaum-950: #022d10;
}

Similar palettes