Woven to Lizard color palette

E4D2A3Woven 7E4700Milk Chocolate 5D3500Chocolate Fantasies E98C79Redolenc BF7269Döner Kebab 7B6839Lizard

Open in generator Export PNG, PDF, ASE…

About this palette

Woven to Lizard is a 6-color warm, earthy, vintage palette: #E4D2A3 (Woven), #7E4700 (Milk Chocolate), #5D3500 (Chocolate Fantasies), #E98C79 (Redolenc), #BF7269 (Döner Kebab), #7B6839 (Lizard). It mixes yellow, brown, red tones and feels warm overall. The strongest text pairing is #E4D2A3 on #5D3500 with a contrast ratio of 7.11:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Woven	rgb(228, 210, 163)	hsl(43, 55%, 77%)
Milk Chocolate	rgb(126, 71, 0)	hsl(34, 100%, 25%)
Chocolate Fantasies	rgb(93, 53, 0)	hsl(34, 100%, 18%)
Redolenc	rgb(233, 140, 121)	hsl(10, 72%, 69%)
Döner Kebab	rgb(191, 114, 105)	hsl(6, 40%, 58%)
Lizard	rgb(123, 104, 57)	hsl(43, 37%, 35%)

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.11:1 Very good#E4D2A3 on #5D3500
Aa7.11:1 Very good#5D3500 on #E4D2A3
Aa5.04:1 Good#E4D2A3 on #7E4700
Aa5.04:1 Good#7E4700 on #E4D2A3
Aa4.30:1 Poor#5D3500 on #E98C79
Aa4.30:1 Poor#E98C79 on #5D3500
Aa3.62:1 Poor#E4D2A3 on #7B6839
Aa3.62:1 Poor#7B6839 on #E4D2A3

Color blindness preview

CSS variables

/* Woven to Lizard — https://swatchly.xyz/palette/e4d2a3-7e4700-5d3500-e98c79-bf7269-7b6839 */
:root {
  --woven: #e4d2a3;
  --milk-chocolate: #7e4700;
  --chocolate-fantasies: #5d3500;
  --redolenc: #e98c79;
  --d-ner-kebab: #bf7269;
  --lizard: #7b6839;
}

Tailwind CSS v4

/* Woven to Lizard — https://swatchly.xyz/palette/e4d2a3-7e4700-5d3500-e98c79-bf7269-7b6839 */
@theme {
  --color-woven: #e4d2a3;
  --color-woven-50: #fcf2d7;
  --color-woven-100: #f2e7c9;
  --color-woven-200: #e4d2a3;
  --color-woven-300: #ccbc95;
  --color-woven-400: #ae9e72;
  --color-woven-500: #948356;
  --color-woven-600: #79693e;
  --color-woven-700: #62532c;
  --color-woven-800: #4e411e;
  --color-woven-900: #3c3214;
  --color-woven-950: #261e09;
  --color-milk-chocolate: #7e4700;
  --color-milk-chocolate-50: #fff3e8;
  --color-milk-chocolate-100: #ffe6d1;
  --color-milk-chocolate-200: #fdcda4;
  --color-milk-chocolate-300: #ebb585;
  --color-milk-chocolate-400: #cf945e;
  --color-milk-chocolate-500: #b37840;
  --color-milk-chocolate-600: #965e24;
  --color-milk-chocolate-700: #7e4700;
  --color-milk-chocolate-800: #633700;
  --color-milk-chocolate-900: #4d2900;
  --color-milk-chocolate-950: #321900;
  --color-chocolate-fantasies: #5d3500;
  --color-chocolate-fantasies-50: #fff3e7;
  --color-chocolate-fantasies-100: #ffe6cf;
  --color-chocolate-fantasies-200: #f4d0ae;
  --color-chocolate-fantasies-300: #e1b890;
  --color-chocolate-fantasies-400: #c3976b;
  --color-chocolate-fantasies-500: #a77a4d;
  --color-chocolate-fantasies-600: #8a6034;
  --color-chocolate-fantasies-700: #704a21;
  --color-chocolate-fantasies-800: #5d3500;
  --color-chocolate-fantasies-900: #452a0a;
  --color-chocolate-fantasies-950: #2c1904;
  --color-redolenc: #e98c79;
  --color-redolenc-50: #fff5f3;
  --color-redolenc-100: #ffeae5;
  --color-redolenc-200: #ffd0c6;
  --color-redolenc-300: #ffb0a0;
  --color-redolenc-400: #e98c79;
  --color-redolenc-500: #c96f5d;
  --color-redolenc-600: #a95443;
  --color-redolenc-700: #8b3d2e;
  --color-redolenc-800: #702c1f;
  --color-redolenc-900: #581f14;
  --color-redolenc-950: #391009;
  --color-d-ner-kebab: #bf7269;
  --color-d-ner-kebab-50: #fff3f1;
  --color-d-ner-kebab-100: #ffe6e3;
  --color-d-ner-kebab-200: #ffccc4;
  --color-d-ner-kebab-300: #f5b0a7;
  --color-d-ner-kebab-400: #da8e85;
  --color-d-ner-kebab-500: #bf7269;
  --color-d-ner-kebab-600: #a0574f;
  --color-d-ner-kebab-700: #84413b;
  --color-d-ner-kebab-800: #6a302a;
  --color-d-ner-kebab-900: #54231e;
  --color-d-ner-kebab-950: #361310;
  --color-lizard: #7b6839;
  --color-lizard-50: #fff4db;
  --color-lizard-100: #f7eacb;
  --color-lizard-200: #e5d6b1;
  --color-lizard-300: #d0bf94;
  --color-lizard-400: #b29e70;
  --color-lizard-500: #968353;
  --color-lizard-600: #7b6839;
  --color-lizard-700: #635228;
  --color-lizard-800: #4e3f1a;
  --color-lizard-900: #3d3010;
  --color-lizard-950: #271e06;
}