Black Cherry to Slime Girl Color Palette

About this palette

Black Cherry to Slime Girl is a 5-color warm, earthy, vintage palette: #311A29 (Black Cherry), #7B6C00 (Muddy Brown), #4E4E0F (Godzilla), #C7C9FF (Innocent Snowdrop), #30C18B (Slime Girl). It mixes red, brown, purple, green tones and feels warm overall. The strongest text pairing is #311A29 on #C7C9FF with a contrast ratio of 10.09:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Cherry	rgb(49, 26, 41)	hsl(321, 31%, 15%)
Muddy Brown	rgb(123, 108, 0)	hsl(53, 100%, 24%)
Godzilla	rgb(78, 78, 15)	hsl(60, 68%, 18%)
Innocent Snowdrop	rgb(199, 201, 255)	hsl(238, 100%, 89%)
Slime Girl	rgb(48, 193, 139)	hsl(158, 60%, 47%)

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.

Aa10.09:1 Very good#311A29 on #C7C9FF
Aa10.09:1 Very good#C7C9FF on #311A29
Aa6.96:1 Good#311A29 on #30C18B
Aa6.96:1 Good#30C18B on #311A29
Aa5.46:1 Good#4E4E0F on #C7C9FF
Aa5.46:1 Good#C7C9FF on #4E4E0F
Aa3.77:1 Poor#4E4E0F on #30C18B
Aa3.77:1 Poor#30C18B on #4E4E0F

Color blindness preview

CSS variables

/* Black Cherry to Slime Girl — https://swatchly.xyz/palette/311a29-7b6c00-4e4e0f-c7c9ff-30c18b */
:root {
  --black-cherry: #311a29;
  --muddy-brown: #7b6c00;
  --godzilla: #4e4e0f;
  --innocent-snowdrop: #c7c9ff;
  --slime-girl: #30c18b;
}

Tailwind CSS v4

/* Black Cherry to Slime Girl — https://swatchly.xyz/palette/311a29-7b6c00-4e4e0f-c7c9ff-30c18b */
@theme {
  --color-black-cherry: #311a29;
  --color-black-cherry-50: #fff0f9;
  --color-black-cherry-100: #f9e4f1;
  --color-black-cherry-200: #e7d0de;
  --color-black-cherry-300: #d3b8c8;
  --color-black-cherry-400: #b598a9;
  --color-black-cherry-500: #9a7d8f;
  --color-black-cherry-600: #7f6475;
  --color-black-cherry-700: #684f5e;
  --color-black-cherry-800: #533d4b;
  --color-black-cherry-900: #422f3b;
  --color-black-cherry-950: #311a29;
  --color-muddy-brown: #7b6c00;
  --color-muddy-brown-50: #fef7c9;
  --color-muddy-brown-100: #f6edb9;
  --color-muddy-brown-200: #e4d99b;
  --color-muddy-brown-300: #cfc27a;
  --color-muddy-brown-400: #b1a350;
  --color-muddy-brown-500: #96872d;
  --color-muddy-brown-600: #7b6c00;
  --color-muddy-brown-700: #625500;
  --color-muddy-brown-800: #4c4200;
  --color-muddy-brown-900: #3b3300;
  --color-muddy-brown-950: #251f00;
  --color-godzilla: #4e4e0f;
  --color-godzilla-50: #f7f8d6;
  --color-godzilla-100: #edefc8;
  --color-godzilla-200: #dadbae;
  --color-godzilla-300: #c5c793;
  --color-godzilla-400: #a8a970;
  --color-godzilla-500: #8e8f54;
  --color-godzilla-600: #75763b;
  --color-godzilla-700: #606028;
  --color-godzilla-800: #4e4e0f;
  --color-godzilla-900: #3c3c0f;
  --color-godzilla-950: #262605;
  --color-innocent-snowdrop: #c7c9ff;
  --color-innocent-snowdrop-50: #ecedff;
  --color-innocent-snowdrop-100: #dfe1ff;
  --color-innocent-snowdrop-200: #c7c9ff;
  --color-innocent-snowdrop-300: #b3b5e4;
  --color-innocent-snowdrop-400: #9596c8;
  --color-innocent-snowdrop-500: #7b7cae;
  --color-innocent-snowdrop-600: #636492;
  --color-innocent-snowdrop-700: #4f4f79;
  --color-innocent-snowdrop-800: #3e3e63;
  --color-innocent-snowdrop-900: #2f2f4e;
  --color-innocent-snowdrop-950: #1c1c33;
  --color-slime-girl: #30c18b;
  --color-slime-girl-50: #e1ffef;
  --color-slime-girl-100: #bcffde;
  --color-slime-girl-200: #98f0c7;
  --color-slime-girl-300: #73ddae;
  --color-slime-girl-400: #30c18b;
  --color-slime-girl-500: #00a271;
  --color-slime-girl-600: #00835a;
  --color-slime-girl-700: #006847;
  --color-slime-girl-800: #005136;
  --color-slime-girl-900: #003e29;
  --color-slime-girl-950: #002718;
}