Start generating

Burnt Coffee to Freeze Up color palette

271E13Burnt Coffee564A3CMolasses687A8EWhale Shark7F9FB6Far HorizonsDAB79BCosy WoolDEEAFAFreeze Up
Open in generator Export PNG, PDF, ASE…

About this palette

Burnt Coffee to Freeze Up is a 6-color muted palette: #271E13 (Burnt Coffee), #564A3C (Molasses), #687A8E (Whale Shark), #7F9FB6 (Far Horizons), #DAB79B (Cosy Wool), #DEEAFA (Freeze Up). It mixes gray, blue, orange, white tones and feels cool overall. The strongest text pairing is #271E13 on #DEEAFA with a contrast ratio of 13.47:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Burnt Coffeergb(39, 30, 19)hsl(33, 34%, 11%)
Molassesrgb(86, 74, 60)hsl(32, 18%, 29%)
Whale Sharkrgb(104, 122, 142)hsl(212, 15%, 48%)
Far Horizonsrgb(127, 159, 182)hsl(205, 27%, 61%)
Cosy Woolrgb(218, 183, 155)hsl(27, 46%, 73%)
Freeze Uprgb(222, 234, 250)hsl(214, 74%, 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.

  • Aa13.47:1 Super#271E13 on #DEEAFA
  • Aa13.47:1 Super#DEEAFA on #271E13
  • Aa8.76:1 Very good#271E13 on #DAB79B
  • Aa8.76:1 Very good#DAB79B on #271E13
  • Aa7.07:1 Very good#564A3C on #DEEAFA
  • Aa7.07:1 Very good#DEEAFA on #564A3C
  • Aa5.88:1 Good#271E13 on #7F9FB6
  • Aa5.88:1 Good#7F9FB6 on #271E13

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Burnt Coffee to Freeze Up — https://swatchly.xyz/palette/271e13-564a3c-687a8e-7f9fb6-dab79b-deeafa */
:root {
  --burnt-coffee: #271e13;
  --molasses: #564a3c;
  --whale-shark: #687a8e;
  --far-horizons: #7f9fb6;
  --cosy-wool: #dab79b;
  --freeze-up: #deeafa;
}

Tailwind CSS v4

/* Burnt Coffee to Freeze Up — https://swatchly.xyz/palette/271e13-564a3c-687a8e-7f9fb6-dab79b-deeafa */
@theme {
  --color-burnt-coffee: #271e13;
  --color-burnt-coffee-50: #fbf4ec;
  --color-burnt-coffee-100: #f2eae1;
  --color-burnt-coffee-200: #dfd6cb;
  --color-burnt-coffee-300: #c9bfb3;
  --color-burnt-coffee-400: #ab9f92;
  --color-burnt-coffee-500: #908477;
  --color-burnt-coffee-600: #756a5d;
  --color-burnt-coffee-700: #5e5448;
  --color-burnt-coffee-800: #4a4137;
  --color-burnt-coffee-900: #393229;
  --color-burnt-coffee-950: #271e13;
  --color-molasses: #564a3c;
  --color-molasses-50: #fcf4ea;
  --color-molasses-100: #f3eadf;
  --color-molasses-200: #dfd4c7;
  --color-molasses-300: #c7bbad;
  --color-molasses-400: #a79a8b;
  --color-molasses-500: #8a7d6e;
  --color-molasses-600: #6e6254;
  --color-molasses-700: #564a3c;
  --color-molasses-800: #43392f;
  --color-molasses-900: #342c23;
  --color-molasses-950: #201a14;
  --color-whale-shark: #687a8e;
  --color-whale-shark-50: #eef6ff;
  --color-whale-shark-100: #e3effd;
  --color-whale-shark-200: #d0deee;
  --color-whale-shark-300: #b9cadc;
  --color-whale-shark-400: #9aacc0;
  --color-whale-shark-500: #8093a7;
  --color-whale-shark-600: #687a8e;
  --color-whale-shark-700: #506173;
  --color-whale-shark-800: #3d4b5c;
  --color-whale-shark-900: #2d3947;
  --color-whale-shark-950: #1b232d;
  --color-far-horizons: #7f9fb6;
  --color-far-horizons-50: #e7f5ff;
  --color-far-horizons-100: #d5ebfb;
  --color-far-horizons-200: #bdd6e9;
  --color-far-horizons-300: #a2bfd4;
  --color-far-horizons-400: #7f9fb6;
  --color-far-horizons-500: #66859b;
  --color-far-horizons-600: #4e6b80;
  --color-far-horizons-700: #3b5668;
  --color-far-horizons-800: #2c4354;
  --color-far-horizons-900: #203442;
  --color-far-horizons-950: #12212b;
  --color-cosy-wool: #dab79b;
  --color-cosy-wool-50: #fff1e6;
  --color-cosy-wool-100: #fce5d3;
  --color-cosy-wool-200: #ebd0bb;
  --color-cosy-wool-300: #dab79b;
  --color-cosy-wool-400: #b9987e;
  --color-cosy-wool-500: #9e7d63;
  --color-cosy-wool-600: #82644a;
  --color-cosy-wool-700: #6a4e37;
  --color-cosy-wool-800: #543c28;
  --color-cosy-wool-900: #422e1d;
  --color-cosy-wool-950: #2a1c0f;
  --color-freeze-up: #deeafa;
  --color-freeze-up-50: #edf4fd;
  --color-freeze-up-100: #deeafa;
  --color-freeze-up-200: #ced6e2;
  --color-freeze-up-300: #b6c0ce;
  --color-freeze-up-400: #97a1b0;
  --color-freeze-up-500: #7c8695;
  --color-freeze-up-600: #626c7a;
  --color-freeze-up-700: #4d5662;
  --color-freeze-up-800: #3b434e;
  --color-freeze-up-900: #2d333c;
  --color-freeze-up-950: #1b2026;
}

Similar palettes