Herbal Vapours to Poseidon Color Palette

About this palette

Herbal Vapours to Poseidon is a 5-color cool palette: #E0F9CF (Herbal Vapours), #C98C3B (Victorian Crown), #68518C (Grapes of Italy), #8CCDF8 (Clear Sky), #003957 (Poseidon). It mixes green, orange, purple, blue tones and feels cool overall. The strongest text pairing is #E0F9CF on #003957 with a contrast ratio of 10.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Herbal Vapours	rgb(224, 249, 207)	hsl(96, 78%, 89%)
Victorian Crown	rgb(201, 140, 59)	hsl(34, 57%, 51%)
Grapes of Italy	rgb(104, 81, 140)	hsl(263, 27%, 43%)
Clear Sky	rgb(140, 205, 248)	hsl(204, 89%, 76%)
Poseidon	rgb(0, 57, 87)	hsl(201, 100%, 17%)

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.

Aa10.81:1 Very good#E0F9CF on #003957
Aa10.81:1 Very good#003957 on #E0F9CF
Aa7.08:1 Very good#8CCDF8 on #003957
Aa7.08:1 Very good#003957 on #8CCDF8
Aa5.92:1 Good#E0F9CF on #68518C
Aa5.92:1 Good#68518C on #E0F9CF
Aa4.24:1 Poor#C98C3B on #003957
Aa4.24:1 Poor#003957 on #C98C3B

Color blindness preview

CSS variables

/* Herbal Vapours to Poseidon — https://swatchly.xyz/palette/e0f9cf-c98c3b-68518c-8ccdf8-003957 */
:root {
  --herbal-vapours: #e0f9cf;
  --victorian-crown: #c98c3b;
  --grapes-of-italy: #68518c;
  --clear-sky: #8ccdf8;
  --poseidon: #003957;
}

Tailwind CSS v4

/* Herbal Vapours to Poseidon — https://swatchly.xyz/palette/e0f9cf-c98c3b-68518c-8ccdf8-003957 */
@theme {
  --color-herbal-vapours: #e0f9cf;
  --color-herbal-vapours-50: #f1fee8;
  --color-herbal-vapours-100: #e0f9cf;
  --color-herbal-vapours-200: #d0e2c4;
  --color-herbal-vapours-300: #b7cba9;
  --color-herbal-vapours-400: #96ac86;
  --color-herbal-vapours-500: #79906a;
  --color-herbal-vapours-600: #5f7450;
  --color-herbal-vapours-700: #495c3b;
  --color-herbal-vapours-800: #38482b;
  --color-herbal-vapours-900: #2a381f;
  --color-herbal-vapours-950: #192311;
  --color-victorian-crown: #c98c3b;
  --color-victorian-crown-50: #fff0df;
  --color-victorian-crown-100: #ffe2c1;
  --color-victorian-crown-200: #fac88e;
  --color-victorian-crown-300: #e6af6b;
  --color-victorian-crown-400: #c98c3b;
  --color-victorian-crown-500: #ad7219;
  --color-victorian-crown-600: #8f5a00;
  --color-victorian-crown-700: #724700;
  --color-victorian-crown-800: #5b3800;
  --color-victorian-crown-900: #472b00;
  --color-victorian-crown-950: #2f1a00;
  --color-grapes-of-italy: #68518c;
  --color-grapes-of-italy-50: #f7f3ff;
  --color-grapes-of-italy-100: #efe6ff;
  --color-grapes-of-italy-200: #e0d0ff;
  --color-grapes-of-italy-300: #cdb9f1;
  --color-grapes-of-italy-400: #b09ad7;
  --color-grapes-of-italy-500: #977fbe;
  --color-grapes-of-italy-600: #7d66a3;
  --color-grapes-of-italy-700: #68518c;
  --color-grapes-of-italy-800: #523e70;
  --color-grapes-of-italy-900: #3f2e59;
  --color-grapes-of-italy-950: #281c3b;
  --color-clear-sky: #8ccdf8;
  --color-clear-sky-50: #eff8ff;
  --color-clear-sky-100: #dcf1ff;
  --color-clear-sky-200: #b5e1ff;
  --color-clear-sky-300: #8ccdf8;
  --color-clear-sky-400: #6facd4;
  --color-clear-sky-500: #5090b8;
  --color-clear-sky-600: #35749b;
  --color-clear-sky-700: #205c7f;
  --color-clear-sky-800: #114866;
  --color-clear-sky-900: #063751;
  --color-clear-sky-950: #022235;
  --color-poseidon: #003957;
  --color-poseidon-50: #ecf7ff;
  --color-poseidon-100: #d9efff;
  --color-poseidon-200: #b7ddf9;
  --color-poseidon-300: #9cc7e6;
  --color-poseidon-400: #78a8cb;
  --color-poseidon-500: #5c8db0;
  --color-poseidon-600: #427393;
  --color-poseidon-700: #2f5c7a;
  --color-poseidon-800: #204863;
  --color-poseidon-900: #003957;
  --color-poseidon-950: #0a2334;
}