Teal to Pomelo Red Color Palette

About this palette

Teal to Pomelo Red is a 4-color palette: #008185 (Teal), #B6F6A8 (Sweet Mint Pesto), #7F215D (Bane of Royalty), #E992B3 (Pomelo Red). It mixes turquoise, green, red, pink tones and feels balanced overall. The strongest text pairing is #B6F6A8 on #7F215D with a contrast ratio of 7.35:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Teal	rgb(0, 129, 133)	hsl(182, 100%, 26%)
Sweet Mint Pesto	rgb(182, 246, 168)	hsl(109, 81%, 81%)
Bane of Royalty	rgb(127, 33, 93)	hsl(322, 59%, 31%)
Pomelo Red	rgb(233, 146, 179)	hsl(337, 66%, 74%)

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.

Aa7.35:1 Very good#B6F6A8 on #7F215D
Aa7.35:1 Very good#7F215D on #B6F6A8
Aa4.05:1 Poor#7F215D on #E992B3
Aa4.05:1 Poor#E992B3 on #7F215D
Aa3.74:1 Poor#008185 on #B6F6A8
Aa3.74:1 Poor#B6F6A8 on #008185

Color blindness preview

CSS variables

/* Teal to Pomelo Red — https://swatchly.xyz/palette/008185-b6f6a8-7f215d-e992b3 */
:root {
  --teal: #008185;
  --sweet-mint-pesto: #b6f6a8;
  --bane-of-royalty: #7f215d;
  --pomelo-red: #e992b3;
}

Tailwind CSS v4

/* Teal to Pomelo Red — https://swatchly.xyz/palette/008185-b6f6a8-7f215d-e992b3 */
@theme {
  --color-teal: #008185;
  --color-teal-50: #d7feff;
  --color-teal-100: #c0f9fa;
  --color-teal-200: #a4e8ea;
  --color-teal-300: #84d4d7;
  --color-teal-400: #59b6ba;
  --color-teal-500: #349c9f;
  --color-teal-600: #008185;
  --color-teal-700: #00666a;
  --color-teal-800: #005053;
  --color-teal-900: #003e40;
  --color-teal-950: #002728;
  --color-sweet-mint-pesto: #b6f6a8;
  --color-sweet-mint-pesto-50: #d4facb;
  --color-sweet-mint-pesto-100: #b6f6a8;
  --color-sweet-mint-pesto-200: #afe0a4;
  --color-sweet-mint-pesto-300: #96cc8a;
  --color-sweet-mint-pesto-400: #74af67;
  --color-sweet-mint-pesto-500: #59954c;
  --color-sweet-mint-pesto-600: #417b34;
  --color-sweet-mint-pesto-700: #2e6422;
  --color-sweet-mint-pesto-800: #1f4f14;
  --color-sweet-mint-pesto-900: #153d0a;
  --color-sweet-mint-pesto-950: #092703;
  --color-bane-of-royalty: #7f215d;
  --color-bane-of-royalty-50: #fff0f8;
  --color-bane-of-royalty-100: #ffe2f1;
  --color-bane-of-royalty-200: #ffc0e2;
  --color-bane-of-royalty-300: #f79ccf;
  --color-bane-of-royalty-400: #d977af;
  --color-bane-of-royalty-500: #ba5892;
  --color-bane-of-royalty-600: #993d75;
  --color-bane-of-royalty-700: #7f215d;
  --color-bane-of-royalty-800: #621b48;
  --color-bane-of-royalty-900: #4e1238;
  --color-bane-of-royalty-950: #330823;
  --color-pomelo-red: #e992b3;
  --color-pomelo-red-50: #fff8fb;
  --color-pomelo-red-100: #ffeef3;
  --color-pomelo-red-200: #ffd5e3;
  --color-pomelo-red-300: #feb6d0;
  --color-pomelo-red-400: #e992b3;
  --color-pomelo-red-500: #c77495;
  --color-pomelo-red-600: #a75777;
  --color-pomelo-red-700: #89405e;
  --color-pomelo-red-800: #6d2d48;
  --color-pomelo-red-900: #551f36;
  --color-pomelo-red-950: #361020;
}