Elite Teal to Porcelain Skin Color Palette

About this palette

Elite Teal to Porcelain Skin is a 5-color cool palette: #00383F (Elite Teal), #207A0D (Poblano), #4CA112 (Lawn Green), #EAA4B3 (Sprinkled With Pink), #FFE5EA (Porcelain Skin). It mixes turquoise, green, pink, white tones and feels cool overall. The strongest text pairing is #00383F on #FFE5EA with a contrast ratio of 10.78:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(0, 56, 63)	hsl(187, 100%, 12%)
Poblano	rgb(32, 122, 13)	hsl(110, 81%, 26%)
Lawn Green	rgb(76, 161, 18)	hsl(96, 80%, 35%)
Sprinkled With Pink	rgb(234, 164, 179)	hsl(347, 62%, 78%)
Porcelain Skin	rgb(255, 229, 234)	hsl(348, 100%, 95%)

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.78:1 Very good#00383F on #FFE5EA
Aa10.78:1 Very good#FFE5EA on #00383F
Aa6.39:1 Good#00383F on #EAA4B3
Aa6.39:1 Good#EAA4B3 on #00383F
Aa4.58:1 Good#207A0D on #FFE5EA
Aa4.58:1 Good#FFE5EA on #207A0D
Aa3.92:1 Poor#00383F on #4CA112
Aa3.92:1 Poor#4CA112 on #00383F

Color blindness preview

CSS variables

/* Elite Teal to Porcelain Skin — https://swatchly.xyz/palette/00383f-207a0d-4ca112-eaa4b3-ffe5ea */
:root {
  --elite-teal: #00383f;
  --poblano: #207a0d;
  --lawn-green: #4ca112;
  --sprinkled-with-pink: #eaa4b3;
  --porcelain-skin: #ffe5ea;
}

Tailwind CSS v4

/* Elite Teal to Porcelain Skin — https://swatchly.xyz/palette/00383f-207a0d-4ca112-eaa4b3-ffe5ea */
@theme {
  --color-elite-teal: #00383f;
  --color-elite-teal-50: #e1fbff;
  --color-elite-teal-100: #d3f2f7;
  --color-elite-teal-200: #badfe5;
  --color-elite-teal-300: #9fcad1;
  --color-elite-teal-400: #7babb2;
  --color-elite-teal-500: #5e8f96;
  --color-elite-teal-600: #44737b;
  --color-elite-teal-700: #305b62;
  --color-elite-teal-800: #21474d;
  --color-elite-teal-900: #00383f;
  --color-elite-teal-950: #0a2225;
  --color-poblano: #207a0d;
  --color-poblano-50: #e2ffdd;
  --color-poblano-100: #c5fbbc;
  --color-poblano-200: #a8e99e;
  --color-poblano-300: #89d37d;
  --color-poblano-400: #61b454;
  --color-poblano-500: #419733;
  --color-poblano-600: #207a0d;
  --color-poblano-700: #126200;
  --color-poblano-800: #0c4d00;
  --color-poblano-900: #073b00;
  --color-poblano-950: #032600;
  --color-lawn-green: #4ca112;
  --color-lawn-green-50: #e5ffdb;
  --color-lawn-green-100: #c9feb3;
  --color-lawn-green-200: #afee94;
  --color-lawn-green-300: #92da72;
  --color-lawn-green-400: #6bbc43;
  --color-lawn-green-500: #4ca112;
  --color-lawn-green-600: #398200;
  --color-lawn-green-700: #2c6700;
  --color-lawn-green-800: #215100;
  --color-lawn-green-900: #183e00;
  --color-lawn-green-950: #0c2700;
  --color-sprinkled-with-pink: #eaa4b3;
  --color-sprinkled-with-pink-50: #ffecf0;
  --color-sprinkled-with-pink-100: #ffdde3;
  --color-sprinkled-with-pink-200: #f9c1cc;
  --color-sprinkled-with-pink-300: #eaa4b3;
  --color-sprinkled-with-pink-400: #c98795;
  --color-sprinkled-with-pink-500: #ad6c7b;
  --color-sprinkled-with-pink-600: #915462;
  --color-sprinkled-with-pink-700: #77404d;
  --color-sprinkled-with-pink-800: #60303c;
  --color-sprinkled-with-pink-900: #4d242e;
  --color-sprinkled-with-pink-950: #32141c;
  --color-porcelain-skin: #ffe5ea;
  --color-porcelain-skin-50: #fff3f5;
  --color-porcelain-skin-100: #ffe5ea;
  --color-porcelain-skin-200: #e6d3d7;
  --color-porcelain-skin-300: #d1bcc0;
  --color-porcelain-skin-400: #b29ba0;
  --color-porcelain-skin-500: #978084;
  --color-porcelain-skin-600: #7b656a;
  --color-porcelain-skin-700: #634f53;
  --color-porcelain-skin-800: #4e3d41;
  --color-porcelain-skin-900: #3d2e31;
  --color-porcelain-skin-950: #261c1e;
}