Palm Leaf to Icy Plains Color Palette

About this palette

Palm Leaf to Icy Plains is a 4-color muted palette: #32482E (Palm Leaf), #66756E (Camping Trip), #9FA5B4 (Robotic Gods), #DCD7FE (Icy Plains). It mixes green, gray, purple tones and feels cool overall. The strongest text pairing is #32482E on #DCD7FE with a contrast ratio of 7.23:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Palm Leaf	rgb(50, 72, 46)	hsl(111, 22%, 23%)
Camping Trip	rgb(102, 117, 110)	hsl(152, 7%, 43%)
Robotic Gods	rgb(159, 165, 180)	hsl(223, 12%, 66%)
Icy Plains	rgb(220, 215, 254)	hsl(248, 95%, 92%)

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.23:1 Very good#32482E on #DCD7FE
Aa7.23:1 Very good#DCD7FE on #32482E
Aa4.05:1 Poor#32482E on #9FA5B4
Aa4.05:1 Poor#9FA5B4 on #32482E
Aa3.51:1 Poor#66756E on #DCD7FE
Aa3.51:1 Poor#DCD7FE on #66756E

Color blindness preview

CSS variables

/* Palm Leaf to Icy Plains — https://swatchly.xyz/palette/32482e-66756e-9fa5b4-dcd7fe */
:root {
  --palm-leaf: #32482e;
  --camping-trip: #66756e;
  --robotic-gods: #9fa5b4;
  --icy-plains: #dcd7fe;
}

Tailwind CSS v4

/* Palm Leaf to Icy Plains — https://swatchly.xyz/palette/32482e-66756e-9fa5b4-dcd7fe */
@theme {
  --color-palm-leaf: #32482e;
  --color-palm-leaf-50: #ebfae9;
  --color-palm-leaf-100: #e0f1dd;
  --color-palm-leaf-200: #cbdec7;
  --color-palm-leaf-300: #b2c8ae;
  --color-palm-leaf-400: #91a98c;
  --color-palm-leaf-500: #758e71;
  --color-palm-leaf-600: #5b7257;
  --color-palm-leaf-700: #465b42;
  --color-palm-leaf-800: #32482e;
  --color-palm-leaf-900: #273725;
  --color-palm-leaf-950: #172215;
  --color-camping-trip: #66756e;
  --color-camping-trip-50: #eef8f3;
  --color-camping-trip-100: #e5efea;
  --color-camping-trip-200: #d1ddd7;
  --color-camping-trip-300: #bac8c1;
  --color-camping-trip-400: #9aa9a2;
  --color-camping-trip-500: #7f8f88;
  --color-camping-trip-600: #66756e;
  --color-camping-trip-700: #4f5d57;
  --color-camping-trip-800: #3d4943;
  --color-camping-trip-900: #2e3833;
  --color-camping-trip-950: #1b231f;
  --color-robotic-gods: #9fa5b4;
  --color-robotic-gods-50: #f3f6ff;
  --color-robotic-gods-100: #e9edf7;
  --color-robotic-gods-200: #d5dae5;
  --color-robotic-gods-300: #bfc4d1;
  --color-robotic-gods-400: #9fa5b4;
  --color-robotic-gods-500: #838997;
  --color-robotic-gods-600: #686e7c;
  --color-robotic-gods-700: #525763;
  --color-robotic-gods-800: #3f434e;
  --color-robotic-gods-900: #30333c;
  --color-robotic-gods-950: #1d1f26;
  --color-icy-plains: #dcd7fe;
  --color-icy-plains-50: #f8f7ff;
  --color-icy-plains-100: #efedff;
  --color-icy-plains-200: #dcd7fe;
  --color-icy-plains-300: #c5c1e0;
  --color-icy-plains-400: #a4a0c3;
  --color-icy-plains-500: #8883a7;
  --color-icy-plains-600: #6d688a;
  --color-icy-plains-700: #565170;
  --color-icy-plains-800: #423e59;
  --color-icy-plains-900: #332f46;
  --color-icy-plains-950: #1f1d2d;
}