Tapioca to Dark & Stormy color palette

E1CAB6Tapioca 87B0D0Birdie Num Num 9D8969Gramps Shoehorn 7F6340Autumn Gold 344151Dark & Stormy

About this palette

Tapioca to Dark & Stormy is a 5-color muted, warm, earthy, vintage palette: #E1CAB6 (Tapioca), #87B0D0 (Birdie Num Num), #9D8969 (Gramps Shoehorn), #7F6340 (Autumn Gold), #344151 (Dark & Stormy). It mixes orange, blue, yellow, brown, gray tones and feels warm overall. The strongest text pairing is #E1CAB6 on #344151 with a contrast ratio of 6.59:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tapioca	rgb(225, 202, 182)	hsl(28, 42%, 80%)
Birdie Num Num	rgb(135, 176, 208)	hsl(206, 44%, 67%)
Gramps Shoehorn	rgb(157, 137, 105)	hsl(37, 21%, 51%)
Autumn Gold	rgb(127, 99, 64)	hsl(33, 33%, 37%)
Dark & Stormy	rgb(52, 65, 81)	hsl(213, 22%, 26%)

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.

Aa6.59:1 Good#E1CAB6 on #344151
Aa6.59:1 Good#344151 on #E1CAB6
Aa4.53:1 Good#87B0D0 on #344151
Aa4.53:1 Good#344151 on #87B0D0
Aa3.54:1 Poor#E1CAB6 on #7F6340
Aa3.54:1 Poor#7F6340 on #E1CAB6
Aa3.08:1 Poor#9D8969 on #344151
Aa3.08:1 Poor#344151 on #9D8969

Color blindness preview

CSS variables

/* Tapioca to Dark & Stormy — https://swatchly.xyz/palette/e1cab6-87b0d0-9d8969-7f6340-344151 */
:root {
  --tapioca: #e1cab6;
  --birdie-num-num: #87b0d0;
  --gramps-shoehorn: #9d8969;
  --autumn-gold: #7f6340;
  --dark-stormy: #344151;
}

Tailwind CSS v4

/* Tapioca to Dark & Stormy — https://swatchly.xyz/palette/e1cab6-87b0d0-9d8969-7f6340-344151 */
@theme {
  --color-tapioca: #e1cab6;
  --color-tapioca-50: #faece0;
  --color-tapioca-100: #f0e1d3;
  --color-tapioca-200: #e1cab6;
  --color-tapioca-300: #cab6a4;
  --color-tapioca-400: #ad9885;
  --color-tapioca-500: #937e6b;
  --color-tapioca-600: #796553;
  --color-tapioca-700: #625040;
  --color-tapioca-800: #4f3f31;
  --color-tapioca-900: #3d3024;
  --color-tapioca-950: #271d15;
  --color-birdie-num-num: #87b0d0;
  --color-birdie-num-num-50: #f2f9ff;
  --color-birdie-num-num-100: #e3f2ff;
  --color-birdie-num-num-200: #c5e2fa;
  --color-birdie-num-num-300: #abcee8;
  --color-birdie-num-num-400: #87b0d0;
  --color-birdie-num-num-500: #6b93b1;
  --color-birdie-num-num-600: #4f7694;
  --color-birdie-num-num-700: #3a5d78;
  --color-birdie-num-num-800: #294860;
  --color-birdie-num-num-900: #1c374b;
  --color-birdie-num-num-950: #0e212f;
  --color-gramps-shoehorn: #9d8969;
  --color-gramps-shoehorn-50: #fff5e5;
  --color-gramps-shoehorn-100: #f9ecd7;
  --color-gramps-shoehorn-200: #e8d9c0;
  --color-gramps-shoehorn-300: #d4c3a7;
  --color-gramps-shoehorn-400: #b7a485;
  --color-gramps-shoehorn-500: #9d8969;
  --color-gramps-shoehorn-600: #816d4f;
  --color-gramps-shoehorn-700: #67563a;
  --color-gramps-shoehorn-800: #524229;
  --color-gramps-shoehorn-900: #3f321d;
  --color-gramps-shoehorn-950: #281e0f;
  --color-autumn-gold: #7f6340;
  --color-autumn-gold-50: #fff3e5;
  --color-autumn-gold-100: #fbe7cf;
  --color-autumn-gold-200: #ead2b6;
  --color-autumn-gold-300: #d5ba9a;
  --color-autumn-gold-400: #b79a77;
  --color-autumn-gold-500: #9b7e5a;
  --color-autumn-gold-600: #7f6340;
  --color-autumn-gold-700: #664e2e;
  --color-autumn-gold-800: #513c21;
  --color-autumn-gold-900: #402e16;
  --color-autumn-gold-950: #291c0b;
  --color-dark-stormy: #344151;
  --color-dark-stormy-50: #eff6ff;
  --color-dark-stormy-100: #e2ecf9;
  --color-dark-stormy-200: #cdd9e8;
  --color-dark-stormy-300: #b4c2d3;
  --color-dark-stormy-400: #93a2b4;
  --color-dark-stormy-500: #788698;
  --color-dark-stormy-600: #5d6b7c;
  --color-dark-stormy-700: #485464;
  --color-dark-stormy-800: #344151;
  --color-dark-stormy-900: #29323d;
  --color-dark-stormy-950: #181e26;
}