Sour to Greenhorn Color Palette

About this palette

Sour to Greenhorn is a 5-color pastel, light, cool palette: #E7EFB9 (Sour), #E8F3FF (Cotton Boll), #CED2FF (Icy Plains), #ACD9D1 (Whirlpool), #B6CE99 (Greenhorn). It mixes green, white, purple, turquoise tones and feels cool overall. The strongest text pairing is #E8F3FF on #B6CE99 with a contrast ratio of 1.52:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sour	rgb(231, 239, 185)	hsl(69, 63%, 83%)
Cotton Boll	rgb(232, 243, 255)	hsl(211, 100%, 95%)
Icy Plains	rgb(206, 210, 255)	hsl(235, 100%, 90%)
Whirlpool	rgb(172, 217, 209)	hsl(169, 37%, 76%)
Greenhorn	rgb(182, 206, 153)	hsl(87, 35%, 70%)

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.

Color blindness preview

CSS variables

/* Sour to Greenhorn — https://swatchly.xyz/palette/e7efb9-e8f3ff-ced2ff-acd9d1-b6ce99 */
:root {
  --sour: #e7efb9;
  --cotton-boll: #e8f3ff;
  --icy-plains: #ced2ff;
  --whirlpool: #acd9d1;
  --greenhorn: #b6ce99;
}

Tailwind CSS v4

/* Sour to Greenhorn — https://swatchly.xyz/palette/e7efb9-e8f3ff-ced2ff-acd9d1-b6ce99 */
@theme {
  --color-sour: #e7efb9;
  --color-sour-50: #f2f7d9;
  --color-sour-100: #e7efb9;
  --color-sour-200: #d4dab3;
  --color-sour-300: #bec498;
  --color-sour-400: #9fa675;
  --color-sour-500: #848b59;
  --color-sour-600: #6a7040;
  --color-sour-700: #545a2d;
  --color-sour-800: #42461f;
  --color-sour-900: #323614;
  --color-sour-950: #1f2109;
  --color-cotton-boll: #e8f3ff;
  --color-cotton-boll-50: #e8f3ff;
  --color-cotton-boll-100: #e2e9f1;
  --color-cotton-boll-200: #ced6df;
  --color-cotton-boll-300: #b7c0ca;
  --color-cotton-boll-400: #98a2ac;
  --color-cotton-boll-500: #7d8792;
  --color-cotton-boll-600: #646d77;
  --color-cotton-boll-700: #4e565f;
  --color-cotton-boll-800: #3c434b;
  --color-cotton-boll-900: #2d343a;
  --color-cotton-boll-950: #1b2025;
  --color-icy-plains: #ced2ff;
  --color-icy-plains-50: #f2f3ff;
  --color-icy-plains-100: #e6e8ff;
  --color-icy-plains-200: #ced2ff;
  --color-icy-plains-300: #b9bce2;
  --color-icy-plains-400: #999dc6;
  --color-icy-plains-500: #7e81ab;
  --color-icy-plains-600: #65678e;
  --color-icy-plains-700: #4f5175;
  --color-icy-plains-800: #3d3f5e;
  --color-icy-plains-900: #2f304a;
  --color-icy-plains-950: #1c1d30;
  --color-whirlpool: #acd9d1;
  --color-whirlpool-50: #dbf5f0;
  --color-whirlpool-100: #cdebe5;
  --color-whirlpool-200: #acd9d1;
  --color-whirlpool-300: #9cc3bc;
  --color-whirlpool-400: #7ba69e;
  --color-whirlpool-500: #618c85;
  --color-whirlpool-600: #49726c;
  --color-whirlpool-700: #365c56;
  --color-whirlpool-800: #284a44;
  --color-whirlpool-900: #1c3935;
  --color-whirlpool-950: #0f2420;
  --color-greenhorn: #b6ce99;
  --color-greenhorn-50: #effde0;
  --color-greenhorn-100: #e5f4d3;
  --color-greenhorn-200: #d0e2bb;
  --color-greenhorn-300: #b6ce99;
  --color-greenhorn-400: #97ad7c;
  --color-greenhorn-500: #7b915f;
  --color-greenhorn-600: #617645;
  --color-greenhorn-700: #4b5e31;
  --color-greenhorn-800: #394922;
  --color-greenhorn-900: #2b3817;
  --color-greenhorn-950: #19230b;
}