Electra to Turquoise Pearl color palette

5BB59BElectra 006662Peacock Pride 003C48Royal Neptune 00985BMilitant Vegan 8BFAEETurquoise Pearl

About this palette

Electra to Turquoise Pearl is a 5-color cool palette: #5BB59B (Electra), #006662 (Peacock Pride), #003C48 (Royal Neptune), #00985B (Militant Vegan), #8BFAEE (Turquoise Pearl). It mixes turquoise, blue, green tones and feels cool overall. The strongest text pairing is #003C48 on #8BFAEE with a contrast ratio of 9.77:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Electra	rgb(91, 181, 155)	hsl(163, 38%, 53%)
Peacock Pride	rgb(0, 102, 98)	hsl(178, 100%, 20%)
Royal Neptune	rgb(0, 60, 72)	hsl(190, 100%, 14%)
Militant Vegan	rgb(0, 152, 91)	hsl(156, 100%, 30%)
Turquoise Pearl	rgb(139, 250, 238)	hsl(174, 92%, 76%)

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.77:1 Very good#003C48 on #8BFAEE
Aa9.77:1 Very good#8BFAEE on #003C48
Aa5.53:1 Good#006662 on #8BFAEE
Aa5.53:1 Good#8BFAEE on #006662
Aa4.90:1 Good#5BB59B on #003C48
Aa4.90:1 Good#003C48 on #5BB59B
Aa3.24:1 Poor#003C48 on #00985B
Aa3.24:1 Poor#00985B on #003C48

Color blindness preview

CSS variables

/* Electra to Turquoise Pearl — https://swatchly.xyz/palette/5bb59b-006662-003c48-00985b-8bfaee */
:root {
  --electra: #5bb59b;
  --peacock-pride: #006662;
  --royal-neptune: #003c48;
  --militant-vegan: #00985b;
  --turquoise-pearl: #8bfaee;
}

Tailwind CSS v4

/* Electra to Turquoise Pearl — https://swatchly.xyz/palette/5bb59b-006662-003c48-00985b-8bfaee */
@theme {
  --color-electra: #5bb59b;
  --color-electra-50: #dafff2;
  --color-electra-100: #c4f9e7;
  --color-electra-200: #a7e7d2;
  --color-electra-300: #88d3bb;
  --color-electra-400: #5bb59b;
  --color-electra-500: #3d9980;
  --color-electra-600: #1c7d66;
  --color-electra-700: #006550;
  --color-electra-800: #004f3e;
  --color-electra-900: #003d2f;
  --color-electra-950: #00261d;
  --color-peacock-pride: #006662;
  --color-peacock-pride-50: #d6fffb;
  --color-peacock-pride-100: #c7f6f2;
  --color-peacock-pride-200: #ace5e1;
  --color-peacock-pride-300: #8ed1cc;
  --color-peacock-pride-400: #67b3ae;
  --color-peacock-pride-500: #479893;
  --color-peacock-pride-600: #2a7d78;
  --color-peacock-pride-700: #006662;
  --color-peacock-pride-800: #00504d;
  --color-peacock-pride-900: #003e3b;
  --color-peacock-pride-950: #002725;
  --color-royal-neptune: #003c48;
  --color-royal-neptune-50: #e5f9ff;
  --color-royal-neptune-100: #d1f2fb;
  --color-royal-neptune-200: #b8dfea;
  --color-royal-neptune-300: #9dcad6;
  --color-royal-neptune-400: #7aabb8;
  --color-royal-neptune-500: #5d909e;
  --color-royal-neptune-600: #437682;
  --color-royal-neptune-700: #305e6a;
  --color-royal-neptune-800: #214b55;
  --color-royal-neptune-900: #003c48;
  --color-royal-neptune-950: #0a252b;
  --color-militant-vegan: #00985b;
  --color-militant-vegan-50: #d9ffe6;
  --color-militant-vegan-100: #b6fcd0;
  --color-militant-vegan-200: #96eab7;
  --color-militant-vegan-300: #71d49b;
  --color-militant-vegan-400: #3fb578;
  --color-militant-vegan-500: #00985b;
  --color-militant-vegan-600: #007b48;
  --color-militant-vegan-700: #006239;
  --color-militant-vegan-800: #004d2b;
  --color-militant-vegan-900: #003c21;
  --color-militant-vegan-950: #002613;
  --color-turquoise-pearl: #8bfaee;
  --color-turquoise-pearl-50: #c0fdf5;
  --color-turquoise-pearl-100: #8bfaee;
  --color-turquoise-pearl-200: #91e3d9;
  --color-turquoise-pearl-300: #71cfc5;
  --color-turquoise-pearl-400: #43b2a8;
  --color-turquoise-pearl-500: #12988e;
  --color-turquoise-pearl-600: #007b73;
  --color-turquoise-pearl-700: #00635c;
  --color-turquoise-pearl-800: #004e48;
  --color-turquoise-pearl-900: #003c37;
  --color-turquoise-pearl-950: #002622;
}