Lush Bamboo to Elite Teal Color Palette

About this palette

Lush Bamboo to Elite Teal is a 5-color cool palette: #B6B500 (Lush Bamboo), #FFD1CF (Girlie), #7D63BF (Lavish Spending), #4C4590 (Blueberry), #003132 (Elite Teal). It mixes yellow, pink, purple, turquoise tones and feels cool overall. The strongest text pairing is #FFD1CF on #003132 with a contrast ratio of 10.28:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lush Bamboo	rgb(182, 181, 0)	hsl(60, 100%, 36%)
Girlie	rgb(255, 209, 207)	hsl(2, 100%, 91%)
Lavish Spending	rgb(125, 99, 191)	hsl(257, 42%, 57%)
Blueberry	rgb(76, 69, 144)	hsl(246, 35%, 42%)
Elite Teal	rgb(0, 49, 50)	hsl(181, 100%, 10%)

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.28:1 Very good#FFD1CF on #003132
Aa10.28:1 Very good#003132 on #FFD1CF
Aa6.46:1 Good#B6B500 on #003132
Aa6.46:1 Good#003132 on #B6B500
Aa5.96:1 Good#FFD1CF on #4C4590
Aa5.96:1 Good#4C4590 on #FFD1CF
Aa3.75:1 Poor#B6B500 on #4C4590
Aa3.75:1 Poor#4C4590 on #B6B500

Color blindness preview

CSS variables

/* Lush Bamboo to Elite Teal — https://swatchly.xyz/palette/b6b500-ffd1cf-7d63bf-4c4590-003132 */
:root {
  --lush-bamboo: #b6b500;
  --girlie: #ffd1cf;
  --lavish-spending: #7d63bf;
  --blueberry: #4c4590;
  --elite-teal: #003132;
}

Tailwind CSS v4

/* Lush Bamboo to Elite Teal — https://swatchly.xyz/palette/b6b500-ffd1cf-7d63bf-4c4590-003132 */
@theme {
  --color-lush-bamboo: #b6b500;
  --color-lush-bamboo-50: #fdffbe;
  --color-lush-bamboo-100: #f6f8ae;
  --color-lush-bamboo-200: #e5e78d;
  --color-lush-bamboo-300: #d2d267;
  --color-lush-bamboo-400: #b6b500;
  --color-lush-bamboo-500: #979600;
  --color-lush-bamboo-600: #797800;
  --color-lush-bamboo-700: #5f5f00;
  --color-lush-bamboo-800: #4a4900;
  --color-lush-bamboo-900: #373700;
  --color-lush-bamboo-950: #212100;
  --color-girlie: #ffd1cf;
  --color-girlie-50: #fff7f7;
  --color-girlie-100: #ffebea;
  --color-girlie-200: #ffd1cf;
  --color-girlie-300: #e1bcba;
  --color-girlie-400: #c39a98;
  --color-girlie-500: #a77d7b;
  --color-girlie-600: #896261;
  --color-girlie-700: #6f4b4a;
  --color-girlie-800: #583938;
  --color-girlie-900: #452b2a;
  --color-girlie-950: #2c1a19;
  --color-lavish-spending: #7d63bf;
  --color-lavish-spending-50: #f5f3ff;
  --color-lavish-spending-100: #eeeaff;
  --color-lavish-spending-200: #ddd5ff;
  --color-lavish-spending-300: #cabbff;
  --color-lavish-spending-400: #af98f3;
  --color-lavish-spending-500: #967dda;
  --color-lavish-spending-600: #7d63bf;
  --color-lavish-spending-700: #644ba0;
  --color-lavish-spending-800: #4f3883;
  --color-lavish-spending-900: #3d2868;
  --color-lavish-spending-950: #261745;
  --color-blueberry: #4c4590;
  --color-blueberry-50: #f4f4ff;
  --color-blueberry-100: #e8e9ff;
  --color-blueberry-200: #d1d2ff;
  --color-blueberry-300: #b8b7ff;
  --color-blueberry-400: #9895e5;
  --color-blueberry-500: #7c78c8;
  --color-blueberry-600: #625da9;
  --color-blueberry-700: #4c4590;
  --color-blueberry-800: #3b3671;
  --color-blueberry-900: #2d285a;
  --color-blueberry-950: #1b183b;
  --color-elite-teal: #003132;
  --color-elite-teal-50: #e2fbfb;
  --color-elite-teal-100: #d5f2f2;
  --color-elite-teal-200: #bddfdf;
  --color-elite-teal-300: #a3caca;
  --color-elite-teal-400: #7ea9aa;
  --color-elite-teal-500: #608c8c;
  --color-elite-teal-600: #456f70;
  --color-elite-teal-700: #305657;
  --color-elite-teal-800: #204141;
  --color-elite-teal-900: #003132;
  --color-elite-teal-950: #0a1c1c;
}