Toxic Steam to Sacramental Red Color Palette

About this palette

Toxic Steam to Sacramental Red is a 5-color cool palette: #BCFCC2 (Toxic Steam), #4CD46A (Hello Spring), #0076D6 (Fading Night), #95322F (Ripasso), #5C1715 (Sacramental Red). It mixes green, blue, red, brown tones and feels cool overall. The strongest text pairing is #BCFCC2 on #5C1715 with a contrast ratio of 11.23:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Toxic Steam	rgb(188, 252, 194)	hsl(126, 91%, 86%)
Hello Spring	rgb(76, 212, 106)	hsl(133, 61%, 56%)
Fading Night	rgb(0, 118, 214)	hsl(207, 100%, 42%)
Ripasso	rgb(149, 50, 47)	hsl(2, 52%, 38%)
Sacramental Red	rgb(92, 23, 21)	hsl(2, 63%, 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.

Aa11.23:1 Very good#BCFCC2 on #5C1715
Aa11.23:1 Very good#5C1715 on #BCFCC2
Aa6.88:1 Good#4CD46A on #5C1715
Aa6.88:1 Good#5C1715 on #4CD46A
Aa6.43:1 Good#BCFCC2 on #95322F
Aa6.43:1 Good#95322F on #BCFCC2
Aa3.94:1 Poor#4CD46A on #95322F
Aa3.94:1 Poor#95322F on #4CD46A

Color blindness preview

CSS variables

/* Toxic Steam to Sacramental Red — https://swatchly.xyz/palette/bcfcc2-4cd46a-0076d6-95322f-5c1715 */
:root {
  --toxic-steam: #bcfcc2;
  --hello-spring: #4cd46a;
  --fading-night: #0076d6;
  --ripasso: #95322f;
  --sacramental-red: #5c1715;
}

Tailwind CSS v4

/* Toxic Steam to Sacramental Red — https://swatchly.xyz/palette/bcfcc2-4cd46a-0076d6-95322f-5c1715 */
@theme {
  --color-toxic-steam: #bcfcc2;
  --color-toxic-steam-50: #dbfede;
  --color-toxic-steam-100: #bcfcc2;
  --color-toxic-steam-200: #b5e4b9;
  --color-toxic-steam-300: #9acf9f;
  --color-toxic-steam-400: #77b17d;
  --color-toxic-steam-500: #5a9661;
  --color-toxic-steam-600: #407b49;
  --color-toxic-steam-700: #2d6335;
  --color-toxic-steam-800: #1e4e26;
  --color-toxic-steam-900: #133d1b;
  --color-toxic-steam-950: #08260e;
  --color-hello-spring: #4cd46a;
  --color-hello-spring-50: #caffcf;
  --color-hello-spring-100: #a8fab2;
  --color-hello-spring-200: #84e894;
  --color-hello-spring-300: #4cd46a;
  --color-hello-spring-400: #27b54f;
  --color-hello-spring-500: #00993a;
  --color-hello-spring-600: #007c2d;
  --color-hello-spring-700: #006423;
  --color-hello-spring-800: #004f1a;
  --color-hello-spring-900: #003f13;
  --color-hello-spring-950: #002809;
  --color-fading-night: #0076d6;
  --color-fading-night-50: #eef6ff;
  --color-fading-night-100: #e1efff;
  --color-fading-night-200: #c2deff;
  --color-fading-night-300: #9dcbff;
  --color-fading-night-400: #62acff;
  --color-fading-night-500: #3091f2;
  --color-fading-night-600: #0076d6;
  --color-fading-night-700: #005dac;
  --color-fading-night-800: #004988;
  --color-fading-night-900: #00376a;
  --color-fading-night-950: #002245;
  --color-ripasso: #95322f;
  --color-ripasso-50: #fff2f0;
  --color-ripasso-100: #ffe4e1;
  --color-ripasso-200: #ffc9c3;
  --color-ripasso-300: #ffa89f;
  --color-ripasso-400: #e88279;
  --color-ripasso-500: #cd655e;
  --color-ripasso-600: #ae4a45;
  --color-ripasso-700: #95322f;
  --color-ripasso-800: #762523;
  --color-ripasso-900: #5e1918;
  --color-ripasso-950: #3e0c0b;
  --color-sacramental-red: #5c1715;
  --color-sacramental-red-50: #fff2f0;
  --color-sacramental-red-100: #ffe4e1;
  --color-sacramental-red-200: #ffc8c2;
  --color-sacramental-red-300: #f4aca4;
  --color-sacramental-red-400: #d78a82;
  --color-sacramental-red-500: #bb6d66;
  --color-sacramental-red-600: #9d534d;
  --color-sacramental-red-700: #813f39;
  --color-sacramental-red-800: #682e2a;
  --color-sacramental-red-900: #5c1715;
  --color-sacramental-red-950: #361310;
}