Beige to Enchanted Lavender Color Palette

About this palette

Beige to Enchanted Lavender is a 5-color cool, earthy, vintage palette: #E2D8A7 (Beige), #302B00 (Secret Passage), #8F74A0 (Aster), #00633A (Ficus Elastica), #BFA0D6 (Enchanted Lavender). It mixes yellow, brown, purple, green tones and feels cool overall. The strongest text pairing is #E2D8A7 on #302B00 with a contrast ratio of 9.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beige	rgb(226, 216, 167)	hsl(50, 50%, 77%)
Secret Passage	rgb(48, 43, 0)	hsl(54, 100%, 9%)
Aster	rgb(143, 116, 160)	hsl(277, 19%, 54%)
Ficus Elastica	rgb(0, 99, 58)	hsl(155, 100%, 19%)
Enchanted Lavender	rgb(191, 160, 214)	hsl(274, 40%, 73%)

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.93:1 Very good#E2D8A7 on #302B00
Aa9.93:1 Very good#302B00 on #E2D8A7
Aa6.26:1 Good#302B00 on #BFA0D6
Aa6.26:1 Good#BFA0D6 on #302B00
Aa5.14:1 Good#E2D8A7 on #00633A
Aa5.14:1 Good#00633A on #E2D8A7
Aa3.52:1 Poor#302B00 on #8F74A0
Aa3.52:1 Poor#8F74A0 on #302B00

Color blindness preview

CSS variables

/* Beige to Enchanted Lavender — https://swatchly.xyz/palette/e2d8a7-302b00-8f74a0-00633a-bfa0d6 */
:root {
  --beige: #e2d8a7;
  --secret-passage: #302b00;
  --aster: #8f74a0;
  --ficus-elastica: #00633a;
  --enchanted-lavender: #bfa0d6;
}

Tailwind CSS v4

/* Beige to Enchanted Lavender — https://swatchly.xyz/palette/e2d8a7-302b00-8f74a0-00633a-bfa0d6 */
@theme {
  --color-beige: #e2d8a7;
  --color-beige-50: #fbf6db;
  --color-beige-100: #f2eccd;
  --color-beige-200: #e2d8a7;
  --color-beige-300: #cac198;
  --color-beige-400: #aba275;
  --color-beige-500: #908758;
  --color-beige-600: #756c40;
  --color-beige-700: #5e562d;
  --color-beige-800: #4a431e;
  --color-beige-900: #393314;
  --color-beige-950: #241f09;
  --color-secret-passage: #302b00;
  --color-secret-passage-50: #f9f7de;
  --color-secret-passage-100: #efedd1;
  --color-secret-passage-200: #ddd9b8;
  --color-secret-passage-300: #c7c39d;
  --color-secret-passage-400: #a6a278;
  --color-secret-passage-500: #89855a;
  --color-secret-passage-600: #6d6840;
  --color-secret-passage-700: #54502c;
  --color-secret-passage-800: #3f3c1d;
  --color-secret-passage-900: #302b00;
  --color-secret-passage-950: #1b1908;
  --color-aster: #8f74a0;
  --color-aster-50: #f9f0ff;
  --color-aster-100: #f3e1ff;
  --color-aster-200: #e1cbef;
  --color-aster-300: #cbb2db;
  --color-aster-400: #ab90bd;
  --color-aster-500: #8f74a0;
  --color-aster-600: #755b85;
  --color-aster-700: #5e476c;
  --color-aster-800: #4a3657;
  --color-aster-900: #3a2945;
  --color-aster-950: #25192c;
  --color-ficus-elastica: #00633a;
  --color-ficus-elastica-50: #ddffe9;
  --color-ficus-elastica-100: #c9f9da;
  --color-ficus-elastica-200: #ade7c3;
  --color-ficus-elastica-300: #8ed2a9;
  --color-ficus-elastica-400: #67b387;
  --color-ficus-elastica-500: #47976a;
  --color-ficus-elastica-600: #2a7b51;
  --color-ficus-elastica-700: #00633a;
  --color-ficus-elastica-800: #034d2d;
  --color-ficus-elastica-900: #003c21;
  --color-ficus-elastica-950: #002613;
  --color-enchanted-lavender: #bfa0d6;
  --color-enchanted-lavender-50: #fcf8ff;
  --color-enchanted-lavender-100: #f7eeff;
  --color-enchanted-lavender-200: #edd7fd;
  --color-enchanted-lavender-300: #dac0ed;
  --color-enchanted-lavender-400: #bfa0d6;
  --color-enchanted-lavender-500: #a083b6;
  --color-enchanted-lavender-600: #836698;
  --color-enchanted-lavender-700: #694e7c;
  --color-enchanted-lavender-800: #523b62;
  --color-enchanted-lavender-900: #3f2b4c;
  --color-enchanted-lavender-950: #261830;
}