Avocado Stone to Walkie Chalkie color palette

4D4327Avocado Stone 6067A9Bellflower 589C72Natural Orchestra A7C2FBPastel Blue FEF5FFWalkie Chalkie

About this palette

Avocado Stone to Walkie Chalkie is a 5-color cool palette: #4D4327 (Avocado Stone), #6067A9 (Bellflower), #589C72 (Natural Orchestra), #A7C2FB (Pastel Blue), #FEF5FF (Walkie Chalkie). It mixes brown, purple, green, blue, white tones and feels cool overall. The strongest text pairing is #4D4327 on #FEF5FF with a contrast ratio of 9.18:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Avocado Stone	rgb(77, 67, 39)	hsl(44, 33%, 23%)
Bellflower	rgb(96, 103, 169)	hsl(234, 30%, 52%)
Natural Orchestra	rgb(88, 156, 114)	hsl(143, 28%, 48%)
Pastel Blue	rgb(167, 194, 251)	hsl(221, 91%, 82%)
Walkie Chalkie	rgb(254, 245, 255)	hsl(294, 100%, 98%)

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.

Aa9.18:1 Very good#4D4327 on #FEF5FF
Aa9.18:1 Very good#FEF5FF on #4D4327
Aa5.47:1 Good#4D4327 on #A7C2FB
Aa5.47:1 Good#A7C2FB on #4D4327
Aa4.92:1 Good#6067A9 on #FEF5FF
Aa4.92:1 Good#FEF5FF on #6067A9
Aa3.07:1 Poor#589C72 on #FEF5FF
Aa3.07:1 Poor#FEF5FF on #589C72

Color blindness preview

CSS variables

/* Avocado Stone to Walkie Chalkie — https://swatchly.xyz/palette/4d4327-6067a9-589c72-a7c2fb-fef5ff */
:root {
  --avocado-stone: #4d4327;
  --bellflower: #6067a9;
  --natural-orchestra: #589c72;
  --pastel-blue: #a7c2fb;
  --walkie-chalkie: #fef5ff;
}

Tailwind CSS v4

/* Avocado Stone to Walkie Chalkie — https://swatchly.xyz/palette/4d4327-6067a9-589c72-a7c2fb-fef5ff */
@theme {
  --color-avocado-stone: #4d4327;
  --color-avocado-stone-50: #fbf5e3;
  --color-avocado-stone-100: #f2ebd7;
  --color-avocado-stone-200: #e0d7bf;
  --color-avocado-stone-300: #cbc1a6;
  --color-avocado-stone-400: #aca184;
  --color-avocado-stone-500: #918668;
  --color-avocado-stone-600: #776c4f;
  --color-avocado-stone-700: #5f563b;
  --color-avocado-stone-800: #4d4327;
  --color-avocado-stone-900: #3b3320;
  --color-avocado-stone-950: #252011;
  --color-bellflower: #6067a9;
  --color-bellflower-50: #f2f4ff;
  --color-bellflower-100: #e7eaff;
  --color-bellflower-200: #cfd5ff;
  --color-bellflower-300: #b4bdfb;
  --color-bellflower-400: #949de0;
  --color-bellflower-500: #7981c6;
  --color-bellflower-600: #6067a9;
  --color-bellflower-700: #4b508c;
  --color-bellflower-800: #393e71;
  --color-bellflower-900: #2b2e5a;
  --color-bellflower-950: #1a1c3c;
  --color-natural-orchestra: #589c72;
  --color-natural-orchestra-50: #e1ffea;
  --color-natural-orchestra-100: #cff9dd;
  --color-natural-orchestra-200: #b6e8c7;
  --color-natural-orchestra-300: #9bd4ae;
  --color-natural-orchestra-400: #76b78d;
  --color-natural-orchestra-500: #589c72;
  --color-natural-orchestra-600: #3c8058;
  --color-natural-orchestra-700: #276742;
  --color-natural-orchestra-800: #175131;
  --color-natural-orchestra-900: #0c3f24;
  --color-natural-orchestra-950: #042714;
  --color-pastel-blue: #a7c2fb;
  --color-pastel-blue-50: #f1f6ff;
  --color-pastel-blue-100: #e3ecff;
  --color-pastel-blue-200: #c7d9ff;
  --color-pastel-blue-300: #a7c2fb;
  --color-pastel-blue-400: #89a2d7;
  --color-pastel-blue-500: #6d86bc;
  --color-pastel-blue-600: #546b9e;
  --color-pastel-blue-700: #405482;
  --color-pastel-blue-800: #2f4169;
  --color-pastel-blue-900: #233253;
  --color-pastel-blue-950: #141e37;
  --color-walkie-chalkie: #fef5ff;
  --color-walkie-chalkie-50: #fef5ff;
  --color-walkie-chalkie-100: #f1ecf2;
  --color-walkie-chalkie-200: #ded7de;
  --color-walkie-chalkie-300: #c7c0c8;
  --color-walkie-chalkie-400: #a79fa8;
  --color-walkie-chalkie-500: #8c848c;
  --color-walkie-chalkie-600: #706971;
  --color-walkie-chalkie-700: #59535a;
  --color-walkie-chalkie-800: #464047;
  --color-walkie-chalkie-900: #363136;
  --color-walkie-chalkie-950: #211e22;
}