Start generating

Strawberry Frappé to Spikey Red color palette

FFA5A6Strawberry FrappéE08377Island CoralAD4F46Hot SauceBB444EDragon’s Blood8D001DBarbera5B000ASpikey Red
Open in generator Export PNG, PDF, ASE…

About this palette

Strawberry Frappé to Spikey Red is a 6-color warm, monochromatic palette: #FFA5A6 (Strawberry Frappé), #E08377 (Island Coral), #AD4F46 (Hot Sauce), #BB444E (Dragon’s Blood), #8D001D (Barbera), #5B000A (Spikey Red). It mixes pink, red tones and feels warm overall. The strongest text pairing is #FFA5A6 on #5B000A with a contrast ratio of 7.72:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Strawberry Frappérgb(255, 165, 166)hsl(359, 100%, 82%)
Island Coralrgb(224, 131, 119)hsl(7, 63%, 67%)
Hot Saucergb(173, 79, 70)hsl(5, 42%, 48%)
Dragon’s Bloodrgb(187, 68, 78)hsl(355, 47%, 50%)
Barberargb(141, 0, 29)hsl(348, 100%, 28%)
Spikey Redrgb(91, 0, 10)hsl(353, 100%, 18%)

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.72:1 Very good#FFA5A6 on #5B000A
  • Aa7.72:1 Very good#5B000A on #FFA5A6
  • Aa5.30:1 Good#E08377 on #5B000A
  • Aa5.30:1 Good#5B000A on #E08377
  • Aa5.20:1 Good#FFA5A6 on #8D001D
  • Aa5.20:1 Good#8D001D on #FFA5A6
  • Aa3.57:1 Poor#E08377 on #8D001D
  • Aa3.57:1 Poor#8D001D on #E08377

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Strawberry Frappé to Spikey Red — https://swatchly.xyz/palette/ffa5a6-e08377-ad4f46-bb444e-8d001d-5b000a */
:root {
  --strawberry-frapp: #ffa5a6;
  --island-coral: #e08377;
  --hot-sauce: #ad4f46;
  --dragon-s-blood: #bb444e;
  --barbera: #8d001d;
  --spikey-red: #5b000a;
}

Tailwind CSS v4

/* Strawberry Frappé to Spikey Red — https://swatchly.xyz/palette/ffa5a6-e08377-ad4f46-bb444e-8d001d-5b000a */
@theme {
  --color-strawberry-frapp: #ffa5a6;
  --color-strawberry-frapp-50: #fff2f1;
  --color-strawberry-frapp-100: #ffe4e4;
  --color-strawberry-frapp-200: #ffc8c8;
  --color-strawberry-frapp-300: #ffa5a6;
  --color-strawberry-frapp-400: #da8788;
  --color-strawberry-frapp-500: #be6a6d;
  --color-strawberry-frapp-600: #a05053;
  --color-strawberry-frapp-700: #843c3f;
  --color-strawberry-frapp-800: #6a2b2f;
  --color-strawberry-frapp-900: #541f22;
  --color-strawberry-frapp-950: #371113;
  --color-island-coral: #e08377;
  --color-island-coral-50: #fff1ef;
  --color-island-coral-100: #ffe3df;
  --color-island-coral-200: #ffc7bf;
  --color-island-coral-300: #faa79c;
  --color-island-coral-400: #e08377;
  --color-island-coral-500: #c2685d;
  --color-island-coral-600: #a34e44;
  --color-island-coral-700: #873931;
  --color-island-coral-800: #6d2923;
  --color-island-coral-900: #571d18;
  --color-island-coral-950: #39100c;
  --color-hot-sauce: #ad4f46;
  --color-hot-sauce-50: #fff2f0;
  --color-hot-sauce-100: #ffe5e1;
  --color-hot-sauce-200: #ffcbc3;
  --color-hot-sauce-300: #ffaa9f;
  --color-hot-sauce-400: #e6867b;
  --color-hot-sauce-500: #ca695f;
  --color-hot-sauce-600: #ad4f46;
  --color-hot-sauce-700: #8f3a32;
  --color-hot-sauce-800: #742923;
  --color-hot-sauce-900: #5c1c18;
  --color-hot-sauce-950: #3c0e0b;
  --color-dragon-s-blood: #bb444e;
  --color-dragon-s-blood-50: #fff1f1;
  --color-dragon-s-blood-100: #ffe5e5;
  --color-dragon-s-blood-200: #ffcbcb;
  --color-dragon-s-blood-300: #ffaaab;
  --color-dragon-s-blood-400: #f47d82;
  --color-dragon-s-blood-500: #d95f67;
  --color-dragon-s-blood-600: #bb444e;
  --color-dragon-s-blood-700: #9b2d39;
  --color-dragon-s-blood-800: #7e1c29;
  --color-dragon-s-blood-900: #64101d;
  --color-dragon-s-blood-950: #42050f;
  --color-barbera: #8d001d;
  --color-barbera-50: #fff1f1;
  --color-barbera-100: #ffe4e2;
  --color-barbera-200: #ffc8c5;
  --color-barbera-300: #ffa7a4;
  --color-barbera-400: #f67878;
  --color-barbera-500: #db5a5d;
  --color-barbera-600: #bd3e44;
  --color-barbera-700: #a02932;
  --color-barbera-800: #8d001d;
  --color-barbera-900: #6c0b18;
  --color-barbera-950: #49020b;
  --color-spikey-red: #5b000a;
  --color-spikey-red-50: #fff2f0;
  --color-spikey-red-100: #ffe4e1;
  --color-spikey-red-200: #ffc8c3;
  --color-spikey-red-300: #fda7a0;
  --color-spikey-red-400: #df827c;
  --color-spikey-red-500: #c2645f;
  --color-spikey-red-600: #a14946;
  --color-spikey-red-700: #833432;
  --color-spikey-red-800: #672423;
  --color-spikey-red-900: #5b000a;
  --color-spikey-red-950: #320c0b;
}

Similar palettes