Hamster Fur to Burnt Coffee Color Palette

About this palette

Hamster Fur to Burnt Coffee is a 5-color warm, earthy, vintage palette: #A28144 (Hamster Fur), #DBECFF (Cloudless), #E8AE5E (Shiny Trumpet), #2C50A0 (Fist of the North Star), #281A00 (Burnt Coffee). It mixes yellow, white, orange, blue, brown tones and feels warm overall. The strongest text pairing is #DBECFF on #281A00 with a contrast ratio of 14.10:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hamster Fur	rgb(162, 129, 68)	hsl(39, 41%, 45%)
Cloudless	rgb(219, 236, 255)	hsl(212, 100%, 93%)
Shiny Trumpet	rgb(232, 174, 94)	hsl(35, 75%, 64%)
Fist of the North Star	rgb(44, 80, 160)	hsl(221, 57%, 40%)
Burnt Coffee	rgb(40, 26, 0)	hsl(39, 100%, 8%)

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.

Aa14.10:1 Super#DBECFF on #281A00
Aa14.10:1 Super#281A00 on #DBECFF
Aa8.60:1 Very good#E8AE5E on #281A00
Aa8.60:1 Very good#281A00 on #E8AE5E
Aa6.32:1 Good#DBECFF on #2C50A0
Aa6.32:1 Good#2C50A0 on #DBECFF
Aa4.65:1 Good#A28144 on #281A00
Aa4.65:1 Good#281A00 on #A28144

Color blindness preview

CSS variables

/* Hamster Fur to Burnt Coffee — https://swatchly.xyz/palette/a28144-dbecff-e8ae5e-2c50a0-281a00 */
:root {
  --hamster-fur: #a28144;
  --cloudless: #dbecff;
  --shiny-trumpet: #e8ae5e;
  --fist-of-the-north-star: #2c50a0;
  --burnt-coffee: #281a00;
}

Tailwind CSS v4

/* Hamster Fur to Burnt Coffee — https://swatchly.xyz/palette/a28144-dbecff-e8ae5e-2c50a0-281a00 */
@theme {
  --color-hamster-fur: #a28144;
  --color-hamster-fur-50: #fff4e1;
  --color-hamster-fur-100: #fee8c2;
  --color-hamster-fur-200: #eed4a7;
  --color-hamster-fur-300: #dabd89;
  --color-hamster-fur-400: #bd9d62;
  --color-hamster-fur-500: #a28144;
  --color-hamster-fur-600: #86662a;
  --color-hamster-fur-700: #6d5015;
  --color-hamster-fur-800: #573e06;
  --color-hamster-fur-900: #442f00;
  --color-hamster-fur-950: #2b1c00;
  --color-cloudless: #dbecff;
  --color-cloudless-50: #ecf5ff;
  --color-cloudless-100: #dbecff;
  --color-cloudless-200: #cbd8e6;
  --color-cloudless-300: #b4c2d1;
  --color-cloudless-400: #93a3b4;
  --color-cloudless-500: #788899;
  --color-cloudless-600: #5f6d7d;
  --color-cloudless-700: #4a5765;
  --color-cloudless-800: #384450;
  --color-cloudless-900: #2a343f;
  --color-cloudless-950: #192028;
  --color-shiny-trumpet: #e8ae5e;
  --color-shiny-trumpet-50: #ffefdb;
  --color-shiny-trumpet-100: #ffe1bc;
  --color-shiny-trumpet-200: #f7c98e;
  --color-shiny-trumpet-300: #e8ae5e;
  --color-shiny-trumpet-400: #c79042;
  --color-shiny-trumpet-500: #ac751e;
  --color-shiny-trumpet-600: #8e5d00;
  --color-shiny-trumpet-700: #724a00;
  --color-shiny-trumpet-800: #5b3a00;
  --color-shiny-trumpet-900: #472c00;
  --color-shiny-trumpet-950: #2e1b00;
  --color-fist-of-the-north-star: #2c50a0;
  --color-fist-of-the-north-star-50: #f0f5ff;
  --color-fist-of-the-north-star-100: #e1ecff;
  --color-fist-of-the-north-star-200: #c4d8ff;
  --color-fist-of-the-north-star-300: #a1c1ff;
  --color-fist-of-the-north-star-400: #77a0f3;
  --color-fist-of-the-north-star-500: #5b83d8;
  --color-fist-of-the-north-star-600: #4268b9;
  --color-fist-of-the-north-star-700: #2c50a0;
  --color-fist-of-the-north-star-800: #213e7f;
  --color-fist-of-the-north-star-900: #172f66;
  --color-fist-of-the-north-star-950: #0b1c44;
  --color-burnt-coffee: #281a00;
  --color-burnt-coffee-50: #fef4e2;
  --color-burnt-coffee-100: #f5ead6;
  --color-burnt-coffee-200: #e3d6be;
  --color-burnt-coffee-300: #cebfa4;
  --color-burnt-coffee-400: #b09f82;
  --color-burnt-coffee-500: #948365;
  --color-burnt-coffee-600: #79684c;
  --color-burnt-coffee-700: #605238;
  --color-burnt-coffee-800: #4b3f28;
  --color-burnt-coffee-900: #3a2f1c;
  --color-burnt-coffee-950: #281a00;
}