Start generating

Herbal Vapours to Thalassa color palette

E0FFCBHerbal Vapours2E1D2FBlack Velvet9BC492Irish Spring004B4ATropical ForestAB323BDesirable48ABB7Thalassa
Open in generator Export PNG, PDF, ASE…

About this palette

Herbal Vapours to Thalassa is a 6-color cool palette: #E0FFCB (Herbal Vapours), #2E1D2F (Black Velvet), #9BC492 (Irish Spring), #004B4A (Tropical Forest), #AB323B (Desirable), #48ABB7 (Thalassa). It mixes green, purple, turquoise, red tones and feels cool overall. The strongest text pairing is #E0FFCB on #2E1D2F with a contrast ratio of 14.51:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Herbal Vapoursrgb(224, 255, 203)hsl(96, 100%, 90%)
Black Velvetrgb(46, 29, 47)hsl(297, 24%, 15%)
Irish Springrgb(155, 196, 146)hsl(109, 30%, 67%)
Tropical Forestrgb(0, 75, 74)hsl(179, 100%, 15%)
Desirablergb(171, 50, 59)hsl(356, 55%, 43%)
Thalassargb(72, 171, 183)hsl(186, 44%, 50%)

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.

  • Aa14.51:1 Super#E0FFCB on #2E1D2F
  • Aa14.51:1 Super#2E1D2F on #E0FFCB
  • Aa9.18:1 Very good#E0FFCB on #004B4A
  • Aa9.18:1 Very good#004B4A on #E0FFCB
  • Aa8.03:1 Very good#2E1D2F on #9BC492
  • Aa8.03:1 Very good#9BC492 on #2E1D2F
  • Aa5.95:1 Good#E0FFCB on #AB323B
  • Aa5.95:1 Good#AB323B on #E0FFCB

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Herbal Vapours to Thalassa — https://swatchly.xyz/palette/e0ffcb-2e1d2f-9bc492-004b4a-ab323b-48abb7 */
:root {
  --herbal-vapours: #e0ffcb;
  --black-velvet: #2e1d2f;
  --irish-spring: #9bc492;
  --tropical-forest: #004b4a;
  --desirable: #ab323b;
  --thalassa: #48abb7;
}

Tailwind CSS v4

/* Herbal Vapours to Thalassa — https://swatchly.xyz/palette/e0ffcb-2e1d2f-9bc492-004b4a-ab323b-48abb7 */
@theme {
  --color-herbal-vapours: #e0ffcb;
  --color-herbal-vapours-50: #e0ffcb;
  --color-herbal-vapours-100: #def1d1;
  --color-herbal-vapours-200: #c8dfb9;
  --color-herbal-vapours-300: #b0ca9f;
  --color-herbal-vapours-400: #90ab7c;
  --color-herbal-vapours-500: #749061;
  --color-herbal-vapours-600: #5b7548;
  --color-herbal-vapours-700: #465e34;
  --color-herbal-vapours-800: #354a25;
  --color-herbal-vapours-900: #27391a;
  --color-herbal-vapours-950: #17240d;
  --color-black-velvet: #2e1d2f;
  --color-black-velvet-50: #fdf0fe;
  --color-black-velvet-100: #f4e6f5;
  --color-black-velvet-200: #e2d1e3;
  --color-black-velvet-300: #cdbace;
  --color-black-velvet-400: #ae9aaf;
  --color-black-velvet-500: #947f95;
  --color-black-velvet-600: #7a667b;
  --color-black-velvet-700: #635164;
  --color-black-velvet-800: #504051;
  --color-black-velvet-900: #403240;
  --color-black-velvet-950: #2e1d2f;
  --color-irish-spring: #9bc492;
  --color-irish-spring-50: #dff8da;
  --color-irish-spring-100: #d2eecb;
  --color-irish-spring-200: #b9dab2;
  --color-irish-spring-300: #9bc492;
  --color-irish-spring-400: #7fa676;
  --color-irish-spring-500: #658c5d;
  --color-irish-spring-600: #4e7246;
  --color-irish-spring-700: #3b5c34;
  --color-irish-spring-800: #2c4a26;
  --color-irish-spring-900: #213a1c;
  --color-irish-spring-950: #12250e;
  --color-tropical-forest: #004b4a;
  --color-tropical-forest-50: #dbfdfc;
  --color-tropical-forest-100: #cef4f2;
  --color-tropical-forest-200: #b4e2e0;
  --color-tropical-forest-300: #98ccca;
  --color-tropical-forest-400: #72adab;
  --color-tropical-forest-500: #549290;
  --color-tropical-forest-600: #3a7675;
  --color-tropical-forest-700: #265e5d;
  --color-tropical-forest-800: #004b4a;
  --color-tropical-forest-900: #0d3938;
  --color-tropical-forest-950: #052323;
  --color-desirable: #ab323b;
  --color-desirable-50: #fff1f1;
  --color-desirable-100: #ffe2e0;
  --color-desirable-200: #ffc3c1;
  --color-desirable-300: #ff9d9c;
  --color-desirable-400: #eb7072;
  --color-desirable-500: #cc5155;
  --color-desirable-600: #ab323b;
  --color-desirable-700: #8c222b;
  --color-desirable-800: #72131e;
  --color-desirable-900: #5b0a15;
  --color-desirable-950: #3c030a;
  --color-thalassa: #48abb7;
  --color-thalassa-50: #d7faff;
  --color-thalassa-100: #b9f4fb;
  --color-thalassa-200: #9ae1ea;
  --color-thalassa-300: #78cad5;
  --color-thalassa-400: #48abb7;
  --color-thalassa-500: #27909c;
  --color-thalassa-600: #007581;
  --color-thalassa-700: #005e67;
  --color-thalassa-800: #004a51;
  --color-thalassa-900: #00393f;
  --color-thalassa-950: #002529;
}

Similar palettes