Sereni Teal to Peacock Pride color palette

6BBEB2Sereni Teal 9F707FNever Forget BBECE3Water Leaf 281618Dark Orchestra 006660Peacock Pride

About this palette

Sereni Teal to Peacock Pride is a 5-color cool palette: #6BBEB2 (Sereni Teal), #9F707F (Never Forget), #BBECE3 (Water Leaf), #281618 (Dark Orchestra), #006660 (Peacock Pride). It mixes turquoise, red, gray tones and feels cool overall. The strongest text pairing is #BBECE3 on #281618 with a contrast ratio of 13.32:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sereni Teal	rgb(107, 190, 178)	hsl(171, 39%, 58%)
Never Forget	rgb(159, 112, 127)	hsl(341, 20%, 53%)
Water Leaf	rgb(187, 236, 227)	hsl(169, 56%, 83%)
Dark Orchestra	rgb(40, 22, 24)	hsl(353, 29%, 12%)
Peacock Pride	rgb(0, 102, 96)	hsl(176, 100%, 20%)

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.

Aa13.32:1 Super#BBECE3 on #281618
Aa13.32:1 Super#281618 on #BBECE3
Aa7.91:1 Very good#6BBEB2 on #281618
Aa7.91:1 Very good#281618 on #6BBEB2
Aa5.28:1 Good#BBECE3 on #006660
Aa5.28:1 Good#006660 on #BBECE3
Aa4.19:1 Poor#9F707F on #281618
Aa4.19:1 Poor#281618 on #9F707F

Color blindness preview

CSS variables

/* Sereni Teal to Peacock Pride — https://swatchly.xyz/palette/6bbeb2-9f707f-bbece3-281618-006660 */
:root {
  --sereni-teal: #6bbeb2;
  --never-forget: #9f707f;
  --water-leaf: #bbece3;
  --dark-orchestra: #281618;
  --peacock-pride: #006660;
}

Tailwind CSS v4

/* Sereni Teal to Peacock Pride — https://swatchly.xyz/palette/6bbeb2-9f707f-bbece3-281618-006660 */
@theme {
  --color-sereni-teal: #6bbeb2;
  --color-sereni-teal-50: #e8fffb;
  --color-sereni-teal-100: #cefcf4;
  --color-sereni-teal-200: #b5ece3;
  --color-sereni-teal-300: #98d9cf;
  --color-sereni-teal-400: #6bbeb2;
  --color-sereni-teal-500: #4da094;
  --color-sereni-teal-600: #2c8278;
  --color-sereni-teal-700: #10685f;
  --color-sereni-teal-800: #005149;
  --color-sereni-teal-900: #003e37;
  --color-sereni-teal-950: #002621;
  --color-never-forget: #9f707f;
  --color-never-forget-50: #ffeff4;
  --color-never-forget-100: #ffdfe8;
  --color-never-forget-200: #efc7d3;
  --color-never-forget-300: #dbaebc;
  --color-never-forget-400: #bc8c9b;
  --color-never-forget-500: #9f707f;
  --color-never-forget-600: #845866;
  --color-never-forget-700: #6b4451;
  --color-never-forget-800: #56343f;
  --color-never-forget-900: #442731;
  --color-never-forget-950: #2c171e;
  --color-water-leaf: #bbece3;
  --color-water-leaf-50: #effffc;
  --color-water-leaf-100: #def9f4;
  --color-water-leaf-200: #bbece3;
  --color-water-leaf-300: #aad2ca;
  --color-water-leaf-400: #85b1aa;
  --color-water-leaf-500: #67958d;
  --color-water-leaf-600: #4b7871;
  --color-water-leaf-700: #365f59;
  --color-water-leaf-800: #264a44;
  --color-water-leaf-900: #1a3934;
  --color-water-leaf-950: #0d2420;
  --color-dark-orchestra: #281618;
  --color-dark-orchestra-50: #fff1f2;
  --color-dark-orchestra-100: #f7e6e8;
  --color-dark-orchestra-200: #e6d2d3;
  --color-dark-orchestra-300: #d1bbbc;
  --color-dark-orchestra-400: #b29b9d;
  --color-dark-orchestra-500: #967f80;
  --color-dark-orchestra-600: #7a6466;
  --color-dark-orchestra-700: #614d4f;
  --color-dark-orchestra-800: #4c3b3c;
  --color-dark-orchestra-900: #3a2c2d;
  --color-dark-orchestra-950: #281618;
  --color-peacock-pride: #006660;
  --color-peacock-pride-50: #d6fffa;
  --color-peacock-pride-100: #c7f7f1;
  --color-peacock-pride-200: #ace5df;
  --color-peacock-pride-300: #8ed1ca;
  --color-peacock-pride-400: #67b3ac;
  --color-peacock-pride-500: #479891;
  --color-peacock-pride-600: #2a7d76;
  --color-peacock-pride-700: #006660;
  --color-peacock-pride-800: #00504b;
  --color-peacock-pride-900: #003e3a;
  --color-peacock-pride-950: #002724;
}