Turtle to Turquoise Tortoise color palette

553D2FTurtle E7BD9CFabulous Fawn 8588B4Galactic Gossamer EBE8FFHolographic Lavender 577C69Turquoise Tortoise

Open in generator Export PNG, PDF, ASE…

About this palette

Turtle to Turquoise Tortoise is a 5-color muted, earthy, vintage palette: #553D2F (Turtle), #E7BD9C (Fabulous Fawn), #8588B4 (Galactic Gossamer), #EBE8FF (Holographic Lavender), #577C69 (Turquoise Tortoise). It mixes brown, orange, purple, white, green tones and feels balanced overall. The strongest text pairing is #553D2F on #EBE8FF with a contrast ratio of 8.36:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Turtle	rgb(85, 61, 47)	hsl(22, 29%, 26%)
Fabulous Fawn	rgb(231, 189, 156)	hsl(26, 61%, 76%)
Galactic Gossamer	rgb(133, 136, 180)	hsl(236, 24%, 61%)
Holographic Lavender	rgb(235, 232, 255)	hsl(248, 100%, 95%)
Turquoise Tortoise	rgb(87, 124, 105)	hsl(149, 18%, 41%)

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.

Aa8.36:1 Very good#553D2F on #EBE8FF
Aa8.36:1 Very good#EBE8FF on #553D2F
Aa5.80:1 Good#553D2F on #E7BD9C
Aa5.80:1 Good#E7BD9C on #553D2F
Aa3.90:1 Poor#EBE8FF on #577C69
Aa3.90:1 Poor#577C69 on #EBE8FF

Color blindness preview

CSS variables

/* Turtle to Turquoise Tortoise — https://swatchly.xyz/palette/553d2f-e7bd9c-8588b4-ebe8ff-577c69 */
:root {
  --turtle: #553d2f;
  --fabulous-fawn: #e7bd9c;
  --galactic-gossamer: #8588b4;
  --holographic-lavender: #ebe8ff;
  --turquoise-tortoise: #577c69;
}

Tailwind CSS v4

/* Turtle to Turquoise Tortoise — https://swatchly.xyz/palette/553d2f-e7bd9c-8588b4-ebe8ff-577c69 */
@theme {
  --color-turtle: #553d2f;
  --color-turtle-50: #fff2eb;
  --color-turtle-100: #fae7dc;
  --color-turtle-200: #e9d2c6;
  --color-turtle-300: #d4bbad;
  --color-turtle-400: #b79b8c;
  --color-turtle-500: #9b8071;
  --color-turtle-600: #806657;
  --color-turtle-700: #685043;
  --color-turtle-800: #553d2f;
  --color-turtle-900: #402f25;
  --color-turtle-950: #291d15;
  --color-fabulous-fawn: #e7bd9c;
  --color-fabulous-fawn-50: #fff6ef;
  --color-fabulous-fawn-100: #ffebdb;
  --color-fabulous-fawn-200: #f4d6be;
  --color-fabulous-fawn-300: #e7bd9c;
  --color-fabulous-fawn-400: #c49d7f;
  --color-fabulous-fawn-500: #a78061;
  --color-fabulous-fawn-600: #8a6547;
  --color-fabulous-fawn-700: #704f33;
  --color-fabulous-fawn-800: #593c24;
  --color-fabulous-fawn-900: #452d18;
  --color-fabulous-fawn-950: #2c1b0c;
  --color-galactic-gossamer: #8588b4;
  --color-galactic-gossamer-50: #f4f5ff;
  --color-galactic-gossamer-100: #eaecff;
  --color-galactic-gossamer-200: #d5d8fa;
  --color-galactic-gossamer-300: #bfc2e9;
  --color-galactic-gossamer-400: #a0a3ce;
  --color-galactic-gossamer-500: #8588b4;
  --color-galactic-gossamer-600: #6a6c96;
  --color-galactic-gossamer-700: #53557b;
  --color-galactic-gossamer-800: #404163;
  --color-galactic-gossamer-900: #30314d;
  --color-galactic-gossamer-950: #1d1e32;
  --color-holographic-lavender: #ebe8ff;
  --color-holographic-lavender-50: #f5f4ff;
  --color-holographic-lavender-100: #ebe8ff;
  --color-holographic-lavender-200: #d7d5e6;
  --color-holographic-lavender-300: #c1bed1;
  --color-holographic-lavender-400: #a19fb3;
  --color-holographic-lavender-500: #868398;
  --color-holographic-lavender-600: #6c697c;
  --color-holographic-lavender-700: #555364;
  --color-holographic-lavender-800: #42404f;
  --color-holographic-lavender-900: #33313e;
  --color-holographic-lavender-950: #1f1e27;
  --color-turquoise-tortoise: #577c69;
  --color-turquoise-tortoise-50: #e5fbef;
  --color-turquoise-tortoise-100: #dbf3e6;
  --color-turquoise-tortoise-200: #c5e2d2;
  --color-turquoise-tortoise-300: #adcebc;
  --color-turquoise-tortoise-400: #8cb09d;
  --color-turquoise-tortoise-500: #709682;
  --color-turquoise-tortoise-600: #577c69;
  --color-turquoise-tortoise-700: #416352;
  --color-turquoise-tortoise-800: #304e3f;
  --color-turquoise-tortoise-900: #223c2f;
  --color-turquoise-tortoise-950: #13261c;
}