Light Mint to Ethereal Espresso color palette

B1FDBELight Mint F0A69CCalabrese 497EC6Serenity’s Reign 007316Forestial 402021Ethereal Espresso

About this palette

Light Mint to Ethereal Espresso is a 5-color cool, earthy palette: #B1FDBE (Light Mint), #F0A69C (Calabrese), #497EC6 (Serenity’s Reign), #007316 (Forestial), #402021 (Ethereal Espresso). It mixes green, pink, blue, brown tones and feels cool overall. The strongest text pairing is #B1FDBE on #402021 with a contrast ratio of 12.21:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Light Mint	rgb(177, 253, 190)	hsl(130, 95%, 84%)
Calabrese	rgb(240, 166, 156)	hsl(7, 74%, 78%)
Serenity’s Reign	rgb(73, 126, 198)	hsl(215, 52%, 53%)
Forestial	rgb(0, 115, 22)	hsl(131, 100%, 23%)
Ethereal Espresso	rgb(64, 32, 33)	hsl(358, 33%, 19%)

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.

Aa12.21:1 Super#B1FDBE on #402021
Aa12.21:1 Super#402021 on #B1FDBE
Aa7.36:1 Very good#F0A69C on #402021
Aa7.36:1 Very good#402021 on #F0A69C
Aa5.10:1 Good#B1FDBE on #007316
Aa5.10:1 Good#007316 on #B1FDBE
Aa3.51:1 Poor#497EC6 on #402021
Aa3.51:1 Poor#402021 on #497EC6

Color blindness preview

CSS variables

/* Light Mint to Ethereal Espresso — https://swatchly.xyz/palette/b1fdbe-f0a69c-497ec6-007316-402021 */
:root {
  --light-mint: #b1fdbe;
  --calabrese: #f0a69c;
  --serenity-s-reign: #497ec6;
  --forestial: #007316;
  --ethereal-espresso: #402021;
}

Tailwind CSS v4

/* Light Mint to Ethereal Espresso — https://swatchly.xyz/palette/b1fdbe-f0a69c-497ec6-007316-402021 */
@theme {
  --color-light-mint: #b1fdbe;
  --color-light-mint-50: #d5ffdb;
  --color-light-mint-100: #b1fdbe;
  --color-light-mint-200: #ade5b6;
  --color-light-mint-300: #91d09c;
  --color-light-mint-400: #6cb37a;
  --color-light-mint-500: #4f985e;
  --color-light-mint-600: #347d46;
  --color-light-mint-700: #206533;
  --color-light-mint-800: #115024;
  --color-light-mint-900: #073e19;
  --color-light-mint-950: #02270c;
  --color-calabrese: #f0a69c;
  --color-calabrese-50: #ffeeeb;
  --color-calabrese-100: #ffdfdb;
  --color-calabrese-200: #fdc3ba;
  --color-calabrese-300: #f0a69c;
  --color-calabrese-400: #ce897f;
  --color-calabrese-500: #b26e65;
  --color-calabrese-600: #96554d;
  --color-calabrese-700: #7b413a;
  --color-calabrese-800: #64312b;
  --color-calabrese-900: #4f241f;
  --color-calabrese-950: #341511;
  --color-serenity-s-reign: #497ec6;
  --color-serenity-s-reign-50: #ecf4ff;
  --color-serenity-s-reign-100: #dae9ff;
  --color-serenity-s-reign-200: #b7d5ff;
  --color-serenity-s-reign-300: #8dbdff;
  --color-serenity-s-reign-400: #679be4;
  --color-serenity-s-reign-500: #497ec6;
  --color-serenity-s-reign-600: #3265a8;
  --color-serenity-s-reign-700: #214f8c;
  --color-serenity-s-reign-800: #153e73;
  --color-serenity-s-reign-900: #0c2f5d;
  --color-serenity-s-reign-950: #051d3e;
  --color-forestial: #007316;
  --color-forestial-50: #e1ffe0;
  --color-forestial-100: #c4fdc3;
  --color-forestial-200: #abedaa;
  --color-forestial-300: #8eda8e;
  --color-forestial-400: #67be68;
  --color-forestial-500: #47a44b;
  --color-forestial-600: #298a31;
  --color-forestial-700: #007316;
  --color-forestial-800: #005a0f;
  --color-forestial-900: #004609;
  --color-forestial-950: #002d04;
  --color-ethereal-espresso: #402021;
  --color-ethereal-espresso-50: #fff1f1;
  --color-ethereal-espresso-100: #ffe4e3;
  --color-ethereal-espresso-200: #efcece;
  --color-ethereal-espresso-300: #dbb7b6;
  --color-ethereal-espresso-400: #bc9494;
  --color-ethereal-espresso-500: #9f7777;
  --color-ethereal-espresso-600: #815c5c;
  --color-ethereal-espresso-700: #664646;
  --color-ethereal-espresso-800: #4e3333;
  --color-ethereal-espresso-900: #402021;
  --color-ethereal-espresso-950: #231414;
}