Start generating

Madras to Fuzzy Sheep color palette

453918Madras576A59Italian Basil7D8565Green Relict98AE85FoliageAFCCB5Gum LeafF0EAD2Fuzzy Sheep
Open in generator Export PNG, PDF, ASE…

About this palette

Madras to Fuzzy Sheep is a 6-color muted, cool, earthy, gradient palette: #453918 (Madras), #576A59 (Italian Basil), #7D8565 (Green Relict), #98AE85 (Foliage), #AFCCB5 (Gum Leaf), #F0EAD2 (Fuzzy Sheep). It mixes brown, green, white tones and feels cool overall. The strongest text pairing is #453918 on #F0EAD2 with a contrast ratio of 9.40:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Madrasrgb(69, 57, 24)hsl(44, 48%, 18%)
Italian Basilrgb(87, 106, 89)hsl(126, 10%, 38%)
Green Relictrgb(125, 133, 101)hsl(75, 14%, 46%)
Foliagergb(152, 174, 133)hsl(92, 20%, 60%)
Gum Leafrgb(175, 204, 181)hsl(132, 22%, 74%)
Fuzzy Sheeprgb(240, 234, 210)hsl(48, 50%, 88%)

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.

  • Aa9.40:1 Very good#453918 on #F0EAD2
  • Aa9.40:1 Very good#F0EAD2 on #453918
  • Aa6.55:1 Good#453918 on #AFCCB5
  • Aa6.55:1 Good#AFCCB5 on #453918
  • Aa4.82:1 Good#576A59 on #F0EAD2
  • Aa4.82:1 Good#F0EAD2 on #576A59
  • Aa4.71:1 Good#453918 on #98AE85
  • Aa4.71:1 Good#98AE85 on #453918

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Madras to Fuzzy Sheep — https://swatchly.xyz/palette/453918-576a59-7d8565-98ae85-afccb5-f0ead2 */
:root {
  --madras: #453918;
  --italian-basil: #576a59;
  --green-relict: #7d8565;
  --foliage: #98ae85;
  --gum-leaf: #afccb5;
  --fuzzy-sheep: #f0ead2;
}

Tailwind CSS v4

/* Madras to Fuzzy Sheep — https://swatchly.xyz/palette/453918-576a59-7d8565-98ae85-afccb5-f0ead2 */
@theme {
  --color-madras: #453918;
  --color-madras-50: #fdf5e0;
  --color-madras-100: #f4ebd4;
  --color-madras-200: #e1d7bb;
  --color-madras-300: #ccc0a1;
  --color-madras-400: #afa280;
  --color-madras-500: #958865;
  --color-madras-600: #7c6f4d;
  --color-madras-700: #665a3a;
  --color-madras-800: #53482c;
  --color-madras-900: #453918;
  --color-madras-950: #2b2412;
  --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-green-relict: #7d8565;
  --color-green-relict-50: #f2f7e3;
  --color-green-relict-100: #e6ecd6;
  --color-green-relict-200: #d1d8be;
  --color-green-relict-300: #b9c1a4;
  --color-green-relict-400: #99a181;
  --color-green-relict-500: #7d8565;
  --color-green-relict-600: #646b4d;
  --color-green-relict-700: #4f553a;
  --color-green-relict-800: #3d432b;
  --color-green-relict-900: #2f3420;
  --color-green-relict-950: #1d2012;
  --color-foliage: #98ae85;
  --color-foliage-50: #effce4;
  --color-foliage-100: #e5f3d9;
  --color-foliage-200: #d0e1c2;
  --color-foliage-300: #b9cca9;
  --color-foliage-400: #98ae85;
  --color-foliage-500: #7c916a;
  --color-foliage-600: #627650;
  --color-foliage-700: #4c5e3b;
  --color-foliage-800: #3a492b;
  --color-foliage-900: #2b381f;
  --color-foliage-950: #192310;
  --color-gum-leaf: #afccb5;
  --color-gum-leaf-50: #ebfbee;
  --color-gum-leaf-100: #e0f2e4;
  --color-gum-leaf-200: #cbe0cf;
  --color-gum-leaf-300: #afccb5;
  --color-gum-leaf-400: #91ab96;
  --color-gum-leaf-500: #74907a;
  --color-gum-leaf-600: #5a7460;
  --color-gum-leaf-700: #455d4a;
  --color-gum-leaf-800: #344939;
  --color-gum-leaf-900: #26382a;
  --color-gum-leaf-950: #162319;
  --color-fuzzy-sheep: #f0ead2;
  --color-fuzzy-sheep-50: #f7f4e7;
  --color-fuzzy-sheep-100: #f0ead2;
  --color-fuzzy-sheep-200: #dbd6c5;
  --color-fuzzy-sheep-300: #c5c0ac;
  --color-fuzzy-sheep-400: #a6a18b;
  --color-fuzzy-sheep-500: #8b8670;
  --color-fuzzy-sheep-600: #716c57;
  --color-fuzzy-sheep-700: #5a5543;
  --color-fuzzy-sheep-800: #474232;
  --color-fuzzy-sheep-900: #363325;
  --color-fuzzy-sheep-950: #221f15;
}

Similar palettes