Buttered to Alligator Gladiator Color Palette

About this palette

Buttered to Alligator Gladiator is a 4-color vintage palette: #E6E5BE (Buttered), #B69DE8 (Dreamy Candy Forest), #7F76A3 (Aster), #4B491A (Alligator Gladiator). It mixes yellow, purple, brown tones and feels balanced overall. The strongest text pairing is #E6E5BE on #4B491A with a contrast ratio of 7.20:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Buttered	rgb(230, 229, 190)	hsl(59, 44%, 82%)
Dreamy Candy Forest	rgb(182, 157, 232)	hsl(260, 62%, 76%)
Aster	rgb(127, 118, 163)	hsl(252, 20%, 55%)
Alligator Gladiator	rgb(75, 73, 26)	hsl(58, 49%, 20%)

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.20:1 Very good#E6E5BE on #4B491A
Aa7.20:1 Very good#4B491A on #E6E5BE
Aa3.96:1 Poor#B69DE8 on #4B491A
Aa3.96:1 Poor#4B491A on #B69DE8
Aa3.25:1 Poor#E6E5BE on #7F76A3
Aa3.25:1 Poor#7F76A3 on #E6E5BE

Color blindness preview

CSS variables

/* Buttered to Alligator Gladiator — https://swatchly.xyz/palette/e6e5be-b69de8-7f76a3-4b491a */
:root {
  --buttered: #e6e5be;
  --dreamy-candy-forest: #b69de8;
  --aster: #7f76a3;
  --alligator-gladiator: #4b491a;
}

Tailwind CSS v4

/* Buttered to Alligator Gladiator — https://swatchly.xyz/palette/e6e5be-b69de8-7f76a3-4b491a */
@theme {
  --color-buttered: #e6e5be;
  --color-buttered-50: #f0efd8;
  --color-buttered-100: #e6e5be;
  --color-buttered-200: #d3d2b4;
  --color-buttered-300: #bebd9c;
  --color-buttered-400: #a1a07c;
  --color-buttered-500: #878662;
  --color-buttered-600: #6e6d4a;
  --color-buttered-700: #585738;
  --color-buttered-800: #454428;
  --color-buttered-900: #35341d;
  --color-buttered-950: #21200f;
  --color-dreamy-candy-forest: #b69de8;
  --color-dreamy-candy-forest-50: #faf8ff;
  --color-dreamy-candy-forest-100: #f3eeff;
  --color-dreamy-candy-forest-200: #e4d8ff;
  --color-dreamy-candy-forest-300: #d2befd;
  --color-dreamy-candy-forest-400: #b69de8;
  --color-dreamy-candy-forest-500: #9880c8;
  --color-dreamy-candy-forest-600: #7c63a9;
  --color-dreamy-candy-forest-700: #634c8b;
  --color-dreamy-candy-forest-800: #4d3870;
  --color-dreamy-candy-forest-900: #3b2958;
  --color-dreamy-candy-forest-950: #241738;
  --color-aster: #7f76a3;
  --color-aster-50: #f4f1ff;
  --color-aster-100: #e8e4ff;
  --color-aster-200: #d4cdf3;
  --color-aster-300: #bcb4df;
  --color-aster-400: #9b93c0;
  --color-aster-500: #7f76a3;
  --color-aster-600: #665e88;
  --color-aster-700: #51496f;
  --color-aster-800: #403959;
  --color-aster-900: #312b47;
  --color-aster-950: #1f1a2f;
  --color-alligator-gladiator: #4b491a;
  --color-alligator-gladiator-50: #f7f7db;
  --color-alligator-gladiator-100: #eeeece;
  --color-alligator-gladiator-200: #dbdab5;
  --color-alligator-gladiator-300: #c6c59b;
  --color-alligator-gladiator-400: #a7a678;
  --color-alligator-gladiator-500: #8d8c5c;
  --color-alligator-gladiator-600: #737243;
  --color-alligator-gladiator-700: #5d5c30;
  --color-alligator-gladiator-800: #4b491a;
  --color-alligator-gladiator-900: #393817;
  --color-alligator-gladiator-950: #24230b;
}