Cavolo Nero to Everglade Color Palette

About this palette

Cavolo Nero to Everglade is a 5-color muted, cool palette: #75979A (Cavolo Nero), #CDBBC6 (Last of the Lilacs), #7F5E74 (Opera), #D5E8D1 (Peppermint), #313D27 (Everglade). It mixes turquoise, gray, pink, green tones and feels cool overall. The strongest text pairing is #D5E8D1 on #313D27 with a contrast ratio of 8.92:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cavolo Nero	rgb(117, 151, 154)	hsl(185, 15%, 53%)
Last of the Lilacs	rgb(205, 187, 198)	hsl(323, 15%, 77%)
Opera	rgb(127, 94, 116)	hsl(320, 15%, 43%)
Peppermint	rgb(213, 232, 209)	hsl(110, 33%, 86%)
Everglade	rgb(49, 61, 39)	hsl(93, 22%, 20%)

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.

Aa8.92:1 Very good#D5E8D1 on #313D27
Aa8.92:1 Very good#313D27 on #D5E8D1
Aa6.30:1 Good#CDBBC6 on #313D27
Aa6.30:1 Good#313D27 on #CDBBC6
Aa4.34:1 Poor#7F5E74 on #D5E8D1
Aa4.34:1 Poor#D5E8D1 on #7F5E74
Aa3.64:1 Poor#75979A on #313D27
Aa3.64:1 Poor#313D27 on #75979A

Color blindness preview

CSS variables

/* Cavolo Nero to Everglade — https://swatchly.xyz/palette/75979a-cdbbc6-7f5e74-d5e8d1-313d27 */
:root {
  --cavolo-nero: #75979a;
  --last-of-the-lilacs: #cdbbc6;
  --opera: #7f5e74;
  --peppermint: #d5e8d1;
  --everglade: #313d27;
}

Tailwind CSS v4

/* Cavolo Nero to Everglade — https://swatchly.xyz/palette/75979a-cdbbc6-7f5e74-d5e8d1-313d27 */
@theme {
  --color-cavolo-nero: #75979a;
  --color-cavolo-nero-50: #e8fbfd;
  --color-cavolo-nero-100: #def4f5;
  --color-cavolo-nero-200: #c9e2e5;
  --color-cavolo-nero-300: #b1ced1;
  --color-cavolo-nero-400: #90b1b4;
  --color-cavolo-nero-500: #75979a;
  --color-cavolo-nero-600: #597a7d;
  --color-cavolo-nero-700: #436164;
  --color-cavolo-nero-800: #314c4e;
  --color-cavolo-nero-900: #233a3c;
  --color-cavolo-nero-950: #132425;
  --color-last-of-the-lilacs: #cdbbc6;
  --color-last-of-the-lilacs-50: #fcf2f8;
  --color-last-of-the-lilacs-100: #f3e7ee;
  --color-last-of-the-lilacs-200: #e1d3db;
  --color-last-of-the-lilacs-300: #cdbbc6;
  --color-last-of-the-lilacs-400: #ad9ca6;
  --color-last-of-the-lilacs-500: #91818b;
  --color-last-of-the-lilacs-600: #766670;
  --color-last-of-the-lilacs-700: #5f5059;
  --color-last-of-the-lilacs-800: #4b3e46;
  --color-last-of-the-lilacs-900: #3a2f36;
  --color-last-of-the-lilacs-950: #241d21;
  --color-opera: #7f5e74;
  --color-opera-50: #fff0fa;
  --color-opera-100: #fbe3f2;
  --color-opera-200: #eacddf;
  --color-opera-300: #d5b5ca;
  --color-opera-400: #b794ab;
  --color-opera-500: #9b788f;
  --color-opera-600: #7f5e74;
  --color-opera-700: #66495d;
  --color-opera-800: #513849;
  --color-opera-900: #3f2a39;
  --color-opera-950: #281923;
  --color-peppermint: #d5e8d1;
  --color-peppermint-50: #e5f1e3;
  --color-peppermint-100: #d5e8d1;
  --color-peppermint-200: #c6d5c3;
  --color-peppermint-300: #b0c0ad;
  --color-peppermint-400: #92a38e;
  --color-peppermint-500: #788974;
  --color-peppermint-600: #60705c;
  --color-peppermint-700: #4b5a48;
  --color-peppermint-800: #3a4737;
  --color-peppermint-900: #2b3629;
  --color-peppermint-950: #1a2218;
  --color-everglade: #313d27;
  --color-everglade-50: #f0f9e9;
  --color-everglade-100: #e5efde;
  --color-everglade-200: #d0dcc8;
  --color-everglade-300: #b9c6af;
  --color-everglade-400: #9aa88f;
  --color-everglade-500: #808e75;
  --color-everglade-600: #67745c;
  --color-everglade-700: #525e48;
  --color-everglade-800: #414b38;
  --color-everglade-900: #313d27;
  --color-everglade-950: #1f261a;
}