Cypress to Imperial Lilac Color Palette

About this palette

Cypress to Imperial Lilac is a 5-color muted, vintage palette: #605A3C (Cypress), #DEDBC3 (Planet Earth), #1E3131 (Elite Teal), #9B6161 (Cheek Red), #9F9FC1 (Imperial Lilac). It mixes brown, gray, red, purple tones and feels warm overall. The strongest text pairing is #DEDBC3 on #1E3131 with a contrast ratio of 9.76:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cypress	rgb(96, 90, 60)	hsl(50, 23%, 31%)
Planet Earth	rgb(222, 219, 195)	hsl(53, 29%, 82%)
Elite Teal	rgb(30, 49, 49)	hsl(180, 24%, 15%)
Cheek Red	rgb(155, 97, 97)	hsl(0, 23%, 49%)
Imperial Lilac	rgb(159, 159, 193)	hsl(240, 22%, 69%)

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.76:1 Very good#DEDBC3 on #1E3131
Aa9.76:1 Very good#1E3131 on #DEDBC3
Aa5.33:1 Good#1E3131 on #9F9FC1
Aa5.33:1 Good#9F9FC1 on #1E3131
Aa4.97:1 Good#605A3C on #DEDBC3
Aa4.97:1 Good#DEDBC3 on #605A3C
Aa3.51:1 Poor#DEDBC3 on #9B6161
Aa3.51:1 Poor#9B6161 on #DEDBC3

Color blindness preview

CSS variables

/* Cypress to Imperial Lilac — https://swatchly.xyz/palette/605a3c-dedbc3-1e3131-9b6161-9f9fc1 */
:root {
  --cypress: #605a3c;
  --planet-earth: #dedbc3;
  --elite-teal: #1e3131;
  --cheek-red: #9b6161;
  --imperial-lilac: #9f9fc1;
}

Tailwind CSS v4

/* Cypress to Imperial Lilac — https://swatchly.xyz/palette/605a3c-dedbc3-1e3131-9b6161-9f9fc1 */
@theme {
  --color-cypress: #605a3c;
  --color-cypress-50: #f9f6e3;
  --color-cypress-100: #f0ecd7;
  --color-cypress-200: #ded9c0;
  --color-cypress-300: #c9c3a7;
  --color-cypress-400: #aba586;
  --color-cypress-500: #908a6a;
  --color-cypress-600: #767052;
  --color-cypress-700: #605a3c;
  --color-cypress-800: #4b462d;
  --color-cypress-900: #3a3621;
  --color-cypress-950: #242112;
  --color-planet-earth: #dedbc3;
  --color-planet-earth-50: #f9f7ea;
  --color-planet-earth-100: #f0eedf;
  --color-planet-earth-200: #dedbc3;
  --color-planet-earth-300: #c6c4b0;
  --color-planet-earth-400: #a7a48e;
  --color-planet-earth-500: #8b8872;
  --color-planet-earth-600: #706d58;
  --color-planet-earth-700: #595643;
  --color-planet-earth-800: #454332;
  --color-planet-earth-900: #353325;
  --color-planet-earth-950: #212015;
  --color-elite-teal: #1e3131;
  --color-elite-teal-50: #ebf8f8;
  --color-elite-teal-100: #e0efee;
  --color-elite-teal-200: #cadbdb;
  --color-elite-teal-300: #b2c5c5;
  --color-elite-teal-400: #90a5a5;
  --color-elite-teal-500: #738989;
  --color-elite-teal-600: #596d6d;
  --color-elite-teal-700: #435555;
  --color-elite-teal-800: #314141;
  --color-elite-teal-900: #1e3131;
  --color-elite-teal-950: #141d1d;
  --color-cheek-red: #9b6161;
  --color-cheek-red-50: #fff1f1;
  --color-cheek-red-100: #ffe6e5;
  --color-cheek-red-200: #fdcdcc;
  --color-cheek-red-300: #ecb5b4;
  --color-cheek-red-400: #d09594;
  --color-cheek-red-500: #b67a7a;
  --color-cheek-red-600: #9b6161;
  --color-cheek-red-700: #7f4a4b;
  --color-cheek-red-800: #663838;
  --color-cheek-red-900: #50292a;
  --color-cheek-red-950: #341818;
  --color-imperial-lilac: #9f9fc1;
  --color-imperial-lilac-50: #f4f4ff;
  --color-imperial-lilac-100: #e9eaff;
  --color-imperial-lilac-200: #d5d6f0;
  --color-imperial-lilac-300: #bfbfdd;
  --color-imperial-lilac-400: #9f9fc1;
  --color-imperial-lilac-500: #8483a4;
  --color-imperial-lilac-600: #696988;
  --color-imperial-lilac-700: #53526f;
  --color-imperial-lilac-800: #404058;
  --color-imperial-lilac-900: #313045;
  --color-imperial-lilac-950: #1e1d2c;
}