Start generating

Scented Spring to Torrefacto Roast color palette

E8DAFFScented SpringDE8284Pulp8A955FBullfrog006570Wakame Green4F211DTorrefacto Roast
Open in generator Export PNG, PDF, ASE…

About this palette

Scented Spring to Torrefacto Roast is a 5-color cool, vintage palette: #E8DAFF (Scented Spring), #DE8284 (Pulp), #8A955F (Bullfrog), #006570 (Wakame Green), #4F211D (Torrefacto Roast). It mixes purple, red, green, turquoise, brown tones and feels cool overall. The strongest text pairing is #E8DAFF on #4F211D with a contrast ratio of 10.14:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Scented Springrgb(232, 218, 255)hsl(263, 100%, 93%)
Pulprgb(222, 130, 132)hsl(359, 58%, 69%)
Bullfrogrgb(138, 149, 95)hsl(72, 22%, 48%)
Wakame Greenrgb(0, 101, 112)hsl(186, 100%, 22%)
Torrefacto Roastrgb(79, 33, 29)hsl(5, 46%, 21%)

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.

  • Aa10.14:1 Very good#E8DAFF on #4F211D
  • Aa10.14:1 Very good#4F211D on #E8DAFF
  • Aa5.14:1 Good#E8DAFF on #006570
  • Aa5.14:1 Good#006570 on #E8DAFF
  • Aa4.87:1 Good#DE8284 on #4F211D
  • Aa4.87:1 Good#4F211D on #DE8284
  • Aa4.17:1 Poor#8A955F on #4F211D
  • Aa4.17:1 Poor#4F211D on #8A955F

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Scented Spring to Torrefacto Roast — https://swatchly.xyz/palette/e8daff-de8284-8a955f-006570-4f211d */
:root {
  --scented-spring: #e8daff;
  --pulp: #de8284;
  --bullfrog: #8a955f;
  --wakame-green: #006570;
  --torrefacto-roast: #4f211d;
}

Tailwind CSS v4

/* Scented Spring to Torrefacto Roast — https://swatchly.xyz/palette/e8daff-de8284-8a955f-006570-4f211d */
@theme {
  --color-scented-spring: #e8daff;
  --color-scented-spring-50: #f1e9ff;
  --color-scented-spring-100: #e8daff;
  --color-scented-spring-200: #d4cae6;
  --color-scented-spring-300: #c0b4d4;
  --color-scented-spring-400: #a396b8;
  --color-scented-spring-500: #897c9e;
  --color-scented-spring-600: #706483;
  --color-scented-spring-700: #5a4f6c;
  --color-scented-spring-800: #473d56;
  --color-scented-spring-900: #372e43;
  --color-scented-spring-950: #221c2b;
  --color-pulp: #de8284;
  --color-pulp-50: #fff1f0;
  --color-pulp-100: #ffe3e2;
  --color-pulp-200: #ffc6c6;
  --color-pulp-300: #f9a6a7;
  --color-pulp-400: #de8284;
  --color-pulp-500: #c0676a;
  --color-pulp-600: #a14d51;
  --color-pulp-700: #85393d;
  --color-pulp-800: #6c292d;
  --color-pulp-900: #561d21;
  --color-pulp-950: #380f13;
  --color-bullfrog: #8a955f;
  --color-bullfrog-50: #f4fbdc;
  --color-bullfrog-100: #ebf3d1;
  --color-bullfrog-200: #d8e1b9;
  --color-bullfrog-300: #c3cd9f;
  --color-bullfrog-400: #a4af7c;
  --color-bullfrog-500: #8a955f;
  --color-bullfrog-600: #6e7944;
  --color-bullfrog-700: #57602f;
  --color-bullfrog-800: #434b1f;
  --color-bullfrog-900: #333914;
  --color-bullfrog-950: #1e2308;
  --color-wakame-green: #006570;
  --color-wakame-green-50: #e0fbff;
  --color-wakame-green-100: #c6f5fc;
  --color-wakame-green-200: #abe4ec;
  --color-wakame-green-300: #8ecfd9;
  --color-wakame-green-400: #66b1bc;
  --color-wakame-green-500: #4796a2;
  --color-wakame-green-600: #2a7c87;
  --color-wakame-green-700: #006570;
  --color-wakame-green-800: #004f58;
  --color-wakame-green-900: #003d44;
  --color-wakame-green-950: #00262b;
  --color-torrefacto-roast: #4f211d;
  --color-torrefacto-roast-50: #fff2f0;
  --color-torrefacto-roast-100: #ffe4e0;
  --color-torrefacto-roast-200: #f8cbc5;
  --color-torrefacto-roast-300: #e5b3ac;
  --color-torrefacto-roast-400: #c8918b;
  --color-torrefacto-roast-500: #ac756f;
  --color-torrefacto-roast-600: #8f5b55;
  --color-torrefacto-roast-700: #744640;
  --color-torrefacto-roast-800: #5c3430;
  --color-torrefacto-roast-900: #4f211d;
  --color-torrefacto-roast-950: #2e1614;
}

Similar palettes