Tomato Queen to Barbiecore Color Palette

About this palette

Tomato Queen to Barbiecore is a 5-color vibrant, warm palette: #DE4600 (Tomato Queen), #CEA3FF (Lilac), #FF8990 (Tulip), #008A78 (Go Go Green), #D653BF (Barbiecore). It mixes red, purple, turquoise, pink tones and feels warm overall. The strongest text pairing is #CEA3FF on #008A78 with a contrast ratio of 2.10:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tomato Queen	rgb(222, 70, 0)	hsl(19, 100%, 44%)
Lilac	rgb(206, 163, 255)	hsl(268, 100%, 82%)
Tulip	rgb(255, 137, 144)	hsl(356, 100%, 77%)
Go Go Green	rgb(0, 138, 120)	hsl(172, 100%, 27%)
Barbiecore	rgb(214, 83, 191)	hsl(311, 62%, 58%)

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.

Color blindness preview

CSS variables

/* Tomato Queen to Barbiecore — https://swatchly.xyz/palette/de4600-cea3ff-ff8990-008a78-d653bf */
:root {
  --tomato-queen: #de4600;
  --lilac: #cea3ff;
  --tulip: #ff8990;
  --go-go-green: #008a78;
  --barbiecore: #d653bf;
}

Tailwind CSS v4

/* Tomato Queen to Barbiecore — https://swatchly.xyz/palette/de4600-cea3ff-ff8990-008a78-d653bf */
@theme {
  --color-tomato-queen: #de4600;
  --color-tomato-queen-50: #fff1ec;
  --color-tomato-queen-100: #ffe2da;
  --color-tomato-queen-200: #ffc6b4;
  --color-tomato-queen-300: #ffa386;
  --color-tomato-queen-400: #fd6838;
  --color-tomato-queen-500: #de4600;
  --color-tomato-queen-600: #b43700;
  --color-tomato-queen-700: #912a00;
  --color-tomato-queen-800: #732000;
  --color-tomato-queen-900: #5a1700;
  --color-tomato-queen-950: #3c0c00;
  --color-lilac: #cea3ff;
  --color-lilac-50: #f5eeff;
  --color-lilac-100: #eddfff;
  --color-lilac-200: #dec4ff;
  --color-lilac-300: #cea3ff;
  --color-lilac-400: #af86dd;
  --color-lilac-500: #956bc2;
  --color-lilac-600: #7b52a5;
  --color-lilac-700: #633e89;
  --color-lilac-800: #502e70;
  --color-lilac-900: #3f225b;
  --color-lilac-950: #28133c;
  --color-tulip: #ff8990;
  --color-tulip-50: #ffe6e6;
  --color-tulip-100: #ffd4d5;
  --color-tulip-200: #ffb3b5;
  --color-tulip-300: #ff8990;
  --color-tulip-400: #de6d75;
  --color-tulip-500: #c2535d;
  --color-tulip-600: #a53c47;
  --color-tulip-700: #8a2a36;
  --color-tulip-800: #721c28;
  --color-tulip-900: #5d131e;
  --color-tulip-950: #3e0810;
  --color-go-go-green: #008a78;
  --color-go-go-green-50: #d8fff6;
  --color-go-go-green-100: #c0fcee;
  --color-go-go-green-200: #a5ecdd;
  --color-go-go-green-300: #86dac8;
  --color-go-go-green-400: #5bbdab;
  --color-go-go-green-500: #35a491;
  --color-go-go-green-600: #008a78;
  --color-go-go-green-700: #006e5f;
  --color-go-go-green-800: #00564a;
  --color-go-go-green-900: #004238;
  --color-go-go-green-950: #002923;
  --color-barbiecore: #d653bf;
  --color-barbiecore-50: #fff3fc;
  --color-barbiecore-100: #ffe6f8;
  --color-barbiecore-200: #ffc9f2;
  --color-barbiecore-300: #ffa4eb;
  --color-barbiecore-400: #f074d8;
  --color-barbiecore-500: #d653bf;
  --color-barbiecore-600: #b533a0;
  --color-barbiecore-700: #961884;
  --color-barbiecore-800: #79006a;
  --color-barbiecore-900: #5e0052;
  --color-barbiecore-950: #3d0034;
}