Peach Scone to Blood Brother color palette

About this palette

Peach Scone to Blood Brother is a 5-color warm, earthy, gradient palette: #FFBEBC (Peach Scone), #EC935F (Ridgeback), #B96200 (Fire Ant), #755500 (Coffee Adept), #740D13 (Blood Brother). It mixes pink, orange, brown, red tones and feels warm overall. The strongest text pairing is #FFBEBC on #740D13 with a contrast ratio of 7.37:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Peach Sconergb(255, 190, 188)hsl(2, 100%, 87%)
Ridgebackrgb(236, 147, 95)hsl(22, 79%, 65%)
Fire Antrgb(185, 98, 0)hsl(32, 100%, 36%)
Coffee Adeptrgb(117, 85, 0)hsl(44, 100%, 23%)
Blood Brotherrgb(116, 13, 19)hsl(357, 80%, 25%)

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.

  • Aa7.37:1 Very good#FFBEBC on #740D13
  • Aa7.37:1 Very good#740D13 on #FFBEBC
  • Aa4.92:1 Good#EC935F on #740D13
  • Aa4.92:1 Good#740D13 on #EC935F
  • Aa4.37:1 Poor#FFBEBC on #755500
  • Aa4.37:1 Poor#755500 on #FFBEBC

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Peach Scone to Blood Brother — https://swatchly.xyz/palette/ffbebc-ec935f-b96200-755500-740d13 */
:root {
  --peach-scone: #ffbebc;
  --ridgeback: #ec935f;
  --fire-ant: #b96200;
  --coffee-adept: #755500;
  --blood-brother: #740d13;
}

Tailwind CSS v4

/* Peach Scone to Blood Brother — https://swatchly.xyz/palette/ffbebc-ec935f-b96200-755500-740d13 */
@theme {
  --color-peach-scone: #ffbebc;
  --color-peach-scone-50: #ffebeb;
  --color-peach-scone-100: #ffdcdb;
  --color-peach-scone-200: #ffbebc;
  --color-peach-scone-300: #e3abaa;
  --color-peach-scone-400: #c78c8a;
  --color-peach-scone-500: #ac7170;
  --color-peach-scone-600: #905857;
  --color-peach-scone-700: #764444;
  --color-peach-scone-800: #603434;
  --color-peach-scone-900: #4c2626;
  --color-peach-scone-950: #311616;
  --color-ridgeback: #ec935f;
  --color-ridgeback-50: #fff7f3;
  --color-ridgeback-100: #ffede3;
  --color-ridgeback-200: #ffd5be;
  --color-ridgeback-300: #ffb890;
  --color-ridgeback-400: #ec935f;
  --color-ridgeback-500: #cb7642;
  --color-ridgeback-600: #ab5923;
  --color-ridgeback-700: #8d4107;
  --color-ridgeback-800: #6f3100;
  --color-ridgeback-900: #562400;
  --color-ridgeback-950: #361400;
  --color-fire-ant: #b96200;
  --color-fire-ant-50: #fff0e6;
  --color-fire-ant-100: #ffe1cc;
  --color-fire-ant-200: #ffc499;
  --color-fire-ant-300: #f6a465;
  --color-fire-ant-400: #d88036;
  --color-fire-ant-500: #b96200;
  --color-fire-ant-600: #964e00;
  --color-fire-ant-700: #783d00;
  --color-fire-ant-800: #5f2f00;
  --color-fire-ant-900: #4b2400;
  --color-fire-ant-950: #311500;
  --color-coffee-adept: #755500;
  --color-coffee-adept-50: #fff4df;
  --color-coffee-adept-100: #ffe8be;
  --color-coffee-adept-200: #efd5a3;
  --color-coffee-adept-300: #ddbf86;
  --color-coffee-adept-400: #c1a05f;
  --color-coffee-adept-500: #a68540;
  --color-coffee-adept-600: #8c6b24;
  --color-coffee-adept-700: #755500;
  --color-coffee-adept-800: #5c4200;
  --color-coffee-adept-900: #473200;
  --color-coffee-adept-950: #2e1f00;
  --color-blood-brother: #740d13;
  --color-blood-brother-50: #fff2f0;
  --color-blood-brother-100: #ffe4e1;
  --color-blood-brother-200: #ffc8c2;
  --color-blood-brother-300: #ffa49c;
  --color-blood-brother-400: #e57d75;
  --color-blood-brother-500: #c75e58;
  --color-blood-brother-600: #a6433f;
  --color-blood-brother-700: #872e2c;
  --color-blood-brother-800: #740d13;
  --color-blood-brother-900: #551414;
  --color-blood-brother-950: #370909;
}

Similar palettes