Bamboo Forest to Purple Protégé color palette

B4A87EBamboo Forest DED3ACStardust 17273EEternal Darkness 5C7CB8Fisher King 5B386DPurple Protégé

About this palette

Bamboo Forest to Purple Protégé is a 5-color cool, vintage palette: #B4A87E (Bamboo Forest), #DED3AC (Stardust), #17273E (Eternal Darkness), #5C7CB8 (Fisher King), #5B386D (Purple Protégé). It mixes yellow, blue, purple tones and feels cool overall. The strongest text pairing is #DED3AC on #17273E with a contrast ratio of 10.04:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bamboo Forest	rgb(180, 168, 126)	hsl(47, 26%, 60%)
Stardust	rgb(222, 211, 172)	hsl(47, 43%, 77%)
Eternal Darkness	rgb(23, 39, 62)	hsl(215, 46%, 17%)
Fisher King	rgb(92, 124, 184)	hsl(219, 39%, 54%)
Purple Protégé	rgb(91, 56, 109)	hsl(280, 32%, 32%)

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.

Aa10.04:1 Very good#DED3AC on #17273E
Aa10.04:1 Very good#17273E on #DED3AC
Aa6.33:1 Good#B4A87E on #17273E
Aa6.33:1 Good#17273E on #B4A87E
Aa6.28:1 Good#DED3AC on #5B386D
Aa6.28:1 Good#5B386D on #DED3AC
Aa3.96:1 Poor#B4A87E on #5B386D
Aa3.96:1 Poor#5B386D on #B4A87E

Color blindness preview

CSS variables

/* Bamboo Forest to Purple Protégé — https://swatchly.xyz/palette/b4a87e-ded3ac-17273e-5c7cb8-5b386d */
:root {
  --bamboo-forest: #b4a87e;
  --stardust: #ded3ac;
  --eternal-darkness: #17273e;
  --fisher-king: #5c7cb8;
  --purple-prot-g: #5b386d;
}

Tailwind CSS v4

/* Bamboo Forest to Purple Protégé — https://swatchly.xyz/palette/b4a87e-ded3ac-17273e-5c7cb8-5b386d */
@theme {
  --color-bamboo-forest: #b4a87e;
  --color-bamboo-forest-50: #fef8e0;
  --color-bamboo-forest-100: #f6efd5;
  --color-bamboo-forest-200: #e5dcbd;
  --color-bamboo-forest-300: #d1c7a3;
  --color-bamboo-forest-400: #b4a87e;
  --color-bamboo-forest-500: #978b62;
  --color-bamboo-forest-600: #7b7048;
  --color-bamboo-forest-700: #625833;
  --color-bamboo-forest-800: #4d4424;
  --color-bamboo-forest-900: #3b3318;
  --color-bamboo-forest-950: #241f0b;
  --color-stardust: #ded3ac;
  --color-stardust-50: #f8f2dc;
  --color-stardust-100: #eee7ce;
  --color-stardust-200: #ded3ac;
  --color-stardust-300: #c7bd9c;
  --color-stardust-400: #a99f7b;
  --color-stardust-500: #8e8460;
  --color-stardust-600: #746a47;
  --color-stardust-700: #5d5435;
  --color-stardust-800: #4a4226;
  --color-stardust-900: #39331b;
  --color-stardust-950: #241f0e;
  --color-eternal-darkness: #17273e;
  --color-eternal-darkness-50: #eff6ff;
  --color-eternal-darkness-100: #dfecff;
  --color-eternal-darkness-200: #c9d9f0;
  --color-eternal-darkness-300: #b1c2dc;
  --color-eternal-darkness-400: #90a3bf;
  --color-eternal-darkness-500: #7689a5;
  --color-eternal-darkness-600: #5d708b;
  --color-eternal-darkness-700: #4a5b73;
  --color-eternal-darkness-800: #3a495f;
  --color-eternal-darkness-900: #2d3a4d;
  --color-eternal-darkness-950: #17273e;
  --color-fisher-king: #5c7cb8;
  --color-fisher-king-50: #edf4ff;
  --color-fisher-king-100: #dce8ff;
  --color-fisher-king-200: #bbd3ff;
  --color-fisher-king-300: #9cbbf3;
  --color-fisher-king-400: #7899d6;
  --color-fisher-king-500: #5c7cb8;
  --color-fisher-king-600: #45639b;
  --color-fisher-king-700: #344e81;
  --color-fisher-king-800: #263d69;
  --color-fisher-king-900: #1c2f54;
  --color-fisher-king-950: #0f1d38;
  --color-purple-prot-g: #5b386d;
  --color-purple-prot-g-50: #faf1ff;
  --color-purple-prot-g-100: #f5e4ff;
  --color-purple-prot-g-200: #e8cbf9;
  --color-purple-prot-g-300: #d5b3e8;
  --color-purple-prot-g-400: #b894cc;
  --color-purple-prot-g-500: #9e79b3;
  --color-purple-prot-g-600: #846097;
  --color-purple-prot-g-700: #6d4b7f;
  --color-purple-prot-g-800: #5b386d;
  --color-purple-prot-g-900: #462c53;
  --color-purple-prot-g-950: #2d1a37;
}