Autumn Crocodile to Toxic Latte Color Palette

About this palette

Autumn Crocodile to Toxic Latte is a 4-color cool, earthy, monochromatic palette: #467649 (Autumn Crocodile), #84B292 (Beau Monde), #024E2C (Moor-Monster), #D9F9DE (Toxic Latte). It mixes green, white tones and feels cool overall. The strongest text pairing is #024E2C on #D9F9DE with a contrast ratio of 8.72:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Autumn Crocodile	rgb(70, 118, 73)	hsl(124, 26%, 37%)
Beau Monde	rgb(132, 178, 146)	hsl(138, 23%, 61%)
Moor-Monster	rgb(2, 78, 44)	hsl(153, 95%, 16%)
Toxic Latte	rgb(217, 249, 222)	hsl(129, 73%, 91%)

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.72:1 Very good#024E2C on #D9F9DE
Aa8.72:1 Very good#D9F9DE on #024E2C
Aa4.70:1 Good#467649 on #D9F9DE
Aa4.70:1 Good#D9F9DE on #467649
Aa4.12:1 Poor#84B292 on #024E2C
Aa4.12:1 Poor#024E2C on #84B292

Color blindness preview

CSS variables

/* Autumn Crocodile to Toxic Latte — https://swatchly.xyz/palette/467649-84b292-024e2c-d9f9de */
:root {
  --autumn-crocodile: #467649;
  --beau-monde: #84b292;
  --moor-monster: #024e2c;
  --toxic-latte: #d9f9de;
}

Tailwind CSS v4

/* Autumn Crocodile to Toxic Latte — https://swatchly.xyz/palette/467649-84b292-024e2c-d9f9de */
@theme {
  --color-autumn-crocodile: #467649;
  --color-autumn-crocodile-50: #e2fee2;
  --color-autumn-crocodile-100: #d5f5d5;
  --color-autumn-crocodile-200: #bce2bd;
  --color-autumn-crocodile-300: #a1cda2;
  --color-autumn-crocodile-400: #7dae7f;
  --color-autumn-crocodile-500: #619263;
  --color-autumn-crocodile-600: #467649;
  --color-autumn-crocodile-700: #345e37;
  --color-autumn-crocodile-800: #254a28;
  --color-autumn-crocodile-900: #1a3a1c;
  --color-autumn-crocodile-950: #0d240f;
  --color-beau-monde: #84b292;
  --color-beau-monde-50: #e5feec;
  --color-beau-monde-100: #d9f6e1;
  --color-beau-monde-200: #c2e4cc;
  --color-beau-monde-300: #a8cfb4;
  --color-beau-monde-400: #84b292;
  --color-beau-monde-500: #699577;
  --color-beau-monde-600: #4e7a5c;
  --color-beau-monde-700: #396147;
  --color-beau-monde-800: #294c35;
  --color-beau-monde-900: #1d3b27;
  --color-beau-monde-950: #0f2517;
  --color-moor-monster: #024e2c;
  --color-moor-monster-50: #ddffe9;
  --color-moor-monster-100: #cff7dc;
  --color-moor-monster-200: #b5e5c6;
  --color-moor-monster-300: #98d0ac;
  --color-moor-monster-400: #73b18b;
  --color-moor-monster-500: #55956f;
  --color-moor-monster-600: #3b7a55;
  --color-moor-monster-700: #276140;
  --color-moor-monster-800: #024e2c;
  --color-moor-monster-900: #0e3b23;
  --color-moor-monster-950: #052514;
  --color-toxic-latte: #d9f9de;
  --color-toxic-latte-50: #edfeef;
  --color-toxic-latte-100: #d9f9de;
  --color-toxic-latte-200: #cbe2cf;
  --color-toxic-latte-300: #b1cbb6;
  --color-toxic-latte-400: #8fac94;
  --color-toxic-latte-500: #739078;
  --color-toxic-latte-600: #59755e;
  --color-toxic-latte-700: #435d48;
  --color-toxic-latte-800: #334937;
  --color-toxic-latte-900: #253829;
  --color-toxic-latte-950: #162318;
}