Exit Light to Chestnut Color Palette

About this palette

Exit Light to Chestnut is a 5-color cool palette: #4CBD40 (Exit Light), #CDEEFF (Veiling Waterfalls), #BB3E0A (Copper Hopper), #CBA4EF (Lilac), #732600 (Chestnut). It mixes green, blue, red, purple, brown tones and feels cool overall. The strongest text pairing is #CDEEFF on #732600 with a contrast ratio of 8.61:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Exit Light	rgb(76, 189, 64)	hsl(114, 49%, 50%)
Veiling Waterfalls	rgb(205, 238, 255)	hsl(200, 100%, 90%)
Copper Hopper	rgb(187, 62, 10)	hsl(18, 90%, 39%)
Lilac	rgb(203, 164, 239)	hsl(271, 70%, 79%)
Chestnut	rgb(115, 38, 0)	hsl(20, 100%, 23%)

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.

Aa8.61:1 Very good#CDEEFF on #732600
Aa8.61:1 Very good#732600 on #CDEEFF
Aa5.03:1 Good#CBA4EF on #732600
Aa5.03:1 Good#732600 on #CBA4EF
Aa4.54:1 Good#CDEEFF on #BB3E0A
Aa4.54:1 Good#BB3E0A on #CDEEFF
Aa4.32:1 Poor#4CBD40 on #732600
Aa4.32:1 Poor#732600 on #4CBD40

Color blindness preview

CSS variables

/* Exit Light to Chestnut — https://swatchly.xyz/palette/4cbd40-cdeeff-bb3e0a-cba4ef-732600 */
:root {
  --exit-light: #4cbd40;
  --veiling-waterfalls: #cdeeff;
  --copper-hopper: #bb3e0a;
  --lilac: #cba4ef;
  --chestnut: #732600;
}

Tailwind CSS v4

/* Exit Light to Chestnut — https://swatchly.xyz/palette/4cbd40-cdeeff-bb3e0a-cba4ef-732600 */
@theme {
  --color-exit-light: #4cbd40;
  --color-exit-light-50: #e1ffdd;
  --color-exit-light-100: #bfffb6;
  --color-exit-light-200: #9fef95;
  --color-exit-light-300: #7eda73;
  --color-exit-light-400: #4cbd40;
  --color-exit-light-500: #2aa01c;
  --color-exit-light-600: #118200;
  --color-exit-light-700: #0b6800;
  --color-exit-light-800: #075100;
  --color-exit-light-900: #043f00;
  --color-exit-light-950: #012800;
  --color-veiling-waterfalls: #cdeeff;
  --color-veiling-waterfalls-50: #e4f6ff;
  --color-veiling-waterfalls-100: #cdeeff;
  --color-veiling-waterfalls-200: #c1d9e6;
  --color-veiling-waterfalls-300: #a8c4d2;
  --color-veiling-waterfalls-400: #87a5b5;
  --color-veiling-waterfalls-500: #6c8a9a;
  --color-veiling-waterfalls-600: #53707f;
  --color-veiling-waterfalls-700: #3f5a67;
  --color-veiling-waterfalls-800: #2f4652;
  --color-veiling-waterfalls-900: #223640;
  --color-veiling-waterfalls-950: #132128;
  --color-copper-hopper: #bb3e0a;
  --color-copper-hopper-50: #fff2ee;
  --color-copper-hopper-100: #ffe5dd;
  --color-copper-hopper-200: #ffcbba;
  --color-copper-hopper-300: #ffaa8e;
  --color-copper-hopper-400: #f67a52;
  --color-copper-hopper-500: #da5b30;
  --color-copper-hopper-600: #bb3e0a;
  --color-copper-hopper-700: #972e00;
  --color-copper-hopper-800: #782200;
  --color-copper-hopper-900: #5e1900;
  --color-copper-hopper-950: #3d0d00;
  --color-lilac: #cba4ef;
  --color-lilac-50: #f5ecff;
  --color-lilac-100: #eedcff;
  --color-lilac-200: #dfc1fd;
  --color-lilac-300: #cba4ef;
  --color-lilac-400: #ac87ce;
  --color-lilac-500: #936db4;
  --color-lilac-600: #795598;
  --color-lilac-700: #62417e;
  --color-lilac-800: #4f3267;
  --color-lilac-900: #3e2553;
  --color-lilac-950: #281536;
  --color-chestnut: #732600;
  --color-chestnut-50: #fff2ed;
  --color-chestnut-100: #ffe5db;
  --color-chestnut-200: #ffcab6;
  --color-chestnut-300: #f9ab8f;
  --color-chestnut-400: #dd896a;
  --color-chestnut-500: #c16c4c;
  --color-chestnut-600: #a25233;
  --color-chestnut-700: #863d20;
  --color-chestnut-800: #732600;
  --color-chestnut-900: #562009;
  --color-chestnut-950: #381203;
}