Italian Basil to Toad color palette

576A59Italian Basil DBEFDCVanishing Point ABC0A9Meadow Morn 3D4B3DMountain View 748F73Toad

About this palette

Italian Basil to Toad is a 5-color muted, cool, earthy palette: #576A59 (Italian Basil), #DBEFDC (Vanishing Point), #ABC0A9 (Meadow Morn), #3D4B3D (Mountain View), #748F73 (Toad). It mixes green, white, gray tones and feels cool overall. The strongest text pairing is #DBEFDC on #3D4B3D with a contrast ratio of 7.65:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Italian Basil	rgb(87, 106, 89)	hsl(126, 10%, 38%)
Vanishing Point	rgb(219, 239, 220)	hsl(123, 38%, 90%)
Meadow Morn	rgb(171, 192, 169)	hsl(115, 15%, 71%)
Mountain View	rgb(61, 75, 61)	hsl(120, 10%, 27%)
Toad	rgb(116, 143, 115)	hsl(118, 11%, 51%)

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.

Aa7.65:1 Very good#DBEFDC on #3D4B3D
Aa7.65:1 Very good#3D4B3D on #DBEFDC
Aa4.82:1 Good#576A59 on #DBEFDC
Aa4.82:1 Good#DBEFDC on #576A59
Aa4.77:1 Good#ABC0A9 on #3D4B3D
Aa4.77:1 Good#3D4B3D on #ABC0A9
Aa3.00:1 Poor#576A59 on #ABC0A9
Aa3.00:1 Poor#ABC0A9 on #576A59

Color blindness preview

CSS variables

/* Italian Basil to Toad — https://swatchly.xyz/palette/576a59-dbefdc-abc0a9-3d4b3d-748f73 */
:root {
  --italian-basil: #576a59;
  --vanishing-point: #dbefdc;
  --meadow-morn: #abc0a9;
  --mountain-view: #3d4b3d;
  --toad: #748f73;
}

Tailwind CSS v4

/* Italian Basil to Toad — https://swatchly.xyz/palette/576a59-dbefdc-abc0a9-3d4b3d-748f73 */
@theme {
  --color-italian-basil: #576a59;
  --color-italian-basil-50: #edf9ee;
  --color-italian-basil-100: #e0eee2;
  --color-italian-basil-200: #c9dacb;
  --color-italian-basil-300: #b0c2b2;
  --color-italian-basil-400: #8ea290;
  --color-italian-basil-500: #728674;
  --color-italian-basil-600: #576a59;
  --color-italian-basil-700: #445445;
  --color-italian-basil-800: #344235;
  --color-italian-basil-900: #273328;
  --color-italian-basil-950: #172018;
  --color-vanishing-point: #dbefdc;
  --color-vanishing-point-50: #ebf7ec;
  --color-vanishing-point-100: #dbefdc;
  --color-vanishing-point-200: #cbdacc;
  --color-vanishing-point-300: #b4c5b5;
  --color-vanishing-point-400: #94a695;
  --color-vanishing-point-500: #798b7a;
  --color-vanishing-point-600: #607161;
  --color-vanishing-point-700: #4a5a4b;
  --color-vanishing-point-800: #39473a;
  --color-vanishing-point-900: #2b362c;
  --color-vanishing-point-950: #19221a;
  --color-meadow-morn: #abc0a9;
  --color-meadow-morn-50: #e9f5e7;
  --color-meadow-morn-100: #dceadb;
  --color-meadow-morn-200: #c6d6c4;
  --color-meadow-morn-300: #abc0a9;
  --color-meadow-morn-400: #8ea28c;
  --color-meadow-morn-500: #748872;
  --color-meadow-morn-600: #5c6e5a;
  --color-meadow-morn-700: #485846;
  --color-meadow-morn-800: #374636;
  --color-meadow-morn-900: #2a3729;
  --color-meadow-morn-950: #192218;
  --color-mountain-view: #3d4b3d;
  --color-mountain-view-50: #eff8ef;
  --color-mountain-view-100: #e4efe4;
  --color-mountain-view-200: #cfdccf;
  --color-mountain-view-300: #b8c6b8;
  --color-mountain-view-400: #99a899;
  --color-mountain-view-500: #7e8e7e;
  --color-mountain-view-600: #657465;
  --color-mountain-view-700: #505d50;
  --color-mountain-view-800: #3d4b3d;
  --color-mountain-view-900: #2f392f;
  --color-mountain-view-950: #1d241d;
  --color-toad: #748f73;
  --color-toad-50: #eafbea;
  --color-toad-100: #dff1de;
  --color-toad-200: #c9dfc8;
  --color-toad-300: #b1c9b0;
  --color-toad-400: #90aa8f;
  --color-toad-500: #748f73;
  --color-toad-600: #5a7459;
  --color-toad-700: #455d45;
  --color-toad-800: #344934;
  --color-toad-900: #273826;
  --color-toad-950: #172316;
}