Forestry to Breath of Celery Color Palette

About this palette

Forestry to Breath of Celery is a 5-color muted, cool, gradient palette: #363E23 (Forestry), #4B635A (June Ivy), #A78E96 (Nirvana), #C1B6CE (Blue Haze), #DDE7CD (Breath of Celery). It mixes green, gray, purple tones and feels cool overall. The strongest text pairing is #363E23 on #DDE7CD with a contrast ratio of 8.76:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Forestry	rgb(54, 62, 35)	hsl(78, 28%, 19%)
June Ivy	rgb(75, 99, 90)	hsl(158, 14%, 34%)
Nirvana	rgb(167, 142, 150)	hsl(341, 12%, 61%)
Blue Haze	rgb(193, 182, 206)	hsl(268, 20%, 76%)
Breath of Celery	rgb(221, 231, 205)	hsl(83, 35%, 85%)

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.76:1 Very good#363E23 on #DDE7CD
Aa8.76:1 Very good#DDE7CD on #363E23
Aa5.80:1 Good#363E23 on #C1B6CE
Aa5.80:1 Good#C1B6CE on #363E23
Aa5.07:1 Good#4B635A on #DDE7CD
Aa5.07:1 Good#DDE7CD on #4B635A
Aa3.72:1 Poor#363E23 on #A78E96
Aa3.72:1 Poor#A78E96 on #363E23

Color blindness preview

CSS variables

/* Forestry to Breath of Celery — https://swatchly.xyz/palette/363e23-4b635a-a78e96-c1b6ce-dde7cd */
:root {
  --forestry: #363e23;
  --june-ivy: #4b635a;
  --nirvana: #a78e96;
  --blue-haze: #c1b6ce;
  --breath-of-celery: #dde7cd;
}

Tailwind CSS v4

/* Forestry to Breath of Celery — https://swatchly.xyz/palette/363e23-4b635a-a78e96-c1b6ce-dde7cd */
@theme {
  --color-forestry: #363e23;
  --color-forestry-50: #f2f8e6;
  --color-forestry-100: #e8efda;
  --color-forestry-200: #d3dbc3;
  --color-forestry-300: #bcc5aa;
  --color-forestry-400: #9ea88a;
  --color-forestry-500: #848e70;
  --color-forestry-600: #6b7457;
  --color-forestry-700: #565f44;
  --color-forestry-800: #454c34;
  --color-forestry-900: #363e23;
  --color-forestry-950: #222718;
  --color-june-ivy: #4b635a;
  --color-june-ivy-50: #eaf9f3;
  --color-june-ivy-100: #dff0e9;
  --color-june-ivy-200: #cbded6;
  --color-june-ivy-300: #b3cac1;
  --color-june-ivy-400: #94aca3;
  --color-june-ivy-500: #799289;
  --color-june-ivy-600: #60796f;
  --color-june-ivy-700: #4b635a;
  --color-june-ivy-800: #394e46;
  --color-june-ivy-900: #2b3c35;
  --color-june-ivy-950: #192621;
  --color-nirvana: #a78e96;
  --color-nirvana-50: #fcecf1;
  --color-nirvana-100: #f1dfe5;
  --color-nirvana-200: #dec9cf;
  --color-nirvana-300: #c7b0b7;
  --color-nirvana-400: #a78e96;
  --color-nirvana-500: #8d757d;
  --color-nirvana-600: #745d65;
  --color-nirvana-700: #5e4a50;
  --color-nirvana-800: #4b393f;
  --color-nirvana-900: #3b2c31;
  --color-nirvana-950: #271c1f;
  --color-blue-haze: #c1b6ce;
  --color-blue-haze-50: #f6effd;
  --color-blue-haze-100: #ebe4f4;
  --color-blue-haze-200: #d7cfe1;
  --color-blue-haze-300: #c1b6ce;
  --color-blue-haze-400: #a298ae;
  --color-blue-haze-500: #887e94;
  --color-blue-haze-600: #6e647a;
  --color-blue-haze-700: #584f62;
  --color-blue-haze-800: #453e4e;
  --color-blue-haze-900: #362f3e;
  --color-blue-haze-950: #221d27;
  --color-breath-of-celery: #dde7cd;
  --color-breath-of-celery-50: #eaf1e1;
  --color-breath-of-celery-100: #dde7cd;
  --color-breath-of-celery-200: #ccd4c0;
  --color-breath-of-celery-300: #b7bfa9;
  --color-breath-of-celery-400: #99a28a;
  --color-breath-of-celery-500: #7f8870;
  --color-breath-of-celery-600: #666e58;
  --color-breath-of-celery-700: #515944;
  --color-breath-of-celery-800: #3f4534;
  --color-breath-of-celery-900: #303526;
  --color-breath-of-celery-950: #1d2116;
}