Thalassa to Evergreen Color Palette

About this palette

Thalassa to Evergreen is a 5-color cool, earthy palette: #42AFB4 (Thalassa), #A2D4A8 (Limestoned), #337E5F (Amazon), #162B13 (Lindworm Green), #005E52 (Evergreen). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #A2D4A8 on #162B13 with a contrast ratio of 9.01:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Thalassa	rgb(66, 175, 180)	hsl(183, 46%, 48%)
Limestoned	rgb(162, 212, 168)	hsl(127, 37%, 73%)
Amazon	rgb(51, 126, 95)	hsl(155, 42%, 35%)
Lindworm Green	rgb(22, 43, 19)	hsl(112, 39%, 12%)
Evergreen	rgb(0, 94, 82)	hsl(172, 100%, 18%)

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.

Aa9.01:1 Very good#A2D4A8 on #162B13
Aa9.01:1 Very good#162B13 on #A2D4A8
Aa5.78:1 Good#42AFB4 on #162B13
Aa5.78:1 Good#162B13 on #42AFB4
Aa4.60:1 Good#A2D4A8 on #005E52
Aa4.60:1 Good#005E52 on #A2D4A8
Aa3.09:1 Poor#337E5F on #162B13
Aa3.09:1 Poor#162B13 on #337E5F

Color blindness preview

CSS variables

/* Thalassa to Evergreen — https://swatchly.xyz/palette/42afb4-a2d4a8-337e5f-162b13-005e52 */
:root {
  --thalassa: #42afb4;
  --limestoned: #a2d4a8;
  --amazon: #337e5f;
  --lindworm-green: #162b13;
  --evergreen: #005e52;
}

Tailwind CSS v4

/* Thalassa to Evergreen — https://swatchly.xyz/palette/42afb4-a2d4a8-337e5f-162b13-005e52 */
@theme {
  --color-thalassa: #42afb4;
  --color-thalassa-50: #d1fdff;
  --color-thalassa-100: #b8f6f9;
  --color-thalassa-200: #98e4e7;
  --color-thalassa-300: #76ced2;
  --color-thalassa-400: #42afb4;
  --color-thalassa-500: #1b9499;
  --color-thalassa-600: #00787c;
  --color-thalassa-700: #005f63;
  --color-thalassa-800: #004b4e;
  --color-thalassa-900: #003a3d;
  --color-thalassa-950: #002527;
  --color-limestoned: #a2d4a8;
  --color-limestoned-50: #e7ffe9;
  --color-limestoned-100: #d9f8dc;
  --color-limestoned-200: #c2e6c6;
  --color-limestoned-300: #a2d4a8;
  --color-limestoned-400: #84b38a;
  --color-limestoned-500: #67966d;
  --color-limestoned-600: #4c7a53;
  --color-limestoned-700: #38623e;
  --color-limestoned-800: #284d2e;
  --color-limestoned-900: #1b3b21;
  --color-limestoned-950: #0e2512;
  --color-amazon: #337e5f;
  --color-amazon-50: #dcffed;
  --color-amazon-100: #cbf8e1;
  --color-amazon-200: #b1e7cc;
  --color-amazon-300: #94d2b4;
  --color-amazon-400: #6eb494;
  --color-amazon-500: #4f9979;
  --color-amazon-600: #337e5f;
  --color-amazon-700: #1f654a;
  --color-amazon-800: #0e5038;
  --color-amazon-900: #043e2a;
  --color-amazon-950: #002719;
  --color-lindworm-green: #162b13;
  --color-lindworm-green-50: #ebfae9;
  --color-lindworm-green-100: #e0f1dd;
  --color-lindworm-green-200: #cadec7;
  --color-lindworm-green-300: #b2c8ae;
  --color-lindworm-green-400: #91aa8d;
  --color-lindworm-green-500: #778f73;
  --color-lindworm-green-600: #5e765a;
  --color-lindworm-green-700: #4a6047;
  --color-lindworm-green-800: #394d37;
  --color-lindworm-green-900: #2c3d2a;
  --color-lindworm-green-950: #162b13;
  --color-evergreen: #005e52;
  --color-evergreen-50: #d8fff6;
  --color-evergreen-100: #c9f6ec;
  --color-evergreen-200: #ade4d8;
  --color-evergreen-300: #8ecec1;
  --color-evergreen-400: #67aea1;
  --color-evergreen-500: #479284;
  --color-evergreen-600: #2a7669;
  --color-evergreen-700: #005e52;
  --color-evergreen-800: #054940;
  --color-evergreen-900: #003931;
  --color-evergreen-950: #00231e;
}