Sereni Teal to Everglade color palette

72BDA4Sereni Teal 975B3DCoconut D3B29CSoba 8F73B5Crown Jewels 5E5795Piccadilly Purple 214035Everglade

Open in generator Export PNG, PDF, ASE…

About this palette

Sereni Teal to Everglade is a 6-color cool palette: #72BDA4 (Sereni Teal), #975B3D (Coconut), #D3B29C (Soba), #8F73B5 (Crown Jewels), #5E5795 (Piccadilly Purple), #214035 (Everglade). It mixes turquoise, brown, orange, purple tones and feels cool overall. The strongest text pairing is #D3B29C on #214035 with a contrast ratio of 5.74:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sereni Teal	rgb(114, 189, 164)	hsl(160, 36%, 59%)
Coconut	rgb(151, 91, 61)	hsl(20, 42%, 42%)
Soba	rgb(211, 178, 156)	hsl(24, 38%, 72%)
Crown Jewels	rgb(143, 115, 181)	hsl(265, 31%, 58%)
Piccadilly Purple	rgb(94, 87, 149)	hsl(247, 26%, 46%)
Everglade	rgb(33, 64, 53)	hsl(159, 32%, 19%)

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.

Aa5.74:1 Good#D3B29C on #214035
Aa5.74:1 Good#214035 on #D3B29C
Aa5.15:1 Good#72BDA4 on #214035
Aa5.15:1 Good#214035 on #72BDA4
Aa3.24:1 Poor#D3B29C on #5E5795
Aa3.24:1 Poor#5E5795 on #D3B29C

Color blindness preview

CSS variables

/* Sereni Teal to Everglade — https://swatchly.xyz/palette/72bda4-975b3d-d3b29c-8f73b5-5e5795-214035 */
:root {
  --sereni-teal: #72bda4;
  --coconut: #975b3d;
  --soba: #d3b29c;
  --crown-jewels: #8f73b5;
  --piccadilly-purple: #5e5795;
  --everglade: #214035;
}

Tailwind CSS v4

/* Sereni Teal to Everglade — https://swatchly.xyz/palette/72bda4-975b3d-d3b29c-8f73b5-5e5795-214035 */
@theme {
  --color-sereni-teal: #72bda4;
  --color-sereni-teal-50: #e8fff6;
  --color-sereni-teal-100: #d1fcec;
  --color-sereni-teal-200: #b8ecd9;
  --color-sereni-teal-300: #9cd8c3;
  --color-sereni-teal-400: #72bda4;
  --color-sereni-teal-500: #559f87;
  --color-sereni-teal-600: #36826b;
  --color-sereni-teal-700: #1f6853;
  --color-sereni-teal-800: #0c5140;
  --color-sereni-teal-900: #023e30;
  --color-sereni-teal-950: #00261c;
  --color-coconut: #975b3d;
  --color-coconut-50: #fff2ec;
  --color-coconut-100: #ffe5d9;
  --color-coconut-200: #fecbb3;
  --color-coconut-300: #ecb397;
  --color-coconut-400: #cf9173;
  --color-coconut-500: #b47557;
  --color-coconut-600: #975b3d;
  --color-coconut-700: #7b462b;
  --color-coconut-800: #63351d;
  --color-coconut-900: #4e2712;
  --color-coconut-950: #331708;
  --color-soba: #d3b29c;
  --color-soba-50: #ffede2;
  --color-soba-100: #f8e1d2;
  --color-soba-200: #e6cbba;
  --color-soba-300: #d3b29c;
  --color-soba-400: #b39480;
  --color-soba-500: #997a66;
  --color-soba-600: #7e624e;
  --color-soba-700: #674d3b;
  --color-soba-800: #523c2c;
  --color-soba-900: #412e21;
  --color-soba-950: #2a1c12;
  --color-crown-jewels: #8f73b5;
  --color-crown-jewels-50: #f7f2ff;
  --color-crown-jewels-100: #efe4ff;
  --color-crown-jewels-200: #dfcaff;
  --color-crown-jewels-300: #cab1ee;
  --color-crown-jewels-400: #ab8fd1;
  --color-crown-jewels-500: #8f73b5;
  --color-crown-jewels-600: #755a98;
  --color-crown-jewels-700: #5e457d;
  --color-crown-jewels-800: #4a3465;
  --color-crown-jewels-900: #3a2751;
  --color-crown-jewels-950: #241735;
  --color-piccadilly-purple: #5e5795;
  --color-piccadilly-purple-50: #f4f4ff;
  --color-piccadilly-purple-100: #e7e6ff;
  --color-piccadilly-purple-200: #d0cdff;
  --color-piccadilly-purple-300: #b7b3f0;
  --color-piccadilly-purple-400: #9690d2;
  --color-piccadilly-purple-500: #7973b4;
  --color-piccadilly-purple-600: #5e5795;
  --color-piccadilly-purple-700: #4a4479;
  --color-piccadilly-purple-800: #3a3462;
  --color-piccadilly-purple-900: #2c274e;
  --color-piccadilly-purple-950: #1b1833;
  --color-everglade: #214035;
  --color-everglade-50: #e7faf2;
  --color-everglade-100: #dbf1e8;
  --color-everglade-200: #c5dfd4;
  --color-everglade-300: #abc9bd;
  --color-everglade-400: #8bab9e;
  --color-everglade-500: #709184;
  --color-everglade-600: #57776b;
  --color-everglade-700: #436156;
  --color-everglade-800: #344e44;
  --color-everglade-900: #214035;
  --color-everglade-950: #172822;
}