Start generating

Buttery to Elite Teal color palette

FBC58DButtery7F96EAPerrywinkle6970A6Twinkle Night006770Wakame Green553217Moelleux au Chocolat003136Elite Teal
Open in generator Export PNG, PDF, ASE…

About this palette

Buttery to Elite Teal is a 6-color cool palette: #FBC58D (Buttery), #7F96EA (Perrywinkle), #6970A6 (Twinkle Night), #006770 (Wakame Green), #553217 (Moelleux au Chocolat), #003136 (Elite Teal). It mixes orange, blue, purple, turquoise, brown tones and feels cool overall. The strongest text pairing is #FBC58D on #003136 with a contrast ratio of 9.03:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Butteryrgb(251, 197, 141)hsl(31, 93%, 77%)
Perrywinklergb(127, 150, 234)hsl(227, 72%, 71%)
Twinkle Nightrgb(105, 112, 166)hsl(233, 26%, 53%)
Wakame Greenrgb(0, 103, 112)hsl(185, 100%, 22%)
Moelleux au Chocolatrgb(85, 50, 23)hsl(26, 57%, 21%)
Elite Tealrgb(0, 49, 54)hsl(186, 100%, 11%)

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.03:1 Very good#FBC58D on #003136
  • Aa9.03:1 Very good#003136 on #FBC58D
  • Aa7.26:1 Very good#FBC58D on #553217
  • Aa7.26:1 Very good#553217 on #FBC58D
  • Aa4.99:1 Good#7F96EA on #003136
  • Aa4.99:1 Good#003136 on #7F96EA
  • Aa4.24:1 Poor#FBC58D on #006770
  • Aa4.24:1 Poor#006770 on #FBC58D

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Buttery to Elite Teal — https://swatchly.xyz/palette/fbc58d-7f96ea-6970a6-006770-553217-003136 */
:root {
  --buttery: #fbc58d;
  --perrywinkle: #7f96ea;
  --twinkle-night: #6970a6;
  --wakame-green: #006770;
  --moelleux-au-chocolat: #553217;
  --elite-teal: #003136;
}

Tailwind CSS v4

/* Buttery to Elite Teal — https://swatchly.xyz/palette/fbc58d-7f96ea-6970a6-006770-553217-003136 */
@theme {
  --color-buttery: #fbc58d;
  --color-buttery-50: #ffeddb;
  --color-buttery-100: #ffdfbf;
  --color-buttery-200: #fbc58d;
  --color-buttery-300: #e0b181;
  --color-buttery-400: #c4925d;
  --color-buttery-500: #a97741;
  --color-buttery-600: #8d5e28;
  --color-buttery-700: #744a15;
  --color-buttery-800: #5e3907;
  --color-buttery-900: #4a2a01;
  --color-buttery-950: #301900;
  --color-perrywinkle: #7f96ea;
  --color-perrywinkle-50: #eff3ff;
  --color-perrywinkle-100: #e0e7ff;
  --color-perrywinkle-200: #c3d2ff;
  --color-perrywinkle-300: #a3b8ff;
  --color-perrywinkle-400: #7f96ea;
  --color-perrywinkle-500: #667bcd;
  --color-perrywinkle-600: #4f62af;
  --color-perrywinkle-700: #3c4c92;
  --color-perrywinkle-800: #2d3b78;
  --color-perrywinkle-900: #212d61;
  --color-perrywinkle-950: #131b41;
  --color-twinkle-night: #6970a6;
  --color-twinkle-night-50: #f2f4ff;
  --color-twinkle-night-100: #e8ecff;
  --color-twinkle-night-200: #d2d8ff;
  --color-twinkle-night-300: #bac2f4;
  --color-twinkle-night-400: #9ca4da;
  --color-twinkle-night-500: #8289c1;
  --color-twinkle-night-600: #6970a6;
  --color-twinkle-night-700: #525889;
  --color-twinkle-night-800: #3f446f;
  --color-twinkle-night-900: #2f3358;
  --color-twinkle-night-950: #1c1f39;
  --color-wakame-green: #006770;
  --color-wakame-green-50: #dffcff;
  --color-wakame-green-100: #c5f5fb;
  --color-wakame-green-200: #abe4eb;
  --color-wakame-green-300: #8ed0d8;
  --color-wakame-green-400: #67b3bb;
  --color-wakame-green-500: #4798a1;
  --color-wakame-green-600: #2a7d86;
  --color-wakame-green-700: #006770;
  --color-wakame-green-800: #005158;
  --color-wakame-green-900: #003e44;
  --color-wakame-green-950: #00272b;
  --color-moelleux-au-chocolat: #553217;
  --color-moelleux-au-chocolat-50: #fff2ea;
  --color-moelleux-au-chocolat-100: #ffe6d5;
  --color-moelleux-au-chocolat-200: #f1d0ba;
  --color-moelleux-au-chocolat-300: #dcb79d;
  --color-moelleux-au-chocolat-400: #be9579;
  --color-moelleux-au-chocolat-500: #a1795c;
  --color-moelleux-au-chocolat-600: #835e43;
  --color-moelleux-au-chocolat-700: #68472f;
  --color-moelleux-au-chocolat-800: #553217;
  --color-moelleux-au-chocolat-900: #3f2716;
  --color-moelleux-au-chocolat-950: #27170b;
  --color-elite-teal: #003136;
  --color-elite-teal-50: #e1fbfe;
  --color-elite-teal-100: #d5f1f5;
  --color-elite-teal-200: #bddfe3;
  --color-elite-teal-300: #a2c9ce;
  --color-elite-teal-400: #7da9ae;
  --color-elite-teal-500: #5f8c91;
  --color-elite-teal-600: #456f74;
  --color-elite-teal-700: #30565b;
  --color-elite-teal-800: #204145;
  --color-elite-teal-900: #003136;
  --color-elite-teal-950: #0a1c1e;
}

Similar palettes