Bottom of My Heart to Spicy Sweetcorn Color Palette

About this palette

Bottom of My Heart to Spicy Sweetcorn is a 4-color vibrant, warm, neon palette: #CE0074 (Bottom of My Heart), #00A783 (Herbal), #D68F00 (Vibrant Amber), #F5AD00 (Spicy Sweetcorn). It mixes red, turquoise, orange, yellow tones and feels warm overall. The strongest text pairing is #CE0074 on #F5AD00 with a contrast ratio of 2.80:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bottom of My Heart	rgb(206, 0, 116)	hsl(326, 100%, 40%)
Herbal	rgb(0, 167, 131)	hsl(167, 100%, 33%)
Vibrant Amber	rgb(214, 143, 0)	hsl(40, 100%, 42%)
Spicy Sweetcorn	rgb(245, 173, 0)	hsl(42, 100%, 48%)

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

/* Bottom of My Heart to Spicy Sweetcorn — https://swatchly.xyz/palette/ce0074-00a783-d68f00-f5ad00 */
:root {
  --bottom-of-my-heart: #ce0074;
  --herbal: #00a783;
  --vibrant-amber: #d68f00;
  --spicy-sweetcorn: #f5ad00;
}

Tailwind CSS v4

/* Bottom of My Heart to Spicy Sweetcorn — https://swatchly.xyz/palette/ce0074-00a783-d68f00-f5ad00 */
@theme {
  --color-bottom-of-my-heart: #ce0074;
  --color-bottom-of-my-heart-50: #fff1f5;
  --color-bottom-of-my-heart-100: #ffe4ed;
  --color-bottom-of-my-heart-200: #ffc9da;
  --color-bottom-of-my-heart-300: #ffa6c5;
  --color-bottom-of-my-heart-400: #ff6aa8;
  --color-bottom-of-my-heart-500: #ed388d;
  --color-bottom-of-my-heart-600: #ce0074;
  --color-bottom-of-my-heart-700: #a5005c;
  --color-bottom-of-my-heart-800: #830047;
  --color-bottom-of-my-heart-900: #660037;
  --color-bottom-of-my-heart-950: #430022;
  --color-herbal: #00a783;
  --color-herbal-50: #e0fff3;
  --color-herbal-100: #bdffe7;
  --color-herbal-200: #9df0d3;
  --color-herbal-300: #7addbd;
  --color-herbal-400: #47c19e;
  --color-herbal-500: #00a783;
  --color-herbal-600: #008769;
  --color-herbal-700: #006b53;
  --color-herbal-800: #005340;
  --color-herbal-900: #004030;
  --color-herbal-950: #00281d;
  --color-vibrant-amber: #d68f00;
  --color-vibrant-amber-50: #fff2e3;
  --color-vibrant-amber-100: #ffe6c6;
  --color-vibrant-amber-200: #ffcc89;
  --color-vibrant-amber-300: #f1b259;
  --color-vibrant-amber-400: #d68f00;
  --color-vibrant-amber-500: #b37700;
  --color-vibrant-amber-600: #905f00;
  --color-vibrant-amber-700: #734b00;
  --color-vibrant-amber-800: #5b3a00;
  --color-vibrant-amber-900: #472c00;
  --color-vibrant-amber-950: #2d1b00;
  --color-spicy-sweetcorn: #f5ad00;
  --color-spicy-sweetcorn-50: #fff1db;
  --color-spicy-sweetcorn-100: #ffe4ba;
  --color-spicy-sweetcorn-200: #ffca72;
  --color-spicy-sweetcorn-300: #f5ad00;
  --color-spicy-sweetcorn-400: #ce9100;
  --color-spicy-sweetcorn-500: #ac7800;
  --color-spicy-sweetcorn-600: #8b6100;
  --color-spicy-sweetcorn-700: #6f4c00;
  --color-spicy-sweetcorn-800: #583c00;
  --color-spicy-sweetcorn-900: #452e00;
  --color-spicy-sweetcorn-950: #2c1c00;
}