Burnt Coffee to Icy Plains Color Palette

About this palette

Burnt Coffee to Icy Plains is a 5-color warm, earthy, vintage palette: #2D1A10 (Burnt Coffee), #59698D (Haunt Mist), #D4996A (Coyote), #504C0D (Godzilla), #C6DBFE (Icy Plains). It mixes brown, blue, orange tones and feels warm overall. The strongest text pairing is #2D1A10 on #C6DBFE with a contrast ratio of 11.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Burnt Coffee	rgb(45, 26, 16)	hsl(21, 48%, 12%)
Haunt Mist	rgb(89, 105, 141)	hsl(222, 23%, 45%)
Coyote	rgb(212, 153, 106)	hsl(27, 55%, 62%)
Godzilla	rgb(80, 76, 13)	hsl(56, 72%, 18%)
Icy Plains	rgb(198, 219, 254)	hsl(218, 97%, 89%)

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.

Aa11.81:1 Very good#2D1A10 on #C6DBFE
Aa11.81:1 Very good#C6DBFE on #2D1A10
Aa6.76:1 Good#2D1A10 on #D4996A
Aa6.76:1 Good#D4996A on #2D1A10
Aa6.29:1 Good#504C0D on #C6DBFE
Aa6.29:1 Good#C6DBFE on #504C0D
Aa3.91:1 Poor#59698D on #C6DBFE
Aa3.91:1 Poor#C6DBFE on #59698D

Color blindness preview

CSS variables

/* Burnt Coffee to Icy Plains — https://swatchly.xyz/palette/2d1a10-59698d-d4996a-504c0d-c6dbfe */
:root {
  --burnt-coffee: #2d1a10;
  --haunt-mist: #59698d;
  --coyote: #d4996a;
  --godzilla: #504c0d;
  --icy-plains: #c6dbfe;
}

Tailwind CSS v4

/* Burnt Coffee to Icy Plains — https://swatchly.xyz/palette/2d1a10-59698d-d4996a-504c0d-c6dbfe */
@theme {
  --color-burnt-coffee: #2d1a10;
  --color-burnt-coffee-50: #fff2ec;
  --color-burnt-coffee-100: #f8e7df;
  --color-burnt-coffee-200: #e7d3c9;
  --color-burnt-coffee-300: #d2bcb0;
  --color-burnt-coffee-400: #b49c8f;
  --color-burnt-coffee-500: #998074;
  --color-burnt-coffee-600: #7d665a;
  --color-burnt-coffee-700: #655046;
  --color-burnt-coffee-800: #503e35;
  --color-burnt-coffee-900: #3e2f27;
  --color-burnt-coffee-950: #2d1a10;
  --color-haunt-mist: #59698d;
  --color-haunt-mist-50: #f1f5ff;
  --color-haunt-mist-100: #e2ebff;
  --color-haunt-mist-200: #c9d7f5;
  --color-haunt-mist-300: #b0c0e2;
  --color-haunt-mist-400: #8fa0c5;
  --color-haunt-mist-500: #7384a9;
  --color-haunt-mist-600: #59698d;
  --color-haunt-mist-700: #455373;
  --color-haunt-mist-800: #34405c;
  --color-haunt-mist-900: #273149;
  --color-haunt-mist-950: #171e2f;
  --color-coyote: #d4996a;
  --color-coyote-50: #fff5ee;
  --color-coyote-100: #ffeada;
  --color-coyote-200: #fed2b0;
  --color-coyote-300: #edba93;
  --color-coyote-400: #d4996a;
  --color-coyote-500: #b57d4e;
  --color-coyote-600: #976133;
  --color-coyote-700: #7c4a1f;
  --color-coyote-800: #633810;
  --color-coyote-900: #4d2906;
  --color-coyote-950: #321802;
  --color-godzilla: #504c0d;
  --color-godzilla-50: #f9f8d6;
  --color-godzilla-100: #efeec8;
  --color-godzilla-200: #dcdaae;
  --color-godzilla-300: #c8c693;
  --color-godzilla-400: #aba86f;
  --color-godzilla-500: #918d53;
  --color-godzilla-600: #77743a;
  --color-godzilla-700: #625e27;
  --color-godzilla-800: #504c0d;
  --color-godzilla-900: #3d3a0e;
  --color-godzilla-950: #272505;
  --color-icy-plains: #c6dbfe;
  --color-icy-plains-50: #f2f7ff;
  --color-icy-plains-100: #e3eeff;
  --color-icy-plains-200: #c6dbfe;
  --color-icy-plains-300: #b2c4e1;
  --color-icy-plains-400: #91a4c4;
  --color-icy-plains-500: #7588a8;
  --color-icy-plains-600: #5b6d8b;
  --color-icy-plains-700: #465671;
  --color-icy-plains-800: #35435b;
  --color-icy-plains-900: #273347;
  --color-icy-plains-950: #171f2e;
}