Anthracite to Bitter Melon color palette

2E252EAnthracite 40533CHighlander 446F87Crashing Waves BAA192Hickory C7D2BBBitter Melon

About this palette

Anthracite to Bitter Melon is a 5-color muted, gradient palette: #2E252E (Anthracite), #40533C (Highlander), #446F87 (Crashing Waves), #BAA192 (Hickory), #C7D2BB (Bitter Melon). It mixes gray, green, blue, orange tones and feels cool overall. The strongest text pairing is #2E252E on #C7D2BB with a contrast ratio of 9.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Anthracite	rgb(46, 37, 46)	hsl(300, 11%, 16%)
Highlander	rgb(64, 83, 60)	hsl(110, 16%, 28%)
Crashing Waves	rgb(68, 111, 135)	hsl(201, 33%, 40%)
Hickory	rgb(186, 161, 146)	hsl(23, 22%, 65%)
Bitter Melon	rgb(199, 210, 187)	hsl(89, 20%, 78%)

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.41:1 Very good#2E252E on #C7D2BB
Aa9.41:1 Very good#C7D2BB on #2E252E
Aa6.06:1 Good#2E252E on #BAA192
Aa6.06:1 Good#BAA192 on #2E252E
Aa5.30:1 Good#40533C on #C7D2BB
Aa5.30:1 Good#C7D2BB on #40533C
Aa3.45:1 Poor#446F87 on #C7D2BB
Aa3.45:1 Poor#C7D2BB on #446F87

Color blindness preview

CSS variables

/* Anthracite to Bitter Melon — https://swatchly.xyz/palette/2e252e-40533c-446f87-baa192-c7d2bb */
:root {
  --anthracite: #2e252e;
  --highlander: #40533c;
  --crashing-waves: #446f87;
  --hickory: #baa192;
  --bitter-melon: #c7d2bb;
}

Tailwind CSS v4

/* Anthracite to Bitter Melon — https://swatchly.xyz/palette/2e252e-40533c-446f87-baa192-c7d2bb */
@theme {
  --color-anthracite: #2e252e;
  --color-anthracite-50: #f9f3f9;
  --color-anthracite-100: #f0e8f0;
  --color-anthracite-200: #ddd4dd;
  --color-anthracite-300: #c7bdc7;
  --color-anthracite-400: #a89da8;
  --color-anthracite-500: #8f848f;
  --color-anthracite-600: #766c76;
  --color-anthracite-700: #615761;
  --color-anthracite-800: #4f464f;
  --color-anthracite-900: #403840;
  --color-anthracite-950: #2e252e;
  --color-highlander: #40533c;
  --color-highlander-50: #edf9ea;
  --color-highlander-100: #e2f0df;
  --color-highlander-200: #cbdcc7;
  --color-highlander-300: #b1c4ad;
  --color-highlander-400: #8fa48b;
  --color-highlander-500: #72876e;
  --color-highlander-600: #586b54;
  --color-highlander-700: #40533c;
  --color-highlander-800: #32402f;
  --color-highlander-900: #253223;
  --color-highlander-950: #161e14;
  --color-crashing-waves: #446f87;
  --color-crashing-waves-50: #ebf7ff;
  --color-crashing-waves-100: #d5efff;
  --color-crashing-waves-200: #badcf0;
  --color-crashing-waves-300: #9fc6dd;
  --color-crashing-waves-400: #7ba6bf;
  --color-crashing-waves-500: #5f8aa3;
  --color-crashing-waves-600: #446f87;
  --color-crashing-waves-700: #32586d;
  --color-crashing-waves-800: #234557;
  --color-crashing-waves-900: #183545;
  --color-crashing-waves-950: #0c212c;
  --color-hickory: #baa192;
  --color-hickory-50: #fff5ef;
  --color-hickory-100: #fbeae1;
  --color-hickory-200: #ead7cc;
  --color-hickory-300: #d6c1b4;
  --color-hickory-400: #baa192;
  --color-hickory-500: #9d8576;
  --color-hickory-600: #806a5c;
  --color-hickory-700: #675346;
  --color-hickory-800: #514035;
  --color-hickory-900: #3f3027;
  --color-hickory-950: #271d16;
  --color-bitter-melon: #c7d2bb;
  --color-bitter-melon-50: #eaf1e3;
  --color-bitter-melon-100: #dee6d6;
  --color-bitter-melon-200: #c7d2bb;
  --color-bitter-melon-300: #b3bda9;
  --color-bitter-melon-400: #959f8a;
  --color-bitter-melon-500: #7c8670;
  --color-bitter-melon-600: #636d59;
  --color-bitter-melon-700: #4f5745;
  --color-bitter-melon-800: #3e4535;
  --color-bitter-melon-900: #2f3528;
  --color-bitter-melon-950: #1d2117;
}