Burnt Coffee to Digital Lavender Color Palette

About this palette

Burnt Coffee to Digital Lavender is a 5-color cool, earthy, vintage palette: #271708 (Burnt Coffee), #6A4102 (Very Coffee), #5D6F38 (Muddy Green), #8392BF (King Neptune), #BFC5EF (Digital Lavender). It mixes brown, green, blue, purple tones and feels cool overall. The strongest text pairing is #271708 on #BFC5EF with a contrast ratio of 10.27:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Burnt Coffee	rgb(39, 23, 8)	hsl(29, 66%, 9%)
Very Coffee	rgb(106, 65, 2)	hsl(36, 96%, 21%)
Muddy Green	rgb(93, 111, 56)	hsl(80, 33%, 33%)
King Neptune	rgb(131, 146, 191)	hsl(225, 32%, 63%)
Digital Lavender	rgb(191, 197, 239)	hsl(232, 60%, 84%)

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.

Aa10.27:1 Very good#271708 on #BFC5EF
Aa10.27:1 Very good#BFC5EF on #271708
Aa5.63:1 Good#271708 on #8392BF
Aa5.63:1 Good#8392BF on #271708
Aa5.25:1 Good#6A4102 on #BFC5EF
Aa5.25:1 Good#BFC5EF on #6A4102
Aa3.28:1 Poor#5D6F38 on #BFC5EF
Aa3.28:1 Poor#BFC5EF on #5D6F38

Color blindness preview

CSS variables

/* Burnt Coffee to Digital Lavender — https://swatchly.xyz/palette/271708-6a4102-5d6f38-8392bf-bfc5ef */
:root {
  --burnt-coffee: #271708;
  --very-coffee: #6a4102;
  --muddy-green: #5d6f38;
  --king-neptune: #8392bf;
  --digital-lavender: #bfc5ef;
}

Tailwind CSS v4

/* Burnt Coffee to Digital Lavender — https://swatchly.xyz/palette/271708-6a4102-5d6f38-8392bf-bfc5ef */
@theme {
  --color-burnt-coffee: #271708;
  --color-burnt-coffee-50: #fff3e8;
  --color-burnt-coffee-100: #f7e8dc;
  --color-burnt-coffee-200: #e5d4c6;
  --color-burnt-coffee-300: #d0bdad;
  --color-burnt-coffee-400: #b29d8c;
  --color-burnt-coffee-500: #96816f;
  --color-burnt-coffee-600: #796655;
  --color-burnt-coffee-700: #604f40;
  --color-burnt-coffee-800: #4b3c2f;
  --color-burnt-coffee-900: #392c22;
  --color-burnt-coffee-950: #271708;
  --color-very-coffee: #6a4102;
  --color-very-coffee-50: #fff3e6;
  --color-very-coffee-100: #ffe7cd;
  --color-very-coffee-200: #f5d0a9;
  --color-very-coffee-300: #e3bb8e;
  --color-very-coffee-400: #c89c6a;
  --color-very-coffee-500: #ae814d;
  --color-very-coffee-600: #946834;
  --color-very-coffee-700: #7c5421;
  --color-very-coffee-800: #6a4102;
  --color-very-coffee-900: #513207;
  --color-very-coffee-950: #361f01;
  --color-muddy-green: #5d6f38;
  --color-muddy-green-50: #eefbda;
  --color-muddy-green-100: #e3f1cc;
  --color-muddy-green-200: #cdddb1;
  --color-muddy-green-300: #b4c794;
  --color-muddy-green-400: #93a770;
  --color-muddy-green-500: #788b53;
  --color-muddy-green-600: #5d6f38;
  --color-muddy-green-700: #495828;
  --color-muddy-green-800: #38451a;
  --color-muddy-green-900: #2a3611;
  --color-muddy-green-950: #192107;
  --color-king-neptune: #8392bf;
  --color-king-neptune-50: #f5f7ff;
  --color-king-neptune-100: #eaf0ff;
  --color-king-neptune-200: #d3deff;
  --color-king-neptune-300: #bcc9f0;
  --color-king-neptune-400: #9dacd7;
  --color-king-neptune-500: #8392bf;
  --color-king-neptune-600: #6775a0;
  --color-king-neptune-700: #4f5c83;
  --color-king-neptune-800: #3c4769;
  --color-king-neptune-900: #2c3552;
  --color-king-neptune-950: #192035;
  --color-digital-lavender: #bfc5ef;
  --color-digital-lavender-50: #f7f8ff;
  --color-digital-lavender-100: #edefff;
  --color-digital-lavender-200: #d7dcfa;
  --color-digital-lavender-300: #bfc5ef;
  --color-digital-lavender-400: #9fa4cb;
  --color-digital-lavender-500: #8288af;
  --color-digital-lavender-600: #676c91;
  --color-digital-lavender-700: #505476;
  --color-digital-lavender-800: #3d415e;
  --color-digital-lavender-900: #2e3149;
  --color-digital-lavender-950: #1c1e2f;
}