Blossom to Mochaccino Color Palette

About this palette

Blossom to Mochaccino is a 6-color warm, earthy, vintage, monochromatic palette: #FFE7D6 (Blossom), #CA721D (Maine Coon Orange), #633509 (Brown), #FFA65A (Rajah), #392210 (Medium Roast), #945000 (Mochaccino). It mixes white, orange, brown tones and feels warm overall. The strongest text pairing is #FFE7D6 on #392210 with a contrast ratio of 12.52:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blossom	rgb(255, 231, 214)	hsl(25, 100%, 92%)
Maine Coon Orange	rgb(202, 114, 29)	hsl(29, 75%, 45%)
Brown	rgb(99, 53, 9)	hsl(29, 83%, 21%)
Rajah	rgb(255, 166, 90)	hsl(28, 100%, 68%)
Medium Roast	rgb(57, 34, 16)	hsl(26, 56%, 14%)
Mochaccino	rgb(148, 80, 0)	hsl(32, 100%, 29%)

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.

Aa12.52:1 Super#FFE7D6 on #392210
Aa12.52:1 Super#392210 on #FFE7D6
Aa8.64:1 Very good#FFE7D6 on #633509
Aa8.64:1 Very good#633509 on #FFE7D6
Aa7.70:1 Very good#FFA65A on #392210
Aa7.70:1 Very good#392210 on #FFA65A
Aa5.31:1 Good#633509 on #FFA65A
Aa5.31:1 Good#FFA65A on #633509

Color blindness preview

CSS variables

/* Blossom to Mochaccino — https://swatchly.xyz/palette/ffe7d6-ca721d-633509-ffa65a-392210-945000 */
:root {
  --blossom: #ffe7d6;
  --maine-coon-orange: #ca721d;
  --brown: #633509;
  --rajah: #ffa65a;
  --medium-roast: #392210;
  --mochaccino: #945000;
}

Tailwind CSS v4

/* Blossom to Mochaccino — https://swatchly.xyz/palette/ffe7d6-ca721d-633509-ffa65a-392210-945000 */
@theme {
  --color-blossom: #ffe7d6;
  --color-blossom-50: #fff3eb;
  --color-blossom-100: #ffe7d6;
  --color-blossom-200: #e6d5c8;
  --color-blossom-300: #d1bdaf;
  --color-blossom-400: #b39d8e;
  --color-blossom-500: #978272;
  --color-blossom-600: #7c6759;
  --color-blossom-700: #635144;
  --color-blossom-800: #4f3f33;
  --color-blossom-900: #3d3026;
  --color-blossom-950: #271d16;
  --color-maine-coon-orange: #ca721d;
  --color-maine-coon-orange-50: #fff4ec;
  --color-maine-coon-orange-100: #ffe8d8;
  --color-maine-coon-orange-200: #ffd0ad;
  --color-maine-coon-orange-300: #ffb174;
  --color-maine-coon-orange-400: #e48f47;
  --color-maine-coon-orange-500: #ca721d;
  --color-maine-coon-orange-600: #a75900;
  --color-maine-coon-orange-700: #854600;
  --color-maine-coon-orange-800: #693500;
  --color-maine-coon-orange-900: #512800;
  --color-maine-coon-orange-950: #341700;
  --color-brown: #633509;
  --color-brown-50: #fff2ea;
  --color-brown-100: #ffe6d4;
  --color-brown-200: #f8ceaf;
  --color-brown-300: #e5b693;
  --color-brown-400: #c8956f;
  --color-brown-500: #ad7952;
  --color-brown-600: #905f39;
  --color-brown-700: #764926;
  --color-brown-800: #633509;
  --color-brown-900: #4a2a0e;
  --color-brown-950: #301905;
  --color-rajah: #ffa65a;
  --color-rajah-50: #fff0e5;
  --color-rajah-100: #ffe3ce;
  --color-rajah-200: #ffc89d;
  --color-rajah-300: #ffa65a;
  --color-rajah-400: #db883e;
  --color-rajah-500: #c06c12;
  --color-rajah-600: #9d5500;
  --color-rajah-700: #7e4300;
  --color-rajah-800: #643400;
  --color-rajah-900: #4e2700;
  --color-rajah-950: #321700;
  --color-medium-roast: #392210;
  --color-medium-roast-50: #fff2ea;
  --color-medium-roast-100: #fbe7d9;
  --color-medium-roast-200: #ead2c2;
  --color-medium-roast-300: #d5bba9;
  --color-medium-roast-400: #b79b87;
  --color-medium-roast-500: #9e826d;
  --color-medium-roast-600: #846956;
  --color-medium-roast-700: #6d5543;
  --color-medium-roast-800: #5a4433;
  --color-medium-roast-900: #493628;
  --color-medium-roast-950: #392210;
  --color-mochaccino: #945000;
  --color-mochaccino-50: #fff3e9;
  --color-mochaccino-100: #ffe4d0;
  --color-mochaccino-200: #ffc89d;
  --color-mochaccino-300: #eeac77;
  --color-mochaccino-400: #d0894d;
  --color-mochaccino-500: #b26c2c;
  --color-mochaccino-600: #945000;
  --color-mochaccino-700: #763f00;
  --color-mochaccino-800: #5d3000;
  --color-mochaccino-900: #492500;
  --color-mochaccino-950: #2f1500;
}