Start generating

Buttercream to Nirvana color palette

EEE0CDButtercreamC4AE9EWarm Neutral264048Emerald Forest3D6675Ocean’s Embrace7D6267Reading Tea LeavesA28B92Nirvana
Open in generator Export PNG, PDF, ASE…

About this palette

Buttercream to Nirvana is a 6-color muted palette: #EEE0CD (Buttercream), #C4AE9E (Warm Neutral), #264048 (Emerald Forest), #3D6675 (Ocean’s Embrace), #7D6267 (Reading Tea Leaves), #A28B92 (Nirvana). It mixes gray, blue, red tones and feels balanced overall. The strongest text pairing is #EEE0CD on #264048 with a contrast ratio of 8.47:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Buttercreamrgb(238, 224, 205)hsl(35, 49%, 87%)
Warm Neutralrgb(196, 174, 158)hsl(25, 24%, 69%)
Emerald Forestrgb(38, 64, 72)hsl(194, 31%, 22%)
Ocean’s Embracergb(61, 102, 117)hsl(196, 31%, 35%)
Reading Tea Leavesrgb(125, 98, 103)hsl(349, 12%, 44%)
Nirvanargb(162, 139, 146)hsl(342, 11%, 59%)

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.

  • Aa8.47:1 Very good#EEE0CD on #264048
  • Aa8.47:1 Very good#264048 on #EEE0CD
  • Aa5.18:1 Good#C4AE9E on #264048
  • Aa5.18:1 Good#264048 on #C4AE9E
  • Aa4.82:1 Good#EEE0CD on #3D6675
  • Aa4.82:1 Good#3D6675 on #EEE0CD
  • Aa4.24:1 Poor#EEE0CD on #7D6267
  • Aa4.24:1 Poor#7D6267 on #EEE0CD

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Buttercream to Nirvana — https://swatchly.xyz/palette/eee0cd-c4ae9e-264048-3d6675-7d6267-a28b92 */
:root {
  --buttercream: #eee0cd;
  --warm-neutral: #c4ae9e;
  --emerald-forest: #264048;
  --ocean-s-embrace: #3d6675;
  --reading-tea-leaves: #7d6267;
  --nirvana: #a28b92;
}

Tailwind CSS v4

/* Buttercream to Nirvana — https://swatchly.xyz/palette/eee0cd-c4ae9e-264048-3d6675-7d6267-a28b92 */
@theme {
  --color-buttercream: #eee0cd;
  --color-buttercream-50: #f5ece1;
  --color-buttercream-100: #eee0cd;
  --color-buttercream-200: #d9cec0;
  --color-buttercream-300: #c5b9a9;
  --color-buttercream-400: #a89b8a;
  --color-buttercream-500: #8e8170;
  --color-buttercream-600: #746858;
  --color-buttercream-700: #5e5344;
  --color-buttercream-800: #4a4134;
  --color-buttercream-900: #393126;
  --color-buttercream-950: #241e16;
  --color-warm-neutral: #c4ae9e;
  --color-warm-neutral-50: #f9ebe1;
  --color-warm-neutral-100: #eeded3;
  --color-warm-neutral-200: #dac8ba;
  --color-warm-neutral-300: #c4ae9e;
  --color-warm-neutral-400: #a69282;
  --color-warm-neutral-500: #8d796a;
  --color-warm-neutral-600: #746153;
  --color-warm-neutral-700: #5f4d41;
  --color-warm-neutral-800: #4c3d32;
  --color-warm-neutral-900: #3d3026;
  --color-warm-neutral-950: #261d16;
  --color-emerald-forest: #264048;
  --color-emerald-forest-50: #e8f9fe;
  --color-emerald-forest-100: #dceff5;
  --color-emerald-forest-200: #c6dce3;
  --color-emerald-forest-300: #abc5cd;
  --color-emerald-forest-400: #88a4ad;
  --color-emerald-forest-500: #6c8891;
  --color-emerald-forest-600: #516c74;
  --color-emerald-forest-700: #3c545b;
  --color-emerald-forest-800: #264048;
  --color-emerald-forest-900: #1f3036;
  --color-emerald-forest-950: #111d21;
  --color-ocean-s-embrace: #3d6675;
  --color-ocean-s-embrace-50: #e8f8ff;
  --color-ocean-s-embrace-100: #d5f0fb;
  --color-ocean-s-embrace-200: #c0e0ec;
  --color-ocean-s-embrace-300: #a7ccda;
  --color-ocean-s-embrace-400: #86aebe;
  --color-ocean-s-embrace-500: #6b95a5;
  --color-ocean-s-embrace-600: #527c8b;
  --color-ocean-s-embrace-700: #3d6675;
  --color-ocean-s-embrace-800: #2d505d;
  --color-ocean-s-embrace-900: #203e49;
  --color-ocean-s-embrace-950: #11272f;
  --color-reading-tea-leaves: #7d6267;
  --color-reading-tea-leaves-50: #fff1f3;
  --color-reading-tea-leaves-100: #f9e5e8;
  --color-reading-tea-leaves-200: #e7d0d4;
  --color-reading-tea-leaves-300: #d3b8bd;
  --color-reading-tea-leaves-400: #b4989d;
  --color-reading-tea-leaves-500: #997c81;
  --color-reading-tea-leaves-600: #7d6267;
  --color-reading-tea-leaves-700: #654d51;
  --color-reading-tea-leaves-800: #503b3f;
  --color-reading-tea-leaves-900: #3e2d30;
  --color-reading-tea-leaves-950: #271b1d;
  --color-nirvana: #a28b92;
  --color-nirvana-50: #fff4f7;
  --color-nirvana-100: #faebef;
  --color-nirvana-200: #ead9de;
  --color-nirvana-300: #d7c3c9;
  --color-nirvana-400: #bba5ac;
  --color-nirvana-500: #a28b92;
  --color-nirvana-600: #846f75;
  --color-nirvana-700: #6a565d;
  --color-nirvana-800: #544248;
  --color-nirvana-900: #403236;
  --color-nirvana-950: #281d21;
}

Similar palettes