Icy Plains to Pineapple color palette

DCD9FFIcy Plains DCAE64Caramel Essence 968CC8Petrified Purple 60865AKale 42532EZen Garden Olive 573700Pineapple

Open in generator Export PNG, PDF, ASE…

About this palette

Icy Plains to Pineapple is a 6-color cool, earthy palette: #DCD9FF (Icy Plains), #DCAE64 (Caramel Essence), #968CC8 (Petrified Purple), #60865A (Kale), #42532E (Zen Garden Olive), #573700 (Pineapple). It mixes purple, yellow, green, brown tones and feels cool overall. The strongest text pairing is #DCD9FF on #573700 with a contrast ratio of 7.90:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(220, 217, 255)	hsl(245, 100%, 93%)
Caramel Essence	rgb(220, 174, 100)	hsl(37, 63%, 63%)
Petrified Purple	rgb(150, 140, 200)	hsl(250, 35%, 67%)
Kale	rgb(96, 134, 90)	hsl(112, 20%, 44%)
Zen Garden Olive	rgb(66, 83, 46)	hsl(88, 29%, 25%)
Pineapple	rgb(87, 55, 0)	hsl(38, 100%, 17%)

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.

Aa7.90:1 Very good#DCD9FF on #573700
Aa7.90:1 Very good#573700 on #DCD9FF
Aa6.14:1 Good#DCD9FF on #42532E
Aa6.14:1 Good#42532E on #DCD9FF
Aa5.27:1 Good#DCAE64 on #573700
Aa5.27:1 Good#573700 on #DCAE64
Aa4.10:1 Poor#DCAE64 on #42532E
Aa4.10:1 Poor#42532E on #DCAE64

Color blindness preview

CSS variables

/* Icy Plains to Pineapple — https://swatchly.xyz/palette/dcd9ff-dcae64-968cc8-60865a-42532e-573700 */
:root {
  --icy-plains: #dcd9ff;
  --caramel-essence: #dcae64;
  --petrified-purple: #968cc8;
  --kale: #60865a;
  --zen-garden-olive: #42532e;
  --pineapple: #573700;
}

Tailwind CSS v4

/* Icy Plains to Pineapple — https://swatchly.xyz/palette/dcd9ff-dcae64-968cc8-60865a-42532e-573700 */
@theme {
  --color-icy-plains: #dcd9ff;
  --color-icy-plains-50: #f9f9ff;
  --color-icy-plains-100: #f0efff;
  --color-icy-plains-200: #dcd9ff;
  --color-icy-plains-300: #c5c2e1;
  --color-icy-plains-400: #a4a1c3;
  --color-icy-plains-500: #8884a7;
  --color-icy-plains-600: #6c698a;
  --color-icy-plains-700: #555270;
  --color-icy-plains-800: #413f58;
  --color-icy-plains-900: #323045;
  --color-icy-plains-950: #1f1d2d;
  --color-caramel-essence: #dcae64;
  --color-caramel-essence-50: #ffedd2;
  --color-caramel-essence-100: #fedfaf;
  --color-caramel-essence-200: #edc890;
  --color-caramel-essence-300: #dcae64;
  --color-caramel-essence-400: #bc9149;
  --color-caramel-essence-500: #a2772a;
  --color-caramel-essence-600: #875e09;
  --color-caramel-essence-700: #6e4b00;
  --color-caramel-essence-800: #573b00;
  --color-caramel-essence-900: #452e00;
  --color-caramel-essence-950: #2c1c00;
  --color-petrified-purple: #968cc8;
  --color-petrified-purple-50: #f1efff;
  --color-petrified-purple-100: #e4e1ff;
  --color-petrified-purple-200: #cfc8fa;
  --color-petrified-purple-300: #b7aee6;
  --color-petrified-purple-400: #968cc8;
  --color-petrified-purple-500: #7d73ad;
  --color-petrified-purple-600: #655b91;
  --color-petrified-purple-700: #514778;
  --color-petrified-purple-800: #403762;
  --color-petrified-purple-900: #322b4f;
  --color-petrified-purple-950: #201a35;
  --color-kale: #60865a;
  --color-kale-50: #e3fbdf;
  --color-kale-100: #d5f0d0;
  --color-kale-200: #bcdcb6;
  --color-kale-300: #a0c49a;
  --color-kale-400: #7da377;
  --color-kale-500: #60865a;
  --color-kale-600: #496d44;
  --color-kale-700: #375733;
  --color-kale-800: #294525;
  --color-kale-900: #1f361b;
  --color-kale-950: #11230f;
  --color-zen-garden-olive: #42532e;
  --color-zen-garden-olive-50: #eefae2;
  --color-zen-garden-olive-100: #e3f1d6;
  --color-zen-garden-olive-200: #ccdcbc;
  --color-zen-garden-olive-300: #b3c5a0;
  --color-zen-garden-olive-400: #91a47d;
  --color-zen-garden-olive-500: #748760;
  --color-zen-garden-olive-600: #5a6b46;
  --color-zen-garden-olive-700: #42532e;
  --color-zen-garden-olive-800: #334024;
  --color-zen-garden-olive-900: #27321a;
  --color-zen-garden-olive-950: #171e0e;
  --color-pineapple: #573700;
  --color-pineapple-50: #fff3e5;
  --color-pineapple-100: #ffe7c9;
  --color-pineapple-200: #efd2ae;
  --color-pineapple-300: #dbba91;
  --color-pineapple-400: #bd996b;
  --color-pineapple-500: #a17d4e;
  --color-pineapple-600: #846234;
  --color-pineapple-700: #6a4b21;
  --color-pineapple-800: #573700;
  --color-pineapple-900: #412b0a;
  --color-pineapple-950: #291904;
}