Black Cherry to Sea Glass Teal color palette

291B29Black Cherry 375000Godzilla 007160Tropical Rainforest AE7FA3Romanov Mauve 91C576Pistachio A7E3D8Sea Glass Teal

Open in generator Export PNG, PDF, ASE…

About this palette

Black Cherry to Sea Glass Teal is a 6-color cool palette: #291B29 (Black Cherry), #375000 (Godzilla), #007160 (Tropical Rainforest), #AE7FA3 (Romanov Mauve), #91C576 (Pistachio), #A7E3D8 (Sea Glass Teal). It mixes gray, green, turquoise, pink tones and feels cool overall. The strongest text pairing is #291B29 on #A7E3D8 with a contrast ratio of 11.40:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Cherry	rgb(41, 27, 41)	hsl(300, 21%, 13%)
Godzilla	rgb(55, 80, 0)	hsl(79, 100%, 16%)
Tropical Rainforest	rgb(0, 113, 96)	hsl(171, 100%, 22%)
Romanov Mauve	rgb(174, 127, 163)	hsl(314, 22%, 59%)
Pistachio	rgb(145, 197, 118)	hsl(99, 41%, 62%)
Sea Glass Teal	rgb(167, 227, 216)	hsl(169, 52%, 77%)

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.

Aa11.40:1 Very good#291B29 on #A7E3D8
Aa11.40:1 Very good#A7E3D8 on #291B29
Aa8.15:1 Very good#291B29 on #91C576
Aa8.15:1 Very good#91C576 on #291B29
Aa6.33:1 Good#375000 on #A7E3D8
Aa6.33:1 Good#A7E3D8 on #375000
Aa4.96:1 Good#291B29 on #AE7FA3
Aa4.96:1 Good#AE7FA3 on #291B29

Color blindness preview

CSS variables

/* Black Cherry to Sea Glass Teal — https://swatchly.xyz/palette/291b29-375000-007160-ae7fa3-91c576-a7e3d8 */
:root {
  --black-cherry: #291b29;
  --godzilla: #375000;
  --tropical-rainforest: #007160;
  --romanov-mauve: #ae7fa3;
  --pistachio: #91c576;
  --sea-glass-teal: #a7e3d8;
}

Tailwind CSS v4

/* Black Cherry to Sea Glass Teal — https://swatchly.xyz/palette/291b29-375000-007160-ae7fa3-91c576-a7e3d8 */
@theme {
  --color-black-cherry: #291b29;
  --color-black-cherry-50: #fcf1fc;
  --color-black-cherry-100: #f3e7f3;
  --color-black-cherry-200: #e1d2e0;
  --color-black-cherry-300: #cbbbcb;
  --color-black-cherry-400: #ad9bac;
  --color-black-cherry-500: #918091;
  --color-black-cherry-600: #776676;
  --color-black-cherry-700: #5f505f;
  --color-black-cherry-800: #4c3e4b;
  --color-black-cherry-900: #3b303b;
  --color-black-cherry-950: #291b29;
  --color-godzilla: #375000;
  --color-godzilla-50: #ebfdd5;
  --color-godzilla-100: #dff4c7;
  --color-godzilla-200: #cae2ac;
  --color-godzilla-300: #b2cd90;
  --color-godzilla-400: #92af6b;
  --color-godzilla-500: #77944e;
  --color-godzilla-600: #5e7a34;
  --color-godzilla-700: #4a6321;
  --color-godzilla-800: #375000;
  --color-godzilla-900: #2b3d08;
  --color-godzilla-950: #192702;
  --color-tropical-rainforest: #007160;
  --color-tropical-rainforest-50: #d9fff5;
  --color-tropical-rainforest-100: #c1f6e8;
  --color-tropical-rainforest-200: #a2e3d3;
  --color-tropical-rainforest-300: #80ccba;
  --color-tropical-rainforest-400: #55ac99;
  --color-tropical-rainforest-500: #328e7c;
  --color-tropical-rainforest-600: #007160;
  --color-tropical-rainforest-700: #005a4c;
  --color-tropical-rainforest-800: #00463b;
  --color-tropical-rainforest-900: #00372e;
  --color-tropical-rainforest-950: #00221c;
  --color-romanov-mauve: #ae7fa3;
  --color-romanov-mauve-50: #fff3fc;
  --color-romanov-mauve-100: #ffe7f9;
  --color-romanov-mauve-200: #f5d0eb;
  --color-romanov-mauve-300: #e3bad8;
  --color-romanov-mauve-400: #c79abc;
  --color-romanov-mauve-500: #ae7fa3;
  --color-romanov-mauve-600: #906386;
  --color-romanov-mauve-700: #754c6c;
  --color-romanov-mauve-800: #5d3955;
  --color-romanov-mauve-900: #482a41;
  --color-romanov-mauve-950: #2e1829;
  --color-pistachio: #91c576;
  --color-pistachio-50: #d9faca;
  --color-pistachio-100: #caefb9;
  --color-pistachio-200: #b0db9b;
  --color-pistachio-300: #91c576;
  --color-pistachio-400: #75a75b;
  --color-pistachio-500: #5c8e41;
  --color-pistachio-600: #46742a;
  --color-pistachio-700: #345e18;
  --color-pistachio-800: #264c0c;
  --color-pistachio-900: #1c3c04;
  --color-pistachio-950: #0f2601;
  --color-sea-glass-teal: #a7e3d8;
  --color-sea-glass-teal-50: #dbfcf5;
  --color-sea-glass-teal-100: #cdf2eb;
  --color-sea-glass-teal-200: #a7e3d8;
  --color-sea-glass-teal-300: #98cbc1;
  --color-sea-glass-teal-400: #75ada3;
  --color-sea-glass-teal-500: #589288;
  --color-sea-glass-teal-600: #3e776e;
  --color-sea-glass-teal-700: #2b6057;
  --color-sea-glass-teal-800: #1c4c45;
  --color-sea-glass-teal-900: #113b35;
  --color-sea-glass-teal-950: #072521;
}