Sakura to Cowboy Color Palette

About this palette

Sakura to Cowboy is a 5-color muted, warm, earthy, vintage, gradient palette: #E0ADB7 (Sakura), #C6A384 (Latte), #8F7267 (Chocolate Temptation), #744A3A (Cappuccino), #473334 (Cowboy). It mixes pink, orange, brown, gray tones and feels warm overall. The strongest text pairing is #E0ADB7 on #473334 with a contrast ratio of 6.05:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sakura	rgb(224, 173, 183)	hsl(348, 45%, 78%)
Latte	rgb(198, 163, 132)	hsl(28, 37%, 65%)
Chocolate Temptation	rgb(143, 114, 103)	hsl(17, 16%, 48%)
Cappuccino	rgb(116, 74, 58)	hsl(17, 33%, 34%)
Cowboy	rgb(71, 51, 52)	hsl(357, 16%, 24%)

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.

Aa6.05:1 Good#E0ADB7 on #473334
Aa6.05:1 Good#473334 on #E0ADB7
Aa5.01:1 Good#C6A384 on #473334
Aa5.01:1 Good#473334 on #C6A384
Aa3.89:1 Poor#E0ADB7 on #744A3A
Aa3.89:1 Poor#744A3A on #E0ADB7
Aa3.22:1 Poor#C6A384 on #744A3A
Aa3.22:1 Poor#744A3A on #C6A384

Color blindness preview

CSS variables

/* Sakura to Cowboy — https://swatchly.xyz/palette/e0adb7-c6a384-8f7267-744a3a-473334 */
:root {
  --sakura: #e0adb7;
  --latte: #c6a384;
  --chocolate-temptation: #8f7267;
  --cappuccino: #744a3a;
  --cowboy: #473334;
}

Tailwind CSS v4

/* Sakura to Cowboy — https://swatchly.xyz/palette/e0adb7-c6a384-8f7267-744a3a-473334 */
@theme {
  --color-sakura: #e0adb7;
  --color-sakura-50: #ffeef1;
  --color-sakura-100: #ffdfe5;
  --color-sakura-200: #f0c8cf;
  --color-sakura-300: #e0adb7;
  --color-sakura-400: #bf8f99;
  --color-sakura-500: #a4747e;
  --color-sakura-600: #885b65;
  --color-sakura-700: #6f4750;
  --color-sakura-800: #59363e;
  --color-sakura-900: #46292f;
  --color-sakura-950: #2d181d;
  --color-latte: #c6a384;
  --color-latte-50: #fff7f0;
  --color-latte-100: #ffecdc;
  --color-latte-200: #f3d9c2;
  --color-latte-300: #e0c3a9;
  --color-latte-400: #c6a384;
  --color-latte-500: #a88668;
  --color-latte-600: #8a6a4d;
  --color-latte-700: #705338;
  --color-latte-800: #583f27;
  --color-latte-900: #442f1b;
  --color-latte-950: #2b1c0d;
  --color-chocolate-temptation: #8f7267;
  --color-chocolate-temptation-50: #ffefe9;
  --color-chocolate-temptation-100: #f7e1d9;
  --color-chocolate-temptation-200: #e4cac1;
  --color-chocolate-temptation-300: #cdb1a6;
  --color-chocolate-temptation-400: #ad8f84;
  --color-chocolate-temptation-500: #8f7267;
  --color-chocolate-temptation-600: #755b50;
  --color-chocolate-temptation-700: #5f473e;
  --color-chocolate-temptation-800: #4c372f;
  --color-chocolate-temptation-900: #3c2b24;
  --color-chocolate-temptation-950: #271a15;
  --color-cappuccino: #744a3a;
  --color-cappuccino-50: #fff2ed;
  --color-cappuccino-100: #ffe5db;
  --color-cappuccino-200: #f4cec0;
  --color-cappuccino-300: #e1b6a7;
  --color-cappuccino-400: #c49685;
  --color-cappuccino-500: #a87a69;
  --color-cappuccino-600: #8c6150;
  --color-cappuccino-700: #744a3a;
  --color-cappuccino-800: #5b392c;
  --color-cappuccino-900: #482b20;
  --color-cappuccino-950: #2e1a12;
  --color-cowboy: #473334;
  --color-cowboy-50: #fff1f2;
  --color-cowboy-100: #f7e7e7;
  --color-cowboy-200: #e5d2d3;
  --color-cowboy-300: #d1bbbc;
  --color-cowboy-400: #b49c9d;
  --color-cowboy-500: #998283;
  --color-cowboy-600: #7f696a;
  --color-cowboy-700: #685455;
  --color-cowboy-800: #554243;
  --color-cowboy-900: #473334;
  --color-cowboy-950: #2c2121;
}