Graphite to Breath of Celery Color Palette

About this palette

Graphite to Breath of Celery is a 5-color cool, earthy, vintage, gradient palette: #2D351F (Graphite), #545000 (Ayahuasca Vine), #957823 (Fernweh), #7EA88E (Catnip), #DBE7C6 (Breath of Celery). It mixes green, brown, yellow tones and feels cool overall. The strongest text pairing is #2D351F on #DBE7C6 with a contrast ratio of 9.91:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Graphite	rgb(45, 53, 31)	hsl(82, 26%, 16%)
Ayahuasca Vine	rgb(84, 80, 0)	hsl(57, 100%, 16%)
Fernweh	rgb(149, 120, 35)	hsl(45, 62%, 36%)
Catnip	rgb(126, 168, 142)	hsl(143, 19%, 58%)
Breath of Celery	rgb(219, 231, 198)	hsl(82, 41%, 84%)

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.91:1 Very good#2D351F on #DBE7C6
Aa9.91:1 Very good#DBE7C6 on #2D351F
Aa6.44:1 Good#545000 on #DBE7C6
Aa6.44:1 Good#DBE7C6 on #545000
Aa4.80:1 Good#2D351F on #7EA88E
Aa4.80:1 Good#7EA88E on #2D351F
Aa3.26:1 Poor#957823 on #DBE7C6
Aa3.26:1 Poor#DBE7C6 on #957823

Color blindness preview

CSS variables

/* Graphite to Breath of Celery — https://swatchly.xyz/palette/2d351f-545000-957823-7ea88e-dbe7c6 */
:root {
  --graphite: #2d351f;
  --ayahuasca-vine: #545000;
  --fernweh: #957823;
  --catnip: #7ea88e;
  --breath-of-celery: #dbe7c6;
}

Tailwind CSS v4

/* Graphite to Breath of Celery — https://swatchly.xyz/palette/2d351f-545000-957823-7ea88e-dbe7c6 */
@theme {
  --color-graphite: #2d351f;
  --color-graphite-50: #f2f8e9;
  --color-graphite-100: #e7eedd;
  --color-graphite-200: #d3dbc7;
  --color-graphite-300: #bcc5ae;
  --color-graphite-400: #9ca68d;
  --color-graphite-500: #808a71;
  --color-graphite-600: #666f57;
  --color-graphite-700: #505842;
  --color-graphite-800: #3d4432;
  --color-graphite-900: #2d351f;
  --color-graphite-950: #1c2015;
  --color-ayahuasca-vine: #545000;
  --color-ayahuasca-vine-50: #f9f8d2;
  --color-ayahuasca-vine-100: #efeec4;
  --color-ayahuasca-vine-200: #dbd9a6;
  --color-ayahuasca-vine-300: #c4c287;
  --color-ayahuasca-vine-400: #a4a15f;
  --color-ayahuasca-vine-500: #878440;
  --color-ayahuasca-vine-600: #6b6826;
  --color-ayahuasca-vine-700: #545000;
  --color-ayahuasca-vine-800: #413e05;
  --color-ayahuasca-vine-900: #323001;
  --color-ayahuasca-vine-950: #1f1d00;
  --color-fernweh: #957823;
  --color-fernweh-50: #fff2d2;
  --color-fernweh-100: #fae6b4;
  --color-fernweh-200: #e7d094;
  --color-fernweh-300: #d2b772;
  --color-fernweh-400: #b29547;
  --color-fernweh-500: #957823;
  --color-fernweh-600: #7b6000;
  --color-fernweh-700: #624c00;
  --color-fernweh-800: #4d3b00;
  --color-fernweh-900: #3d2e00;
  --color-fernweh-950: #271c00;
  --color-catnip: #7ea88e;
  --color-catnip-50: #e2fbeb;
  --color-catnip-100: #d5f1df;
  --color-catnip-200: #bcddc8;
  --color-catnip-300: #a2c7b0;
  --color-catnip-400: #7ea88e;
  --color-catnip-500: #648d74;
  --color-catnip-600: #4c735b;
  --color-catnip-700: #385c47;
  --color-catnip-800: #294936;
  --color-catnip-900: #1e3929;
  --color-catnip-950: #102419;
  --color-breath-of-celery: #dbe7c6;
  --color-breath-of-celery-50: #e9f0dc;
  --color-breath-of-celery-100: #dbe7c6;
  --color-breath-of-celery-200: #cad4ba;
  --color-breath-of-celery-300: #b5bfa3;
  --color-breath-of-celery-400: #97a284;
  --color-breath-of-celery-500: #7d886a;
  --color-breath-of-celery-600: #656f52;
  --color-breath-of-celery-700: #50593f;
  --color-breath-of-celery-800: #3e462f;
  --color-breath-of-celery-900: #2f3623;
  --color-breath-of-celery-950: #1d2113;
}