Egghead to Victorian Crown Color Palette

About this palette

Egghead to Victorian Crown is a 5-color warm, earthy, vintage, monochromatic palette: #E4C89F (Egghead), #68470C (Very Coffee), #FFE7BF (Creamy Apricot), #8E5E00 (Alligator), #C78A34 (Victorian Crown). It mixes yellow, brown, orange tones and feels warm overall. The strongest text pairing is #68470C on #FFE7BF with a contrast ratio of 6.99:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Egghead	rgb(228, 200, 159)	hsl(36, 56%, 76%)
Very Coffee	rgb(104, 71, 12)	hsl(38, 79%, 23%)
Creamy Apricot	rgb(255, 231, 191)	hsl(38, 100%, 87%)
Alligator	rgb(142, 94, 0)	hsl(40, 100%, 28%)
Victorian Crown	rgb(199, 138, 52)	hsl(35, 59%, 49%)

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.

Aa6.99:1 Good#68470C on #FFE7BF
Aa6.99:1 Good#FFE7BF on #68470C
Aa5.23:1 Good#E4C89F on #68470C
Aa5.23:1 Good#68470C on #E4C89F
Aa4.65:1 Good#FFE7BF on #8E5E00
Aa4.65:1 Good#8E5E00 on #FFE7BF
Aa3.48:1 Poor#E4C89F on #8E5E00
Aa3.48:1 Poor#8E5E00 on #E4C89F

Color blindness preview

CSS variables

/* Egghead to Victorian Crown — https://swatchly.xyz/palette/e4c89f-68470c-ffe7bf-8e5e00-c78a34 */
:root {
  --egghead: #e4c89f;
  --very-coffee: #68470c;
  --creamy-apricot: #ffe7bf;
  --alligator: #8e5e00;
  --victorian-crown: #c78a34;
}

Tailwind CSS v4

/* Egghead to Victorian Crown — https://swatchly.xyz/palette/e4c89f-68470c-ffe7bf-8e5e00-c78a34 */
@theme {
  --color-egghead: #e4c89f;
  --color-egghead-50: #fcebd2;
  --color-egghead-100: #f2dfc3;
  --color-egghead-200: #e4c89f;
  --color-egghead-300: #ccb490;
  --color-egghead-400: #b09670;
  --color-egghead-500: #967d56;
  --color-egghead-600: #7d643f;
  --color-egghead-700: #66502e;
  --color-egghead-800: #523f20;
  --color-egghead-900: #403016;
  --color-egghead-950: #291d0a;
  --color-very-coffee: #68470c;
  --color-very-coffee-50: #fff3e3;
  --color-very-coffee-100: #ffe7c7;
  --color-very-coffee-200: #eed1a9;
  --color-very-coffee-300: #d9b88a;
  --color-very-coffee-400: #bb9763;
  --color-very-coffee-500: #9e7a45;
  --color-very-coffee-600: #805f2b;
  --color-very-coffee-700: #68470c;
  --color-very-coffee-800: #51370c;
  --color-very-coffee-900: #3f2a05;
  --color-very-coffee-950: #281902;
  --color-creamy-apricot: #ffe7bf;
  --color-creamy-apricot-50: #fff3df;
  --color-creamy-apricot-100: #ffe7bf;
  --color-creamy-apricot-200: #e6d4b7;
  --color-creamy-apricot-300: #d1be9d;
  --color-creamy-apricot-400: #b49e7a;
  --color-creamy-apricot-500: #98835e;
  --color-creamy-apricot-600: #7d6845;
  --color-creamy-apricot-700: #655232;
  --color-creamy-apricot-800: #504023;
  --color-creamy-apricot-900: #3e3018;
  --color-creamy-apricot-950: #271d0c;
  --color-alligator: #8e5e00;
  --color-alligator-50: #fff3e4;
  --color-alligator-100: #ffe7c7;
  --color-alligator-200: #f7cf9a;
  --color-alligator-300: #e4b779;
  --color-alligator-400: #c7954f;
  --color-alligator-500: #ab792c;
  --color-alligator-600: #8e5e00;
  --color-alligator-700: #714a00;
  --color-alligator-800: #593900;
  --color-alligator-900: #452c00;
  --color-alligator-950: #2c1a00;
  --color-victorian-crown: #c78a34;
  --color-victorian-crown-50: #ffefdc;
  --color-victorian-crown-100: #ffe1bd;
  --color-victorian-crown-200: #f9c78a;
  --color-victorian-crown-300: #e5ad66;
  --color-victorian-crown-400: #c78a34;
  --color-victorian-crown-500: #ab700d;
  --color-victorian-crown-600: #8c5a00;
  --color-victorian-crown-700: #704700;
  --color-victorian-crown-800: #593700;
  --color-victorian-crown-900: #462b00;
  --color-victorian-crown-950: #2e1a00;
}