Her Majesty to Fleur de Sel Caramel color palette

FDA7A2Her Majesty D63A76Beetroot Purple 673100Meatloaf 280E0BItalian Roast 8E3C64Midnight Aubergine E07F00Fleur de Sel Caramel

Open in generator Export PNG, PDF, ASE…

About this palette

Her Majesty to Fleur de Sel Caramel is a 6-color warm palette: #FDA7A2 (Her Majesty), #D63A76 (Beetroot Purple), #673100 (Meatloaf), #280E0B (Italian Roast), #8E3C64 (Midnight Aubergine), #E07F00 (Fleur de Sel Caramel). It mixes pink, red, brown, orange tones and feels warm overall. The strongest text pairing is #FDA7A2 on #280E0B with a contrast ratio of 9.70:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Her Majesty	rgb(253, 167, 162)	hsl(3, 96%, 81%)
Beetroot Purple	rgb(214, 58, 118)	hsl(337, 66%, 53%)
Meatloaf	rgb(103, 49, 0)	hsl(29, 100%, 20%)
Italian Roast	rgb(40, 14, 11)	hsl(6, 57%, 10%)
Midnight Aubergine	rgb(142, 60, 100)	hsl(331, 41%, 40%)
Fleur de Sel Caramel	rgb(224, 127, 0)	hsl(34, 100%, 44%)

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.

Aa9.70:1 Very good#FDA7A2 on #280E0B
Aa9.70:1 Very good#280E0B on #FDA7A2
Aa6.22:1 Good#280E0B on #E07F00
Aa6.22:1 Good#E07F00 on #280E0B
Aa5.57:1 Good#FDA7A2 on #673100
Aa5.57:1 Good#673100 on #FDA7A2
Aa4.08:1 Poor#D63A76 on #280E0B
Aa4.08:1 Poor#280E0B on #D63A76

Color blindness preview

CSS variables

/* Her Majesty to Fleur de Sel Caramel — https://swatchly.xyz/palette/fda7a2-d63a76-673100-280e0b-8e3c64-e07f00 */
:root {
  --her-majesty: #fda7a2;
  --beetroot-purple: #d63a76;
  --meatloaf: #673100;
  --italian-roast: #280e0b;
  --midnight-aubergine: #8e3c64;
  --fleur-de-sel-caramel: #e07f00;
}

Tailwind CSS v4

/* Her Majesty to Fleur de Sel Caramel — https://swatchly.xyz/palette/fda7a2-d63a76-673100-280e0b-8e3c64-e07f00 */
@theme {
  --color-her-majesty: #fda7a2;
  --color-her-majesty-50: #fff2f1;
  --color-her-majesty-100: #ffe4e2;
  --color-her-majesty-200: #ffc8c4;
  --color-her-majesty-300: #fda7a2;
  --color-her-majesty-400: #d98985;
  --color-her-majesty-500: #bc6c69;
  --color-her-majesty-600: #9e5250;
  --color-her-majesty-700: #823e3c;
  --color-her-majesty-800: #692d2c;
  --color-her-majesty-900: #532120;
  --color-her-majesty-950: #361211;
  --color-beetroot-purple: #d63a76;
  --color-beetroot-purple-50: #ffeff3;
  --color-beetroot-purple-100: #ffdfe7;
  --color-beetroot-purple-200: #ffc0d0;
  --color-beetroot-purple-300: #ff98b5;
  --color-beetroot-purple-400: #f65d92;
  --color-beetroot-purple-500: #d63a76;
  --color-beetroot-purple-600: #b61a5e;
  --color-beetroot-purple-700: #960049;
  --color-beetroot-purple-800: #770039;
  --color-beetroot-purple-900: #5f002c;
  --color-beetroot-purple-950: #3f001b;
  --color-meatloaf: #673100;
  --color-meatloaf-50: #fff2eb;
  --color-meatloaf-100: #ffe6d6;
  --color-meatloaf-200: #fdccac;
  --color-meatloaf-300: #ebb38f;
  --color-meatloaf-400: #ce926a;
  --color-meatloaf-500: #b2764d;
  --color-meatloaf-600: #955c34;
  --color-meatloaf-700: #7a4621;
  --color-meatloaf-800: #673100;
  --color-meatloaf-900: #4d2709;
  --color-meatloaf-950: #321703;
  --color-italian-roast: #280e0b;
  --color-italian-roast-50: #fff2f0;
  --color-italian-roast-100: #fde5e1;
  --color-italian-roast-200: #edd0cb;
  --color-italian-roast-300: #d9b8b3;
  --color-italian-roast-400: #bb9893;
  --color-italian-roast-500: #9e7b75;
  --color-italian-roast-600: #805f5a;
  --color-italian-roast-700: #654844;
  --color-italian-roast-800: #4d3532;
  --color-italian-roast-900: #392623;
  --color-italian-roast-950: #280e0b;
  --color-midnight-aubergine: #8e3c64;
  --color-midnight-aubergine-50: #fff1f6;
  --color-midnight-aubergine-100: #ffe2ed;
  --color-midnight-aubergine-200: #ffc7de;
  --color-midnight-aubergine-300: #f7a9cb;
  --color-midnight-aubergine-400: #dd87ad;
  --color-midnight-aubergine-500: #c26b93;
  --color-midnight-aubergine-600: #a6527a;
  --color-midnight-aubergine-700: #8e3c64;
  --color-midnight-aubergine-800: #712d4e;
  --color-midnight-aubergine-900: #5a1f3c;
  --color-midnight-aubergine-950: #3b1026;
  --color-fleur-de-sel-caramel: #e07f00;
  --color-fleur-de-sel-caramel-50: #fff0e3;
  --color-fleur-de-sel-caramel-100: #ffe1ca;
  --color-fleur-de-sel-caramel-200: #ffc696;
  --color-fleur-de-sel-caramel-300: #fca454;
  --color-fleur-de-sel-caramel-400: #e07f00;
  --color-fleur-de-sel-caramel-500: #bb6900;
  --color-fleur-de-sel-caramel-600: #985400;
  --color-fleur-de-sel-caramel-700: #7a4200;
  --color-fleur-de-sel-caramel-800: #613300;
  --color-fleur-de-sel-caramel-900: #4c2700;
  --color-fleur-de-sel-caramel-950: #321800;
}