Apricot to Medium Roast Color Palette

About this palette

Apricot to Medium Roast is a 4-color warm, earthy, monochromatic palette: #FFB274 (Apricot), #734000 (Hazelnut Chocolate), #C87200 (Maine Coon Orange), #3B1F00 (Medium Roast). It mixes orange, brown tones and feels warm overall. The strongest text pairing is #FFB274 on #3B1F00 with a contrast ratio of 8.59:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Apricot	rgb(255, 178, 116)	hsl(27, 100%, 73%)
Hazelnut Chocolate	rgb(115, 64, 0)	hsl(33, 100%, 23%)
Maine Coon Orange	rgb(200, 114, 0)	hsl(34, 100%, 39%)
Medium Roast	rgb(59, 31, 0)	hsl(32, 100%, 12%)

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.

Aa8.59:1 Very good#FFB274 on #3B1F00
Aa8.59:1 Very good#3B1F00 on #FFB274
Aa4.82:1 Good#FFB274 on #734000
Aa4.82:1 Good#734000 on #FFB274
Aa4.24:1 Poor#C87200 on #3B1F00
Aa4.24:1 Poor#3B1F00 on #C87200

Color blindness preview

CSS variables

/* Apricot to Medium Roast — https://swatchly.xyz/palette/ffb274-734000-c87200-3b1f00 */
:root {
  --apricot: #ffb274;
  --hazelnut-chocolate: #734000;
  --maine-coon-orange: #c87200;
  --medium-roast: #3b1f00;
}

Tailwind CSS v4

/* Apricot to Medium Roast — https://swatchly.xyz/palette/ffb274-734000-c87200-3b1f00 */
@theme {
  --color-apricot: #ffb274;
  --color-apricot-50: #fff5ee;
  --color-apricot-100: #ffeada;
  --color-apricot-200: #ffd1ae;
  --color-apricot-300: #ffb274;
  --color-apricot-400: #da9359;
  --color-apricot-500: #bd7537;
  --color-apricot-600: #9f5a16;
  --color-apricot-700: #814500;
  --color-apricot-800: #653500;
  --color-apricot-900: #4e2700;
  --color-apricot-950: #331700;
  --color-hazelnut-chocolate: #734000;
  --color-hazelnut-chocolate-50: #fff3e8;
  --color-hazelnut-chocolate-100: #ffe6d1;
  --color-hazelnut-chocolate-200: #facca5;
  --color-hazelnut-chocolate-300: #e6b386;
  --color-hazelnut-chocolate-400: #c8905e;
  --color-hazelnut-chocolate-500: #aa733f;
  --color-hazelnut-chocolate-600: #8c5825;
  --color-hazelnut-chocolate-700: #734000;
  --color-hazelnut-chocolate-800: #593205;
  --color-hazelnut-chocolate-900: #462500;
  --color-hazelnut-chocolate-950: #2d1600;
  --color-maine-coon-orange: #c87200;
  --color-maine-coon-orange-50: #fff4ea;
  --color-maine-coon-orange-100: #ffe8d5;
  --color-maine-coon-orange-200: #ffcfa7;
  --color-maine-coon-orange-300: #fdb16d;
  --color-maine-coon-orange-400: #e38f3c;
  --color-maine-coon-orange-500: #c87200;
  --color-maine-coon-orange-600: #a25b00;
  --color-maine-coon-orange-700: #814800;
  --color-maine-coon-orange-800: #663700;
  --color-maine-coon-orange-900: #4f2900;
  --color-maine-coon-orange-950: #321800;
  --color-medium-roast: #3b1f00;
  --color-medium-roast-50: #fff3e8;
  --color-medium-roast-100: #fee6d2;
  --color-medium-roast-200: #eed2b9;
  --color-medium-roast-300: #daba9e;
  --color-medium-roast-400: #bc9a7b;
  --color-medium-roast-500: #a28061;
  --color-medium-roast-600: #886749;
  --color-medium-roast-700: #715337;
  --color-medium-roast-800: #5c4228;
  --color-medium-roast-900: #4b341e;
  --color-medium-roast-950: #3b1f00;
}