Evergreen to Vegetation Color Palette

About this palette

Evergreen to Vegetation is a 4-color cool, earthy, monochromatic, gradient palette: #1D5544 (Evergreen), #2A7B5D (Amazon), #38A276 (Bejewelled), #47CC91 (Vegetation). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #1D5544 on #47CC91 with a contrast ratio of 4.24:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Evergreen	rgb(29, 85, 68)	hsl(162, 49%, 22%)
Amazon	rgb(42, 123, 93)	hsl(158, 49%, 32%)
Bejewelled	rgb(56, 162, 118)	hsl(155, 49%, 43%)
Vegetation	rgb(71, 204, 145)	hsl(153, 57%, 54%)

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.

Aa4.24:1 Poor#1D5544 on #47CC91
Aa4.24:1 Poor#47CC91 on #1D5544

Color blindness preview

CSS variables

/* Evergreen to Vegetation — https://swatchly.xyz/palette/1d5544-2a7b5d-38a276-47cc91 */
:root {
  --evergreen: #1d5544;
  --amazon: #2a7b5d;
  --bejewelled: #38a276;
  --vegetation: #47cc91;
}

Tailwind CSS v4

/* Evergreen to Vegetation — https://swatchly.xyz/palette/1d5544-2a7b5d-38a276-47cc91 */
@theme {
  --color-evergreen: #1d5544;
  --color-evergreen-50: #dffdf1;
  --color-evergreen-100: #d2f4e7;
  --color-evergreen-200: #b9e2d2;
  --color-evergreen-300: #9fcfbd;
  --color-evergreen-400: #7db19e;
  --color-evergreen-500: #619784;
  --color-evergreen-600: #487e6b;
  --color-evergreen-700: #346756;
  --color-evergreen-800: #1d5544;
  --color-evergreen-900: #194134;
  --color-evergreen-950: #0c2a20;
  --color-amazon: #2a7b5d;
  --color-amazon-50: #dbffee;
  --color-amazon-100: #c8f8e1;
  --color-amazon-200: #ade6cc;
  --color-amazon-300: #8fd1b4;
  --color-amazon-400: #68b293;
  --color-amazon-500: #489677;
  --color-amazon-600: #2a7b5d;
  --color-amazon-700: #166348;
  --color-amazon-800: #054e37;
  --color-amazon-900: #003d2a;
  --color-amazon-950: #002619;
  --color-bejewelled: #38a276;
  --color-bejewelled-50: #e0ffee;
  --color-bejewelled-100: #c3fddf;
  --color-bejewelled-200: #a7edca;
  --color-bejewelled-300: #88d9b2;
  --color-bejewelled-400: #5dbc91;
  --color-bejewelled-500: #38a276;
  --color-bejewelled-600: #0c855b;
  --color-bejewelled-700: #006a47;
  --color-bejewelled-800: #005337;
  --color-bejewelled-900: #004029;
  --color-bejewelled-950: #002818;
  --color-vegetation: #47cc91;
  --color-vegetation-50: #effff6;
  --color-vegetation-100: #d5ffe7;
  --color-vegetation-200: #a7f7cc;
  --color-vegetation-300: #86e5b5;
  --color-vegetation-400: #47cc91;
  --color-vegetation-500: #1aac74;
  --color-vegetation-600: #008b5b;
  --color-vegetation-700: #006e47;
  --color-vegetation-800: #005536;
  --color-vegetation-900: #004028;
  --color-vegetation-950: #002716;
}