Espresso to Distant Homeworld Color Palette

About this palette

Espresso to Distant Homeworld is a 5-color warm, vintage palette: #51362F (Espresso), #14647A (Teal With It), #B87567 (Döner Kebab), #FAA290 (Peach’s Daydream), #A5DEF0 (Distant Homeworld). It mixes brown, blue, red, pink tones and feels warm overall. The strongest text pairing is #51362F on #A5DEF0 with a contrast ratio of 7.46:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Espresso	rgb(81, 54, 47)	hsl(12, 27%, 25%)
Teal With It	rgb(20, 100, 122)	hsl(193, 72%, 28%)
Döner Kebab	rgb(184, 117, 103)	hsl(10, 36%, 56%)
Peach’s Daydream	rgb(250, 162, 144)	hsl(10, 91%, 77%)
Distant Homeworld	rgb(165, 222, 240)	hsl(194, 71%, 79%)

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.

Aa7.46:1 Very good#51362F on #A5DEF0
Aa7.46:1 Very good#A5DEF0 on #51362F
Aa5.54:1 Good#51362F on #FAA290
Aa5.54:1 Good#FAA290 on #51362F
Aa4.57:1 Good#14647A on #A5DEF0
Aa4.57:1 Good#A5DEF0 on #14647A
Aa3.39:1 Poor#14647A on #FAA290
Aa3.39:1 Poor#FAA290 on #14647A

Color blindness preview

CSS variables

/* Espresso to Distant Homeworld — https://swatchly.xyz/palette/51362f-14647a-b87567-faa290-a5def0 */
:root {
  --espresso: #51362f;
  --teal-with-it: #14647a;
  --d-ner-kebab: #b87567;
  --peach-s-daydream: #faa290;
  --distant-homeworld: #a5def0;
}

Tailwind CSS v4

/* Espresso to Distant Homeworld — https://swatchly.xyz/palette/51362f-14647a-b87567-faa290-a5def0 */
@theme {
  --color-espresso: #51362f;
  --color-espresso-50: #fff2ee;
  --color-espresso-100: #fce6e0;
  --color-espresso-200: #ebd1ca;
  --color-espresso-300: #d6b9b1;
  --color-espresso-400: #b7978f;
  --color-espresso-500: #9a7b73;
  --color-espresso-600: #7e6159;
  --color-espresso-700: #644a43;
  --color-espresso-800: #51362f;
  --color-espresso-900: #3c2a25;
  --color-espresso-950: #261915;
  --color-teal-with-it: #14647a;
  --color-teal-with-it-50: #e7f9ff;
  --color-teal-with-it-100: #cef2ff;
  --color-teal-with-it-200: #aee2f4;
  --color-teal-with-it-300: #92cde2;
  --color-teal-with-it-400: #6cb0c6;
  --color-teal-with-it-500: #4d95ac;
  --color-teal-with-it-600: #327a91;
  --color-teal-with-it-700: #14647a;
  --color-teal-with-it-800: #0a4e61;
  --color-teal-with-it-900: #013d4c;
  --color-teal-with-it-950: #002631;
  --color-d-ner-kebab: #b87567;
  --color-d-ner-kebab-50: #fff2f0;
  --color-d-ner-kebab-100: #ffe6e0;
  --color-d-ner-kebab-200: #ffcbc0;
  --color-d-ner-kebab-300: #efb2a5;
  --color-d-ner-kebab-400: #d39183;
  --color-d-ner-kebab-500: #b87567;
  --color-d-ner-kebab-600: #9a5a4d;
  --color-d-ner-kebab-700: #7e4539;
  --color-d-ner-kebab-800: #653329;
  --color-d-ner-kebab-900: #50261d;
  --color-d-ner-kebab-950: #341510;
  --color-peach-s-daydream: #faa290;
  --color-peach-s-daydream-50: #ffefeb;
  --color-peach-s-daydream-100: #ffe0d9;
  --color-peach-s-daydream-200: #ffc3b6;
  --color-peach-s-daydream-300: #faa290;
  --color-peach-s-daydream-400: #d78574;
  --color-peach-s-daydream-500: #bb6959;
  --color-peach-s-daydream-600: #9e5041;
  --color-peach-s-daydream-700: #823c2f;
  --color-peach-s-daydream-800: #6a2c21;
  --color-peach-s-daydream-900: #542017;
  --color-peach-s-daydream-950: #37120b;
  --color-distant-homeworld: #a5def0;
  --color-distant-homeworld-50: #dff7ff;
  --color-distant-homeworld-100: #cbeffa;
  --color-distant-homeworld-200: #a5def0;
  --color-distant-homeworld-300: #96c7d6;
  --color-distant-homeworld-400: #73a8b9;
  --color-distant-homeworld-500: #578e9e;
  --color-distant-homeworld-600: #3e7383;
  --color-distant-homeworld-700: #2a5c6b;
  --color-distant-homeworld-800: #1c4956;
  --color-distant-homeworld-900: #123843;
  --color-distant-homeworld-950: #07232b;
}