Ethereal Espresso to Blossom Color Palette

About this palette

Ethereal Espresso to Blossom is a 5-color warm, earthy, vintage, gradient palette: #3B2618 (Ethereal Espresso), #904709 (Otterly Brown), #AB7E58 (Café au Lait), #E8B99A (Lama), #FFEADC (Blossom). It mixes brown, orange, white tones and feels warm overall. The strongest text pairing is #3B2618 on #FFEADC with a contrast ratio of 12.23:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ethereal Espresso	rgb(59, 38, 24)	hsl(24, 42%, 16%)
Otterly Brown	rgb(144, 71, 9)	hsl(28, 88%, 30%)
Café au Lait	rgb(171, 126, 88)	hsl(27, 33%, 51%)
Lama	rgb(232, 185, 154)	hsl(24, 63%, 76%)
Blossom	rgb(255, 234, 220)	hsl(24, 100%, 93%)

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.

Aa12.23:1 Super#3B2618 on #FFEADC
Aa12.23:1 Super#FFEADC on #3B2618
Aa8.02:1 Very good#3B2618 on #E8B99A
Aa8.02:1 Very good#E8B99A on #3B2618
Aa5.84:1 Good#904709 on #FFEADC
Aa5.84:1 Good#FFEADC on #904709
Aa3.97:1 Poor#3B2618 on #AB7E58
Aa3.97:1 Poor#AB7E58 on #3B2618

Color blindness preview

CSS variables

/* Ethereal Espresso to Blossom — https://swatchly.xyz/palette/3b2618-904709-ab7e58-e8b99a-ffeadc */
:root {
  --ethereal-espresso: #3b2618;
  --otterly-brown: #904709;
  --caf-au-lait: #ab7e58;
  --lama: #e8b99a;
  --blossom: #ffeadc;
}

Tailwind CSS v4

/* Ethereal Espresso to Blossom — https://swatchly.xyz/palette/3b2618-904709-ab7e58-e8b99a-ffeadc */
@theme {
  --color-ethereal-espresso: #3b2618;
  --color-ethereal-espresso-50: #fff2eb;
  --color-ethereal-espresso-100: #f9e7dc;
  --color-ethereal-espresso-200: #e8d3c6;
  --color-ethereal-espresso-300: #d3bcad;
  --color-ethereal-espresso-400: #b49a8a;
  --color-ethereal-espresso-500: #977d6d;
  --color-ethereal-espresso-600: #7a6253;
  --color-ethereal-espresso-700: #604b3d;
  --color-ethereal-espresso-800: #49382c;
  --color-ethereal-espresso-900: #3b2618;
  --color-ethereal-espresso-950: #211711;
  --color-otterly-brown: #904709;
  --color-otterly-brown-50: #fff2eb;
  --color-otterly-brown-100: #ffe5d6;
  --color-otterly-brown-200: #ffcdaf;
  --color-otterly-brown-300: #f8b287;
  --color-otterly-brown-400: #de9261;
  --color-otterly-brown-500: #c47643;
  --color-otterly-brown-600: #a85d28;
  --color-otterly-brown-700: #904709;
  --color-otterly-brown-800: #733600;
  --color-otterly-brown-900: #5a2800;
  --color-otterly-brown-950: #3b1800;
  --color-caf-au-lait: #ab7e58;
  --color-caf-au-lait-50: #fff3ea;
  --color-caf-au-lait-100: #ffe7d4;
  --color-caf-au-lait-200: #f5d1b4;
  --color-caf-au-lait-300: #e3ba98;
  --color-caf-au-lait-400: #c69975;
  --color-caf-au-lait-500: #ab7e58;
  --color-caf-au-lait-600: #8e633e;
  --color-caf-au-lait-700: #744d2b;
  --color-caf-au-lait-800: #5c3b1c;
  --color-caf-au-lait-900: #492c12;
  --color-caf-au-lait-950: #2f1a07;
  --color-lama: #e8b99a;
  --color-lama-50: #fff5ee;
  --color-lama-100: #ffe8da;
  --color-lama-200: #f5d2bc;
  --color-lama-300: #e8b99a;
  --color-lama-400: #c59a7d;
  --color-lama-500: #a97d60;
  --color-lama-600: #8c6347;
  --color-lama-700: #724c33;
  --color-lama-800: #5b3a23;
  --color-lama-900: #472b18;
  --color-lama-950: #2e1a0c;
  --color-blossom: #ffeadc;
  --color-blossom-50: #fff6f0;
  --color-blossom-100: #ffeadc;
  --color-blossom-200: #e6d7cd;
  --color-blossom-300: #d0bfb4;
  --color-blossom-400: #b29f92;
  --color-blossom-500: #968376;
  --color-blossom-600: #7a685c;
  --color-blossom-700: #625247;
  --color-blossom-800: #4d3f36;
  --color-blossom-900: #3c3028;
  --color-blossom-950: #261d18;
}