Dragon’s Blood to Xoxo color palette

BA3B4BDragon’s Blood FFC3CBCotton Candy Comet E1868EPulp 711D32Whisky Cola 47111CWhat We Do in the Shadows F88498Xoxo

Open in generator Export PNG, PDF, ASE…

About this palette

Dragon’s Blood to Xoxo is a 6-color warm, monochromatic palette: #BA3B4B (Dragon’s Blood), #FFC3CB (Cotton Candy Comet), #E1868E (Pulp), #711D32 (Whisky Cola), #47111C (What We Do in the Shadows), #F88498 (Xoxo). It mixes red, pink, brown tones and feels warm overall. The strongest text pairing is #FFC3CB on #47111C with a contrast ratio of 10.20:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dragon’s Blood	rgb(186, 59, 75)	hsl(352, 52%, 48%)
Cotton Candy Comet	rgb(255, 195, 203)	hsl(352, 100%, 88%)
Pulp	rgb(225, 134, 142)	hsl(355, 60%, 70%)
Whisky Cola	rgb(113, 29, 50)	hsl(345, 59%, 28%)
What We Do in the Shadows	rgb(71, 17, 28)	hsl(348, 61%, 17%)
Xoxo	rgb(248, 132, 152)	hsl(350, 89%, 75%)

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.

Aa10.20:1 Very good#FFC3CB on #47111C
Aa10.20:1 Very good#47111C on #FFC3CB
Aa7.24:1 Very good#FFC3CB on #711D32
Aa7.24:1 Very good#711D32 on #FFC3CB
Aa6.41:1 Good#47111C on #F88498
Aa6.41:1 Good#F88498 on #47111C
Aa5.86:1 Good#E1868E on #47111C
Aa5.86:1 Good#47111C on #E1868E

Color blindness preview

CSS variables

/* Dragon’s Blood to Xoxo — https://swatchly.xyz/palette/ba3b4b-ffc3cb-e1868e-711d32-47111c-f88498 */
:root {
  --dragon-s-blood: #ba3b4b;
  --cotton-candy-comet: #ffc3cb;
  --pulp: #e1868e;
  --whisky-cola: #711d32;
  --what-we-do-in-the-shadows: #47111c;
  --xoxo: #f88498;
}

Tailwind CSS v4

/* Dragon’s Blood to Xoxo — https://swatchly.xyz/palette/ba3b4b-ffc3cb-e1868e-711d32-47111c-f88498 */
@theme {
  --color-dragon-s-blood: #ba3b4b;
  --color-dragon-s-blood-50: #fff1f1;
  --color-dragon-s-blood-100: #ffe4e5;
  --color-dragon-s-blood-200: #ffc9ca;
  --color-dragon-s-blood-300: #ffa7aa;
  --color-dragon-s-blood-400: #f57780;
  --color-dragon-s-blood-500: #d95864;
  --color-dragon-s-blood-600: #ba3b4b;
  --color-dragon-s-blood-700: #9a2537;
  --color-dragon-s-blood-800: #7d1428;
  --color-dragon-s-blood-900: #64081c;
  --color-dragon-s-blood-950: #42020f;
  --color-cotton-candy-comet: #ffc3cb;
  --color-cotton-candy-comet-50: #ffeff1;
  --color-cotton-candy-comet-100: #ffe0e4;
  --color-cotton-candy-comet-200: #ffc3cb;
  --color-cotton-candy-comet-300: #e3b0b6;
  --color-cotton-candy-comet-400: #c68f97;
  --color-cotton-candy-comet-500: #aa747c;
  --color-cotton-candy-comet-600: #8e5a62;
  --color-cotton-candy-comet-700: #74464d;
  --color-cotton-candy-comet-800: #5d353b;
  --color-cotton-candy-comet-900: #49272d;
  --color-cotton-candy-comet-950: #2f171b;
  --color-pulp: #e1868e;
  --color-pulp-50: #fff3f3;
  --color-pulp-100: #ffe5e7;
  --color-pulp-200: #ffcacd;
  --color-pulp-300: #faaab0;
  --color-pulp-400: #e1868e;
  --color-pulp-500: #c26a73;
  --color-pulp-600: #a35059;
  --color-pulp-700: #863b44;
  --color-pulp-800: #6c2a33;
  --color-pulp-900: #561e26;
  --color-pulp-950: #381015;
  --color-whisky-cola: #711d32;
  --color-whisky-cola-50: #fff1f3;
  --color-whisky-cola-100: #ffe3e6;
  --color-whisky-cola-200: #ffc6cd;
  --color-whisky-cola-300: #faa5b1;
  --color-whisky-cola-400: #dd8290;
  --color-whisky-cola-500: #c06575;
  --color-whisky-cola-600: #a14b5b;
  --color-whisky-cola-700: #843646;
  --color-whisky-cola-800: #711d32;
  --color-whisky-cola-900: #541b27;
  --color-whisky-cola-950: #370e17;
  --color-what-we-do-in-the-shadows: #47111c;
  --color-what-we-do-in-the-shadows-50: #fff1f2;
  --color-what-we-do-in-the-shadows-100: #ffe3e5;
  --color-what-we-do-in-the-shadows-200: #fdc8cc;
  --color-what-we-do-in-the-shadows-300: #eaafb4;
  --color-what-we-do-in-the-shadows-400: #ce8d94;
  --color-what-we-do-in-the-shadows-500: #b3737a;
  --color-what-we-do-in-the-shadows-600: #985b62;
  --color-what-we-do-in-the-shadows-700: #7f474e;
  --color-what-we-do-in-the-shadows-800: #69373e;
  --color-what-we-do-in-the-shadows-900: #572b31;
  --color-what-we-do-in-the-shadows-950: #47111c;
  --color-xoxo: #f88498;
  --color-xoxo-50: #fff7f8;
  --color-xoxo-100: #ffecee;
  --color-xoxo-200: #ffd2d8;
  --color-xoxo-300: #ffb3bd;
  --color-xoxo-400: #f88498;
  --color-xoxo-500: #d6677b;
  --color-xoxo-600: #b5495f;
  --color-xoxo-700: #963249;
  --color-xoxo-800: #782036;
  --color-xoxo-900: #5f1427;
  --color-xoxo-950: #3d0816;
}