Plummy to Breath of Celery Color Palette

About this palette

Plummy to Breath of Celery is a 4-color muted, cool palette: #67597C (Plummy), #2C1A18 (Dark Orchestra), #78969D (Inland Waters), #DFEACB (Breath of Celery). It mixes purple, gray, turquoise, green tones and feels cool overall. The strongest text pairing is #2C1A18 on #DFEACB with a contrast ratio of 13.22:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Plummy	rgb(103, 89, 124)	hsl(264, 16%, 42%)
Dark Orchestra	rgb(44, 26, 24)	hsl(6, 29%, 13%)
Inland Waters	rgb(120, 150, 157)	hsl(191, 16%, 54%)
Breath of Celery	rgb(223, 234, 203)	hsl(81, 42%, 86%)

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.

Aa13.22:1 Super#2C1A18 on #DFEACB
Aa13.22:1 Super#DFEACB on #2C1A18
Aa5.24:1 Good#2C1A18 on #78969D
Aa5.24:1 Good#78969D on #2C1A18
Aa5.09:1 Good#67597C on #DFEACB
Aa5.09:1 Good#DFEACB on #67597C

Color blindness preview

CSS variables

/* Plummy to Breath of Celery — https://swatchly.xyz/palette/67597c-2c1a18-78969d-dfeacb */
:root {
  --plummy: #67597c;
  --dark-orchestra: #2c1a18;
  --inland-waters: #78969d;
  --breath-of-celery: #dfeacb;
}

Tailwind CSS v4

/* Plummy to Breath of Celery — https://swatchly.xyz/palette/67597c-2c1a18-78969d-dfeacb */
@theme {
  --color-plummy: #67597c;
  --color-plummy-50: #f7f3ff;
  --color-plummy-100: #ede4fe;
  --color-plummy-200: #d9cdec;
  --color-plummy-300: #c1b4d6;
  --color-plummy-400: #a092b7;
  --color-plummy-500: #837599;
  --color-plummy-600: #67597c;
  --color-plummy-700: #524664;
  --color-plummy-800: #403650;
  --color-plummy-900: #32293f;
  --color-plummy-950: #1f1928;
  --color-dark-orchestra: #2c1a18;
  --color-dark-orchestra-50: #fff2f0;
  --color-dark-orchestra-100: #f7e7e5;
  --color-dark-orchestra-200: #e6d2d0;
  --color-dark-orchestra-300: #d1bbb8;
  --color-dark-orchestra-400: #b39b98;
  --color-dark-orchestra-500: #97807d;
  --color-dark-orchestra-600: #7c6663;
  --color-dark-orchestra-700: #64504d;
  --color-dark-orchestra-800: #4f3e3c;
  --color-dark-orchestra-900: #3e2f2d;
  --color-dark-orchestra-950: #2c1a18;
  --color-inland-waters: #78969d;
  --color-inland-waters-50: #eafbff;
  --color-inland-waters-100: #e0f3f7;
  --color-inland-waters-200: #cbe2e7;
  --color-inland-waters-300: #b4cdd3;
  --color-inland-waters-400: #93b0b7;
  --color-inland-waters-500: #78969d;
  --color-inland-waters-600: #5c7980;
  --color-inland-waters-700: #466067;
  --color-inland-waters-800: #344b51;
  --color-inland-waters-900: #25393e;
  --color-inland-waters-950: #152326;
  --color-breath-of-celery: #dfeacb;
  --color-breath-of-celery-50: #ecf3e1;
  --color-breath-of-celery-100: #dfeacb;
  --color-breath-of-celery-200: #ced6bf;
  --color-breath-of-celery-300: #b8c1a7;
  --color-breath-of-celery-400: #99a387;
  --color-breath-of-celery-500: #7f896d;
  --color-breath-of-celery-600: #666f54;
  --color-breath-of-celery-700: #515941;
  --color-breath-of-celery-800: #3f4630;
  --color-breath-of-celery-900: #303624;
  --color-breath-of-celery-950: #1d2114;
}