Sereni Teal to Sunken Ship color palette

6EB9ABSereni Teal 5C8465Clouded Pine 9CDBE1Exotic Escape 174C30Zucchini 022520Sunken Ship

About this palette

Sereni Teal to Sunken Ship is a 5-color cool palette: #6EB9AB (Sereni Teal), #5C8465 (Clouded Pine), #9CDBE1 (Exotic Escape), #174C30 (Zucchini), #022520 (Sunken Ship). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #9CDBE1 on #022520 with a contrast ratio of 10.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sereni Teal	rgb(110, 185, 171)	hsl(169, 35%, 58%)
Clouded Pine	rgb(92, 132, 101)	hsl(133, 18%, 44%)
Exotic Escape	rgb(156, 219, 225)	hsl(185, 53%, 75%)
Zucchini	rgb(23, 76, 48)	hsl(148, 54%, 19%)
Sunken Ship	rgb(2, 37, 32)	hsl(171, 90%, 8%)

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.58:1 Very good#9CDBE1 on #022520
Aa10.58:1 Very good#022520 on #9CDBE1
Aa7.14:1 Very good#6EB9AB on #022520
Aa7.14:1 Very good#022520 on #6EB9AB
Aa6.45:1 Good#9CDBE1 on #174C30
Aa6.45:1 Good#174C30 on #9CDBE1
Aa4.35:1 Poor#6EB9AB on #174C30
Aa4.35:1 Poor#174C30 on #6EB9AB

Color blindness preview

CSS variables

/* Sereni Teal to Sunken Ship — https://swatchly.xyz/palette/6eb9ab-5c8465-9cdbe1-174c30-022520 */
:root {
  --sereni-teal: #6eb9ab;
  --clouded-pine: #5c8465;
  --exotic-escape: #9cdbe1;
  --zucchini: #174c30;
  --sunken-ship: #022520;
}

Tailwind CSS v4

/* Sereni Teal to Sunken Ship — https://swatchly.xyz/palette/6eb9ab-5c8465-9cdbe1-174c30-022520 */
@theme {
  --color-sereni-teal: #6eb9ab;
  --color-sereni-teal-50: #e2fff9;
  --color-sereni-teal-100: #cefaf0;
  --color-sereni-teal-200: #b5e9de;
  --color-sereni-teal-300: #98d5c9;
  --color-sereni-teal-400: #6eb9ab;
  --color-sereni-teal-500: #519b8e;
  --color-sereni-teal-600: #337f72;
  --color-sereni-teal-700: #1c665a;
  --color-sereni-teal-800: #095046;
  --color-sereni-teal-900: #003d35;
  --color-sereni-teal-950: #002620;
  --color-clouded-pine: #5c8465;
  --color-clouded-pine-50: #e5fde9;
  --color-clouded-pine-100: #dcf6e1;
  --color-clouded-pine-200: #c7e6cd;
  --color-clouded-pine-300: #b0d3b7;
  --color-clouded-pine-400: #8fb697;
  --color-clouded-pine-500: #759d7d;
  --color-clouded-pine-600: #5c8465;
  --color-clouded-pine-700: #456a4d;
  --color-clouded-pine-800: #32533a;
  --color-clouded-pine-900: #24402b;
  --color-clouded-pine-950: #142819;
  --color-exotic-escape: #9cdbe1;
  --color-exotic-escape-50: #d2f7fa;
  --color-exotic-escape-100: #c3ecf0;
  --color-exotic-escape-200: #9cdbe1;
  --color-exotic-escape-300: #8ec4ca;
  --color-exotic-escape-400: #6ca7ad;
  --color-exotic-escape-500: #508d93;
  --color-exotic-escape-600: #387479;
  --color-exotic-escape-700: #255e63;
  --color-exotic-escape-800: #174b4f;
  --color-exotic-escape-900: #0d3a3e;
  --color-exotic-escape-950: #042427;
  --color-zucchini: #174c30;
  --color-zucchini-50: #e0feea;
  --color-zucchini-100: #d3f5df;
  --color-zucchini-200: #bbe3c9;
  --color-zucchini-300: #a0cdb0;
  --color-zucchini-400: #7caf8f;
  --color-zucchini-500: #5f9373;
  --color-zucchini-600: #457759;
  --color-zucchini-700: #315f44;
  --color-zucchini-800: #174c30;
  --color-zucchini-900: #173a26;
  --color-zucchini-950: #0b2416;
  --color-sunken-ship: #022520;
  --color-sunken-ship-50: #e6faf6;
  --color-sunken-ship-100: #daf1ec;
  --color-sunken-ship-200: #c3ded9;
  --color-sunken-ship-300: #a9c9c2;
  --color-sunken-ship-400: #87aaa3;
  --color-sunken-ship-500: #6b8e87;
  --color-sunken-ship-600: #52746d;
  --color-sunken-ship-700: #3d5c56;
  --color-sunken-ship-800: #2d4843;
  --color-sunken-ship-900: #213833;
  --color-sunken-ship-950: #022520;
}