Pretty Pastry to Turtle Color Palette

About this palette

Pretty Pastry to Turtle is a 5-color muted, gradient palette: #E1D0B4 (Pretty Pastry), #95A8B8 (Robotic Gods), #69847B (Aloe Vera), #685061 (Hibernation), #504130 (Turtle). It mixes yellow, gray, pink tones and feels warm overall. The strongest text pairing is #E1D0B4 on #504130 with a contrast ratio of 6.49:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pretty Pastry	rgb(225, 208, 180)	hsl(37, 43%, 79%)
Robotic Gods	rgb(149, 168, 184)	hsl(207, 20%, 65%)
Aloe Vera	rgb(105, 132, 123)	hsl(160, 11%, 46%)
Hibernation	rgb(104, 80, 97)	hsl(318, 13%, 36%)
Turtle	rgb(80, 65, 48)	hsl(32, 25%, 25%)

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.

Aa6.49:1 Good#E1D0B4 on #504130
Aa6.49:1 Good#504130 on #E1D0B4
Aa4.77:1 Good#E1D0B4 on #685061
Aa4.77:1 Good#685061 on #E1D0B4
Aa4.01:1 Poor#95A8B8 on #504130
Aa4.01:1 Poor#504130 on #95A8B8

Color blindness preview

CSS variables

/* Pretty Pastry to Turtle — https://swatchly.xyz/palette/e1d0b4-95a8b8-69847b-685061-504130 */
:root {
  --pretty-pastry: #e1d0b4;
  --robotic-gods: #95a8b8;
  --aloe-vera: #69847b;
  --hibernation: #685061;
  --turtle: #504130;
}

Tailwind CSS v4

/* Pretty Pastry to Turtle — https://swatchly.xyz/palette/e1d0b4-95a8b8-69847b-685061-504130 */
@theme {
  --color-pretty-pastry: #e1d0b4;
  --color-pretty-pastry-50: #faf0e0;
  --color-pretty-pastry-100: #f0e5d3;
  --color-pretty-pastry-200: #e1d0b4;
  --color-pretty-pastry-300: #c9bba3;
  --color-pretty-pastry-400: #ac9c82;
  --color-pretty-pastry-500: #918268;
  --color-pretty-pastry-600: #77684f;
  --color-pretty-pastry-700: #60523c;
  --color-pretty-pastry-800: #4c412d;
  --color-pretty-pastry-900: #3b3120;
  --color-pretty-pastry-950: #251e12;
  --color-robotic-gods: #95a8b8;
  --color-robotic-gods-50: #eff8ff;
  --color-robotic-gods-100: #e3eff9;
  --color-robotic-gods-200: #cedce8;
  --color-robotic-gods-300: #b6c7d4;
  --color-robotic-gods-400: #95a8b8;
  --color-robotic-gods-500: #798c9b;
  --color-robotic-gods-600: #5f717f;
  --color-robotic-gods-700: #495966;
  --color-robotic-gods-800: #374551;
  --color-robotic-gods-900: #29353f;
  --color-robotic-gods-950: #182027;
  --color-aloe-vera: #69847b;
  --color-aloe-vera-50: #e7f8f2;
  --color-aloe-vera-100: #daede6;
  --color-aloe-vera-200: #c2d8d1;
  --color-aloe-vera-300: #a8c1b8;
  --color-aloe-vera-400: #86a198;
  --color-aloe-vera-500: #69847b;
  --color-aloe-vera-600: #526b63;
  --color-aloe-vera-700: #3e554e;
  --color-aloe-vera-800: #2f433d;
  --color-aloe-vera-900: #23342f;
  --color-aloe-vera-950: #15211d;
  --color-hibernation: #685061;
  --color-hibernation-50: #fff0fa;
  --color-hibernation-100: #f7e5f1;
  --color-hibernation-200: #e6d1df;
  --color-hibernation-300: #d2baca;
  --color-hibernation-400: #b49aac;
  --color-hibernation-500: #997f92;
  --color-hibernation-600: #7f6677;
  --color-hibernation-700: #685061;
  --color-hibernation-800: #523e4c;
  --color-hibernation-900: #3f2f3b;
  --color-hibernation-950: #281c25;
  --color-turtle: #504130;
  --color-turtle-50: #fef3e8;
  --color-turtle-100: #f5e9dc;
  --color-turtle-200: #e3d5c6;
  --color-turtle-300: #cebead;
  --color-turtle-400: #b09f8d;
  --color-turtle-500: #958471;
  --color-turtle-600: #7a6a58;
  --color-turtle-700: #625444;
  --color-turtle-800: #504130;
  --color-turtle-900: #3d3226;
  --color-turtle-950: #261f16;
}