Start generating

Tempest in a Teapot to Fedora color palette

2B3E40Tempest in a Teapot677F6AEcologicalD2BCD1Tamed BeautyB4867EDusty DuchessFBDFDBPink Glitter655260Fedora
Open in generator Export PNG, PDF, ASE…

About this palette

Tempest in a Teapot to Fedora is a 6-color muted palette: #2B3E40 (Tempest in a Teapot), #677F6A (Ecological), #D2BCD1 (Tamed Beauty), #B4867E (Dusty Duchess), #FBDFDB (Pink Glitter), #655260 (Fedora). It mixes gray, green, pink, red tones and feels cool overall. The strongest text pairing is #2B3E40 on #FBDFDB with a contrast ratio of 8.94:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Tempest in a Teapotrgb(43, 62, 64)hsl(186, 20%, 21%)
Ecologicalrgb(103, 127, 106)hsl(128, 10%, 45%)
Tamed Beautyrgb(210, 188, 209)hsl(303, 20%, 78%)
Dusty Duchessrgb(180, 134, 126)hsl(9, 26%, 60%)
Pink Glitterrgb(251, 223, 219)hsl(8, 80%, 92%)
Fedorargb(101, 82, 96)hsl(316, 10%, 36%)

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.94:1 Very good#2B3E40 on #FBDFDB
  • Aa8.94:1 Very good#FBDFDB on #2B3E40
  • Aa6.35:1 Good#2B3E40 on #D2BCD1
  • Aa6.35:1 Good#D2BCD1 on #2B3E40
  • Aa5.69:1 Good#FBDFDB on #655260
  • Aa5.69:1 Good#655260 on #FBDFDB
  • Aa4.05:1 Poor#D2BCD1 on #655260
  • Aa4.05:1 Poor#655260 on #D2BCD1

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Tempest in a Teapot to Fedora — https://swatchly.xyz/palette/2b3e40-677f6a-d2bcd1-b4867e-fbdfdb-655260 */
:root {
  --tempest-in-a-teapot: #2b3e40;
  --ecological: #677f6a;
  --tamed-beauty: #d2bcd1;
  --dusty-duchess: #b4867e;
  --pink-glitter: #fbdfdb;
  --fedora: #655260;
}

Tailwind CSS v4

/* Tempest in a Teapot to Fedora — https://swatchly.xyz/palette/2b3e40-677f6a-d2bcd1-b4867e-fbdfdb-655260 */
@theme {
  --color-tempest-in-a-teapot: #2b3e40;
  --color-tempest-in-a-teapot-50: #ebf8f9;
  --color-tempest-in-a-teapot-100: #e0eef0;
  --color-tempest-in-a-teapot-200: #cbdbdd;
  --color-tempest-in-a-teapot-300: #b2c5c7;
  --color-tempest-in-a-teapot-400: #93a8aa;
  --color-tempest-in-a-teapot-500: #798e90;
  --color-tempest-in-a-teapot-600: #607476;
  --color-tempest-in-a-teapot-700: #4c5f60;
  --color-tempest-in-a-teapot-800: #3b4c4e;
  --color-tempest-in-a-teapot-900: #2b3e40;
  --color-tempest-in-a-teapot-950: #1c2728;
  --color-ecological: #677f6a;
  --color-ecological-50: #ebfaed;
  --color-ecological-100: #e2f3e4;
  --color-ecological-200: #cfe2d1;
  --color-ecological-300: #b9cebb;
  --color-ecological-400: #9ab19c;
  --color-ecological-500: #809882;
  --color-ecological-600: #677f6a;
  --color-ecological-700: #4f6552;
  --color-ecological-800: #3c4f3f;
  --color-ecological-900: #2c3d2f;
  --color-ecological-950: #1a261c;
  --color-tamed-beauty: #d2bcd1;
  --color-tamed-beauty-50: #fff2fe;
  --color-tamed-beauty-100: #f6e8f5;
  --color-tamed-beauty-200: #e5d4e4;
  --color-tamed-beauty-300: #d2bcd1;
  --color-tamed-beauty-400: #b19db0;
  --color-tamed-beauty-500: #958194;
  --color-tamed-beauty-600: #796679;
  --color-tamed-beauty-700: #615060;
  --color-tamed-beauty-800: #4c3d4c;
  --color-tamed-beauty-900: #3b2e3a;
  --color-tamed-beauty-950: #251c25;
  --color-dusty-duchess: #b4867e;
  --color-dusty-duchess-50: #fff5f3;
  --color-dusty-duchess-100: #ffebe7;
  --color-dusty-duchess-200: #f8d5cf;
  --color-dusty-duchess-300: #e7bfb8;
  --color-dusty-duchess-400: #cda099;
  --color-dusty-duchess-500: #b4867e;
  --color-dusty-duchess-600: #956962;
  --color-dusty-duchess-700: #79514b;
  --color-dusty-duchess-800: #613e38;
  --color-dusty-duchess-900: #4b2e29;
  --color-dusty-duchess-950: #2f1b17;
  --color-pink-glitter: #fbdfdb;
  --color-pink-glitter-50: #fdedea;
  --color-pink-glitter-100: #fbdfdb;
  --color-pink-glitter-200: #e3cecb;
  --color-pink-glitter-300: #cfb8b4;
  --color-pink-glitter-400: #b29995;
  --color-pink-glitter-500: #977e7a;
  --color-pink-glitter-600: #7c6561;
  --color-pink-glitter-700: #654f4c;
  --color-pink-glitter-800: #503d3b;
  --color-pink-glitter-900: #3e2e2c;
  --color-pink-glitter-950: #271c1b;
  --color-fedora: #655260;
  --color-fedora-50: #fdf1fa;
  --color-fedora-100: #f5e6f0;
  --color-fedora-200: #e3d2de;
  --color-fedora-300: #cfbcc9;
  --color-fedora-400: #b19cab;
  --color-fedora-500: #968190;
  --color-fedora-600: #7b6876;
  --color-fedora-700: #655260;
  --color-fedora-800: #4f404b;
  --color-fedora-900: #3d303a;
  --color-fedora-950: #271d24;
}

Similar palettes