Turtle to Money Color Palette

About this palette

Turtle to Money is a 4-color muted, vintage palette: #553E2B (Turtle), #15212A (The Count’s Black), #E0BBDB (Blackberry Yoghurt), #739876 (Money). It mixes brown, gray, pink, green tones and feels warm overall. The strongest text pairing is #15212A on #E0BBDB with a contrast ratio of 9.59:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Turtle	rgb(85, 62, 43)	hsl(27, 33%, 25%)
The Count’s Black	rgb(21, 33, 42)	hsl(206, 33%, 12%)
Blackberry Yoghurt	rgb(224, 187, 219)	hsl(308, 37%, 81%)
Money	rgb(115, 152, 118)	hsl(125, 15%, 52%)

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.59:1 Very good#15212A on #E0BBDB
Aa9.59:1 Very good#E0BBDB on #15212A
Aa5.83:1 Good#553E2B on #E0BBDB
Aa5.83:1 Good#E0BBDB on #553E2B
Aa5.05:1 Good#15212A on #739876
Aa5.05:1 Good#739876 on #15212A
Aa3.07:1 Poor#553E2B on #739876
Aa3.07:1 Poor#739876 on #553E2B

Color blindness preview

CSS variables

/* Turtle to Money — https://swatchly.xyz/palette/553e2b-15212a-e0bbdb-739876 */
:root {
  --turtle: #553e2b;
  --the-count-s-black: #15212a;
  --blackberry-yoghurt: #e0bbdb;
  --money: #739876;
}

Tailwind CSS v4

/* Turtle to Money — https://swatchly.xyz/palette/553e2b-15212a-e0bbdb-739876 */
@theme {
  --color-turtle: #553e2b;
  --color-turtle-50: #fff3e9;
  --color-turtle-100: #f9e7d9;
  --color-turtle-200: #e8d3c2;
  --color-turtle-300: #d4bca9;
  --color-turtle-400: #b69c88;
  --color-turtle-500: #9b816c;
  --color-turtle-600: #806753;
  --color-turtle-700: #67513f;
  --color-turtle-800: #553e2b;
  --color-turtle-900: #403022;
  --color-turtle-950: #291d13;
  --color-the-count-s-black: #15212a;
  --color-the-count-s-black-50: #eef6fd;
  --color-the-count-s-black-100: #e3edf4;
  --color-the-count-s-black-200: #ced9e2;
  --color-the-count-s-black-300: #b6c3cd;
  --color-the-count-s-black-400: #95a4af;
  --color-the-count-s-black-500: #7a8894;
  --color-the-count-s-black-600: #606e79;
  --color-the-count-s-black-700: #4b5761;
  --color-the-count-s-black-800: #39444d;
  --color-the-count-s-black-900: #2b343b;
  --color-the-count-s-black-950: #15212a;
  --color-blackberry-yoghurt: #e0bbdb;
  --color-blackberry-yoghurt-50: #fff6fe;
  --color-blackberry-yoghurt-100: #ffe8fc;
  --color-blackberry-yoghurt-200: #efd4eb;
  --color-blackberry-yoghurt-300: #e0bbdb;
  --color-blackberry-yoghurt-400: #bd9bb8;
  --color-blackberry-yoghurt-500: #a07e9c;
  --color-blackberry-yoghurt-600: #84637f;
  --color-blackberry-yoghurt-700: #6a4c66;
  --color-blackberry-yoghurt-800: #533950;
  --color-blackberry-yoghurt-900: #402a3d;
  --color-blackberry-yoghurt-950: #291927;
  --color-money: #739876;
  --color-money-50: #e8fde9;
  --color-money-100: #ddf5df;
  --color-money-200: #c8e4ca;
  --color-money-300: #b0d0b2;
  --color-money-400: #8eb291;
  --color-money-500: #739876;
  --color-money-600: #587c5b;
  --color-money-700: #426345;
  --color-money-800: #314d34;
  --color-money-900: #233c26;
  --color-money-950: #132515;
}