Elite Teal to Green Mana Color Palette

About this palette

Elite Teal to Green Mana is a 4-color palette: #00383C (Elite Teal), #C1005F (Secret Affair), #FFCFDD (Light Pink), #00B461 (Green Mana). It mixes turquoise, red, pink, green tones and feels balanced overall. The strongest text pairing is #00383C on #FFCFDD with a contrast ratio of 9.33:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Elite Teal	rgb(0, 56, 60)	hsl(184, 100%, 12%)
Secret Affair	rgb(193, 0, 95)	hsl(330, 100%, 38%)
Light Pink	rgb(255, 207, 221)	hsl(342, 100%, 91%)
Green Mana	rgb(0, 180, 97)	hsl(152, 100%, 35%)

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.

Aa9.33:1 Very good#00383C on #FFCFDD
Aa9.33:1 Very good#FFCFDD on #00383C
Aa4.72:1 Good#00383C on #00B461
Aa4.72:1 Good#00B461 on #00383C
Aa4.43:1 Poor#C1005F on #FFCFDD
Aa4.43:1 Poor#FFCFDD on #C1005F

Color blindness preview

CSS variables

/* Elite Teal to Green Mana — https://swatchly.xyz/palette/00383c-c1005f-ffcfdd-00b461 */
:root {
  --elite-teal: #00383c;
  --secret-affair: #c1005f;
  --light-pink: #ffcfdd;
  --green-mana: #00b461;
}

Tailwind CSS v4

/* Elite Teal to Green Mana — https://swatchly.xyz/palette/00383c-c1005f-ffcfdd-00b461 */
@theme {
  --color-elite-teal: #00383c;
  --color-elite-teal-50: #e0fbfe;
  --color-elite-teal-100: #d3f2f5;
  --color-elite-teal-200: #bbe0e3;
  --color-elite-teal-300: #a0cace;
  --color-elite-teal-400: #7babaf;
  --color-elite-teal-500: #5e8f93;
  --color-elite-teal-600: #447377;
  --color-elite-teal-700: #305c5f;
  --color-elite-teal-800: #21474a;
  --color-elite-teal-900: #00383c;
  --color-elite-teal-950: #0a2123;
  --color-secret-affair: #c1005f;
  --color-secret-affair-50: #fff1f4;
  --color-secret-affair-100: #ffe2e9;
  --color-secret-affair-200: #ffc4d3;
  --color-secret-affair-300: #ff9fb9;
  --color-secret-affair-400: #ff5e95;
  --color-secret-affair-500: #e23679;
  --color-secret-affair-600: #c1005f;
  --color-secret-affair-700: #9b004b;
  --color-secret-affair-800: #7b003a;
  --color-secret-affair-900: #61002c;
  --color-secret-affair-950: #3f001b;
  --color-light-pink: #ffcfdd;
  --color-light-pink-50: #fff7f9;
  --color-light-pink-100: #ffebf0;
  --color-light-pink-200: #ffcfdd;
  --color-light-pink-300: #e1bac5;
  --color-light-pink-400: #c398a5;
  --color-light-pink-500: #a67b88;
  --color-light-pink-600: #89606d;
  --color-light-pink-700: #6f4a55;
  --color-light-pink-800: #573842;
  --color-light-pink-900: #452a32;
  --color-light-pink-950: #2c191f;
  --color-green-mana: #00b461;
  --color-green-mana-50: #d0ffdd;
  --color-green-mana-100: #a9fcc2;
  --color-green-mana-200: #84eaa6;
  --color-green-mana-300: #5bd488;
  --color-green-mana-400: #00b461;
  --color-green-mana-500: #009650;
  --color-green-mana-600: #007a40;
  --color-green-mana-700: #006132;
  --color-green-mana-800: #004d26;
  --color-green-mana-900: #003d1d;
  --color-green-mana-950: #002710;
}