Slightly in Love to British Racing Green Color Palette

About this palette

Slightly in Love to British Racing Green is a 4-color cool, gradient palette: #FFE5E0 (Slightly in Love), #72ABEF (Fennel Flower), #499500 (Grass Is Greener), #004B20 (British Racing Green). It mixes white, blue, green tones and feels cool overall. The strongest text pairing is #FFE5E0 on #004B20 with a contrast ratio of 8.65:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Slightly in Love	rgb(255, 229, 224)	hsl(10, 100%, 94%)
Fennel Flower	rgb(114, 171, 239)	hsl(213, 80%, 69%)
Grass Is Greener	rgb(73, 149, 0)	hsl(91, 100%, 29%)
British Racing Green	rgb(0, 75, 32)	hsl(146, 100%, 15%)

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.

Aa8.65:1 Very good#FFE5E0 on #004B20
Aa8.65:1 Very good#004B20 on #FFE5E0
Aa4.33:1 Poor#72ABEF on #004B20
Aa4.33:1 Poor#004B20 on #72ABEF
Aa3.14:1 Poor#FFE5E0 on #499500
Aa3.14:1 Poor#499500 on #FFE5E0

Color blindness preview

CSS variables

/* Slightly in Love to British Racing Green — https://swatchly.xyz/palette/ffe5e0-72abef-499500-004b20 */
:root {
  --slightly-in-love: #ffe5e0;
  --fennel-flower: #72abef;
  --grass-is-greener: #499500;
  --british-racing-green: #004b20;
}

Tailwind CSS v4

/* Slightly in Love to British Racing Green — https://swatchly.xyz/palette/ffe5e0-72abef-499500-004b20 */
@theme {
  --color-slightly-in-love: #ffe5e0;
  --color-slightly-in-love-50: #fff2f0;
  --color-slightly-in-love-100: #ffe5e0;
  --color-slightly-in-love-200: #e6d3cf;
  --color-slightly-in-love-300: #d1bcb8;
  --color-slightly-in-love-400: #b39c97;
  --color-slightly-in-love-500: #97807c;
  --color-slightly-in-love-600: #7c6662;
  --color-slightly-in-love-700: #64504c;
  --color-slightly-in-love-800: #4f3e3a;
  --color-slightly-in-love-900: #3d2f2c;
  --color-slightly-in-love-950: #271c1a;
  --color-fennel-flower: #72abef;
  --color-fennel-flower-50: #f2f8ff;
  --color-fennel-flower-100: #e3f0ff;
  --color-fennel-flower-200: #c4deff;
  --color-fennel-flower-300: #9ecaff;
  --color-fennel-flower-400: #72abef;
  --color-fennel-flower-500: #568ecf;
  --color-fennel-flower-600: #3b71b1;
  --color-fennel-flower-700: #265993;
  --color-fennel-flower-800: #174577;
  --color-fennel-flower-900: #0d345e;
  --color-fennel-flower-950: #041f3e;
  --color-grass-is-greener: #499500;
  --color-grass-is-greener-50: #e0ffd2;
  --color-grass-is-greener-100: #c7faaf;
  --color-grass-is-greener-200: #ace88d;
  --color-grass-is-greener-300: #8ed269;
  --color-grass-is-greener-400: #67b239;
  --color-grass-is-greener-500: #499500;
  --color-grass-is-greener-600: #3a7800;
  --color-grass-is-greener-700: #2c6000;
  --color-grass-is-greener-800: #214b00;
  --color-grass-is-greener-900: #193b00;
  --color-grass-is-greener-950: #0d2500;
  --color-british-racing-green: #004b20;
  --color-british-racing-green-50: #dfffe5;
  --color-british-racing-green-100: #cff7d7;
  --color-british-racing-green-200: #b6e6bf;
  --color-british-racing-green-300: #98d0a4;
  --color-british-racing-green-400: #73b081;
  --color-british-racing-green-500: #549464;
  --color-british-racing-green-600: #3a784b;
  --color-british-racing-green-700: #265e36;
  --color-british-racing-green-800: #004b20;
  --color-british-racing-green-900: #0d381c;
  --color-british-racing-green-950: #05230f;
}