Slippery Soap to Black Olive color palette

F1EDD8Slippery Soap B8BFD6Violet Vision 8DA8B0Stormy Waters 8C6A66Mocha Madness 655350Chocolate Pretzel 403E30Black Olive

Open in generator Export PNG, PDF, ASE…

About this palette

Slippery Soap to Black Olive is a 6-color muted, gradient palette: #F1EDD8 (Slippery Soap), #B8BFD6 (Violet Vision), #8DA8B0 (Stormy Waters), #8C6A66 (Mocha Madness), #655350 (Chocolate Pretzel), #403E30 (Black Olive). It mixes white, gray, red tones and feels warm overall. The strongest text pairing is #F1EDD8 on #403E30 with a contrast ratio of 9.15:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Slippery Soap	rgb(241, 237, 216)	hsl(50, 47%, 90%)
Violet Vision	rgb(184, 191, 214)	hsl(226, 27%, 78%)
Stormy Waters	rgb(141, 168, 176)	hsl(194, 18%, 62%)
Mocha Madness	rgb(140, 106, 102)	hsl(6, 16%, 47%)
Chocolate Pretzel	rgb(101, 83, 80)	hsl(9, 12%, 35%)
Black Olive	rgb(64, 62, 48)	hsl(52, 14%, 22%)

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.15:1 Very good#F1EDD8 on #403E30
Aa9.15:1 Very good#403E30 on #F1EDD8
Aa6.14:1 Good#F1EDD8 on #655350
Aa6.14:1 Good#655350 on #F1EDD8
Aa5.88:1 Good#B8BFD6 on #403E30
Aa5.88:1 Good#403E30 on #B8BFD6
Aa4.29:1 Poor#8DA8B0 on #403E30
Aa4.29:1 Poor#403E30 on #8DA8B0

Color blindness preview

CSS variables

/* Slippery Soap to Black Olive — https://swatchly.xyz/palette/f1edd8-b8bfd6-8da8b0-8c6a66-655350-403e30 */
:root {
  --slippery-soap: #f1edd8;
  --violet-vision: #b8bfd6;
  --stormy-waters: #8da8b0;
  --mocha-madness: #8c6a66;
  --chocolate-pretzel: #655350;
  --black-olive: #403e30;
}

Tailwind CSS v4

/* Slippery Soap to Black Olive — https://swatchly.xyz/palette/f1edd8-b8bfd6-8da8b0-8c6a66-655350-403e30 */
@theme {
  --color-slippery-soap: #f1edd8;
  --color-slippery-soap-50: #f9f6eb;
  --color-slippery-soap-100: #f1edd8;
  --color-slippery-soap-200: #dcd9ca;
  --color-slippery-soap-300: #c5c2b1;
  --color-slippery-soap-400: #a6a390;
  --color-slippery-soap-500: #8b8774;
  --color-slippery-soap-600: #706c5a;
  --color-slippery-soap-700: #595645;
  --color-slippery-soap-800: #464334;
  --color-slippery-soap-900: #353327;
  --color-slippery-soap-950: #211f17;
  --color-violet-vision: #b8bfd6;
  --color-violet-vision-50: #f1f4ff;
  --color-violet-vision-100: #e5eaf9;
  --color-violet-vision-200: #d1d6e8;
  --color-violet-vision-300: #b8bfd6;
  --color-violet-vision-400: #99a0b5;
  --color-violet-vision-500: #7e859a;
  --color-violet-vision-600: #646a7f;
  --color-violet-vision-700: #4f5467;
  --color-violet-vision-800: #3d4251;
  --color-violet-vision-900: #2e3240;
  --color-violet-vision-950: #1c1f28;
  --color-stormy-waters: #8da8b0;
  --color-stormy-waters-50: #e9f9fd;
  --color-stormy-waters-100: #deeff5;
  --color-stormy-waters-200: #c8dce3;
  --color-stormy-waters-300: #afc7ce;
  --color-stormy-waters-400: #8da8b0;
  --color-stormy-waters-500: #728c94;
  --color-stormy-waters-600: #587179;
  --color-stormy-waters-700: #435a61;
  --color-stormy-waters-800: #32464c;
  --color-stormy-waters-900: #25363b;
  --color-stormy-waters-950: #152125;
  --color-mocha-madness: #8c6a66;
  --color-mocha-madness-50: #fff2f0;
  --color-mocha-madness-100: #fee6e3;
  --color-mocha-madness-200: #efd3cf;
  --color-mocha-madness-300: #dcbdb9;
  --color-mocha-madness-400: #c09e99;
  --color-mocha-madness-500: #a6837f;
  --color-mocha-madness-600: #8c6a66;
  --color-mocha-madness-700: #71534f;
  --color-mocha-madness-800: #5a3f3c;
  --color-mocha-madness-900: #46302d;
  --color-mocha-madness-950: #2d1d1b;
  --color-chocolate-pretzel: #655350;
  --color-chocolate-pretzel-50: #fef2f0;
  --color-chocolate-pretzel-100: #f5e8e5;
  --color-chocolate-pretzel-200: #e4d4d1;
  --color-chocolate-pretzel-300: #cfbdba;
  --color-chocolate-pretzel-400: #b19e9b;
  --color-chocolate-pretzel-500: #968380;
  --color-chocolate-pretzel-600: #7c6966;
  --color-chocolate-pretzel-700: #655350;
  --color-chocolate-pretzel-800: #4f403e;
  --color-chocolate-pretzel-900: #3d312f;
  --color-chocolate-pretzel-950: #271e1c;
  --color-black-olive: #403e30;
  --color-black-olive-50: #f7f6ec;
  --color-black-olive-100: #edece1;
  --color-black-olive-200: #dad8cb;
  --color-black-olive-300: #c2c1b2;
  --color-black-olive-400: #a2a091;
  --color-black-olive-500: #868474;
  --color-black-olive-600: #6b695a;
  --color-black-olive-700: #535244;
  --color-black-olive-800: #403e30;
  --color-black-olive-900: #312f26;
  --color-black-olive-950: #1e1d16;
}