Toxic Steam to Rich Black color palette

BBFCD0Toxic Steam 78C898Minted Elegance E13430Ceremonial Red Ribbon 91109CPurple Ink 004143Rich Black

Open in generator Export PNG, PDF, ASE…

About this palette

Toxic Steam to Rich Black is a 5-color cool palette: #BBFCD0 (Toxic Steam), #78C898 (Minted Elegance), #E13430 (Ceremonial Red Ribbon), #91109C (Purple Ink), #004143 (Rich Black). It mixes green, red, pink, turquoise tones and feels cool overall. The strongest text pairing is #BBFCD0 on #004143 with a contrast ratio of 9.77:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Toxic Steam	rgb(187, 252, 208)	hsl(139, 92%, 86%)
Minted Elegance	rgb(120, 200, 152)	hsl(144, 42%, 63%)
Ceremonial Red Ribbon	rgb(225, 52, 48)	hsl(1, 75%, 54%)
Purple Ink	rgb(145, 16, 156)	hsl(295, 81%, 34%)
Rich Black	rgb(0, 65, 67)	hsl(182, 100%, 13%)

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.77:1 Very good#BBFCD0 on #004143
Aa9.77:1 Very good#004143 on #BBFCD0
Aa6.51:1 Good#BBFCD0 on #91109C
Aa6.51:1 Good#91109C on #BBFCD0
Aa5.72:1 Good#78C898 on #004143
Aa5.72:1 Good#004143 on #78C898
Aa3.81:1 Poor#78C898 on #91109C
Aa3.81:1 Poor#91109C on #78C898

Color blindness preview

CSS variables

/* Toxic Steam to Rich Black — https://swatchly.xyz/palette/bbfcd0-78c898-e13430-91109c-004143 */
:root {
  --toxic-steam: #bbfcd0;
  --minted-elegance: #78c898;
  --ceremonial-red-ribbon: #e13430;
  --purple-ink: #91109c;
  --rich-black: #004143;
}

Tailwind CSS v4

/* Toxic Steam to Rich Black — https://swatchly.xyz/palette/bbfcd0-78c898-e13430-91109c-004143 */
@theme {
  --color-toxic-steam: #bbfcd0;
  --color-toxic-steam-50: #dbfee6;
  --color-toxic-steam-100: #bbfcd0;
  --color-toxic-steam-200: #b5e4c3;
  --color-toxic-steam-300: #99cfab;
  --color-toxic-steam-400: #75b189;
  --color-toxic-steam-500: #58966e;
  --color-toxic-steam-600: #3e7a55;
  --color-toxic-steam-700: #2a6241;
  --color-toxic-steam-800: #1b4e30;
  --color-toxic-steam-900: #113c23;
  --color-toxic-steam-950: #072614;
  --color-minted-elegance: #78c898;
  --color-minted-elegance-50: #cdfcdd;
  --color-minted-elegance-100: #bcf1cf;
  --color-minted-elegance-200: #9eddb6;
  --color-minted-elegance-300: #78c898;
  --color-minted-elegance-400: #5caa7c;
  --color-minted-elegance-500: #409064;
  --color-minted-elegance-600: #27774d;
  --color-minted-elegance-700: #13613b;
  --color-minted-elegance-800: #044e2d;
  --color-minted-elegance-900: #003e22;
  --color-minted-elegance-950: #002713;
  --color-ceremonial-red-ribbon: #e13430;
  --color-ceremonial-red-ribbon-50: #fff0ee;
  --color-ceremonial-red-ribbon-100: #ffe1dc;
  --color-ceremonial-red-ribbon-200: #ffc3bb;
  --color-ceremonial-red-ribbon-300: #ff9e92;
  --color-ceremonial-red-ribbon-400: #ff5d52;
  --color-ceremonial-red-ribbon-500: #e13430;
  --color-ceremonial-red-ribbon-600: #c00b15;
  --color-ceremonial-red-ribbon-700: #9c000c;
  --color-ceremonial-red-ribbon-800: #7c0007;
  --color-ceremonial-red-ribbon-900: #620004;
  --color-ceremonial-red-ribbon-950: #410002;
  --color-purple-ink: #91109c;
  --color-purple-ink-50: #fef0ff;
  --color-purple-ink-100: #fde0ff;
  --color-purple-ink-200: #fbc2ff;
  --color-purple-ink-300: #f89cff;
  --color-purple-ink-400: #e171eb;
  --color-purple-ink-500: #c651d1;
  --color-purple-ink-600: #a934b4;
  --color-purple-ink-700: #91109c;
  --color-purple-ink-800: #74047d;
  --color-purple-ink-900: #5b0062;
  --color-purple-ink-950: #3b0041;
  --color-rich-black: #004143;
  --color-rich-black-50: #defcfd;
  --color-rich-black-100: #d1f3f4;
  --color-rich-black-200: #b8e1e2;
  --color-rich-black-300: #9ccbcd;
  --color-rich-black-400: #79aeaf;
  --color-rich-black-500: #5d9395;
  --color-rich-black-600: #43797b;
  --color-rich-black-700: #306364;
  --color-rich-black-800: #214f51;
  --color-rich-black-900: #004143;
  --color-rich-black-950: #0a292a;
}