British Racing Green to Herbal Vapours color palette

004C25British Racing Green 844B89Prunella C5773FCork Wood 61BAF1Hello Summer D6F9CDHerbal Vapours

About this palette

British Racing Green to Herbal Vapours is a 5-color cool, earthy palette: #004C25 (British Racing Green), #844B89 (Prunella), #C5773F (Cork Wood), #61BAF1 (Hello Summer), #D6F9CD (Herbal Vapours). It mixes green, pink, orange, blue tones and feels cool overall. The strongest text pairing is #004C25 on #D6F9CD with a contrast ratio of 8.88:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
British Racing Green	rgb(0, 76, 37)	hsl(149, 100%, 15%)
Prunella	rgb(132, 75, 137)	hsl(295, 29%, 42%)
Cork Wood	rgb(197, 119, 63)	hsl(25, 54%, 51%)
Hello Summer	rgb(97, 186, 241)	hsl(203, 84%, 66%)
Herbal Vapours	rgb(214, 249, 205)	hsl(108, 79%, 89%)

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.88:1 Very good#004C25 on #D6F9CD
Aa8.88:1 Very good#D6F9CD on #004C25
Aa5.46:1 Good#844B89 on #D6F9CD
Aa5.46:1 Good#D6F9CD on #844B89
Aa4.76:1 Good#004C25 on #61BAF1
Aa4.76:1 Good#61BAF1 on #004C25
Aa3.01:1 Poor#C5773F on #D6F9CD
Aa3.01:1 Poor#D6F9CD on #C5773F

Color blindness preview

CSS variables

/* British Racing Green to Herbal Vapours — https://swatchly.xyz/palette/004c25-844b89-c5773f-61baf1-d6f9cd */
:root {
  --british-racing-green: #004c25;
  --prunella: #844b89;
  --cork-wood: #c5773f;
  --hello-summer: #61baf1;
  --herbal-vapours: #d6f9cd;
}

Tailwind CSS v4

/* British Racing Green to Herbal Vapours — https://swatchly.xyz/palette/004c25-844b89-c5773f-61baf1-d6f9cd */
@theme {
  --color-british-racing-green: #004c25;
  --color-british-racing-green-50: #deffe6;
  --color-british-racing-green-100: #cff7d9;
  --color-british-racing-green-200: #b5e5c2;
  --color-british-racing-green-300: #98d0a8;
  --color-british-racing-green-400: #73b185;
  --color-british-racing-green-500: #549469;
  --color-british-racing-green-600: #3a784f;
  --color-british-racing-green-700: #265f3a;
  --color-british-racing-green-800: #004c25;
  --color-british-racing-green-900: #0d391f;
  --color-british-racing-green-950: #052411;
  --color-prunella: #844b89;
  --color-prunella-50: #fef0ff;
  --color-prunella-100: #fddeff;
  --color-prunella-200: #f2c2f5;
  --color-prunella-300: #dda7e1;
  --color-prunella-400: #bf84c3;
  --color-prunella-500: #a166a6;
  --color-prunella-600: #844b89;
  --color-prunella-700: #6b396f;
  --color-prunella-800: #552a59;
  --color-prunella-900: #431f47;
  --color-prunella-950: #2b112e;
  --color-cork-wood: #c5773f;
  --color-cork-wood-50: #fff4ed;
  --color-cork-wood-100: #ffe9db;
  --color-cork-wood-200: #ffd0b2;
  --color-cork-wood-300: #f9b487;
  --color-cork-wood-400: #df935f;
  --color-cork-wood-500: #c5773f;
  --color-cork-wood-600: #a65b21;
  --color-cork-wood-700: #894405;
  --color-cork-wood-800: #6c3400;
  --color-cork-wood-900: #542700;
  --color-cork-wood-950: #361600;
  --color-hello-summer: #61baf1;
  --color-hello-summer-50: #f6fbff;
  --color-hello-summer-100: #e7f5ff;
  --color-hello-summer-200: #c4e7ff;
  --color-hello-summer-300: #98d6ff;
  --color-hello-summer-400: #61baf1;
  --color-hello-summer-500: #429bd0;
  --color-hello-summer-600: #1a7db0;
  --color-hello-summer-700: #00638f;
  --color-hello-summer-800: #004c70;
  --color-hello-summer-900: #003956;
  --color-hello-summer-950: #002236;
  --color-herbal-vapours: #d6f9cd;
  --color-herbal-vapours-50: #eafde6;
  --color-herbal-vapours-100: #d6f9cd;
  --color-herbal-vapours-200: #c9e2c2;
  --color-herbal-vapours-300: #afcca8;
  --color-herbal-vapours-400: #8dad85;
  --color-herbal-vapours-500: #719169;
  --color-herbal-vapours-600: #587650;
  --color-herbal-vapours-700: #435e3b;
  --color-herbal-vapours-800: #324a2c;
  --color-herbal-vapours-900: #253920;
  --color-herbal-vapours-950: #152411;
}