Sea Serpent’s Tears to Master Chief color palette

511BB8Sea Serpent’s Tears 9ED162Two Peas in a Pod 8D83E4Perrywinkle 461433Blackberry 497A00Master Chief

Open in generator Export PNG, PDF, ASE…

About this palette

Sea Serpent’s Tears to Master Chief is a 5-color vibrant, cool palette: #511BB8 (Sea Serpent’s Tears), #9ED162 (Two Peas in a Pod), #8D83E4 (Perrywinkle), #461433 (Blackberry), #497A00 (Master Chief). It mixes purple, green, red tones and feels cool overall. The strongest text pairing is #9ED162 on #461433 with a contrast ratio of 8.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Serpent’s Tears	rgb(81, 27, 184)	hsl(261, 74%, 41%)
Two Peas in a Pod	rgb(158, 209, 98)	hsl(88, 55%, 60%)
Perrywinkle	rgb(141, 131, 228)	hsl(246, 64%, 70%)
Blackberry	rgb(70, 20, 51)	hsl(323, 56%, 18%)
Master Chief	rgb(73, 122, 0)	hsl(84, 100%, 24%)

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.

Aa8.34:1 Very good#9ED162 on #461433
Aa8.34:1 Very good#461433 on #9ED162
Aa5.34:1 Good#511BB8 on #9ED162
Aa5.34:1 Good#9ED162 on #511BB8
Aa4.62:1 Good#8D83E4 on #461433
Aa4.62:1 Good#461433 on #8D83E4

Color blindness preview

CSS variables

/* Sea Serpent’s Tears to Master Chief — https://swatchly.xyz/palette/511bb8-9ed162-8d83e4-461433-497a00 */
:root {
  --sea-serpent-s-tears: #511bb8;
  --two-peas-in-a-pod: #9ed162;
  --perrywinkle: #8d83e4;
  --blackberry: #461433;
  --master-chief: #497a00;
}

Tailwind CSS v4

/* Sea Serpent’s Tears to Master Chief — https://swatchly.xyz/palette/511bb8-9ed162-8d83e4-461433-497a00 */
@theme {
  --color-sea-serpent-s-tears: #511bb8;
  --color-sea-serpent-s-tears-50: #f4f4ff;
  --color-sea-serpent-s-tears-100: #eae8ff;
  --color-sea-serpent-s-tears-200: #d3d0ff;
  --color-sea-serpent-s-tears-300: #bab2ff;
  --color-sea-serpent-s-tears-400: #9a87ff;
  --color-sea-serpent-s-tears-500: #805ef7;
  --color-sea-serpent-s-tears-600: #6640d2;
  --color-sea-serpent-s-tears-700: #511bb8;
  --color-sea-serpent-s-tears-800: #3e198e;
  --color-sea-serpent-s-tears-900: #300f73;
  --color-sea-serpent-s-tears-950: #1d064d;
  --color-two-peas-in-a-pod: #9ed162;
  --color-two-peas-in-a-pod-50: #e3ffc7;
  --color-two-peas-in-a-pod-100: #d5f7b3;
  --color-two-peas-in-a-pod-200: #bde493;
  --color-two-peas-in-a-pod-300: #9ed162;
  --color-two-peas-in-a-pod-400: #81b146;
  --color-two-peas-in-a-pod-500: #669520;
  --color-two-peas-in-a-pod-600: #4f7900;
  --color-two-peas-in-a-pod-700: #3e6100;
  --color-two-peas-in-a-pod-800: #304c00;
  --color-two-peas-in-a-pod-900: #243b00;
  --color-two-peas-in-a-pod-950: #152500;
  --color-perrywinkle: #8d83e4;
  --color-perrywinkle-50: #f6f6ff;
  --color-perrywinkle-100: #eeeeff;
  --color-perrywinkle-200: #dbdaff;
  --color-perrywinkle-300: #c5c2ff;
  --color-perrywinkle-400: #a69efb;
  --color-perrywinkle-500: #8d83e4;
  --color-perrywinkle-600: #7166c3;
  --color-perrywinkle-700: #594da4;
  --color-perrywinkle-800: #453985;
  --color-perrywinkle-900: #34296a;
  --color-perrywinkle-950: #1f1746;
  --color-blackberry: #461433;
  --color-blackberry-50: #fff0f8;
  --color-blackberry-100: #ffe2f1;
  --color-blackberry-200: #f8c7e1;
  --color-blackberry-300: #e5aecb;
  --color-blackberry-400: #c68bab;
  --color-blackberry-500: #a86d8e;
  --color-blackberry-600: #895271;
  --color-blackberry-700: #6d3c58;
  --color-blackberry-800: #542b42;
  --color-blackberry-900: #461433;
  --color-blackberry-950: #26101d;
  --color-master-chief: #497a00;
  --color-master-chief-50: #e5ffd2;
  --color-master-chief-100: #d5f8ba;
  --color-master-chief-200: #bde69b;
  --color-master-chief-300: #a2d17b;
  --color-master-chief-400: #7fb250;
  --color-master-chief-500: #63962d;
  --color-master-chief-600: #497a00;
  --color-master-chief-700: #396100;
  --color-master-chief-800: #2b4c00;
  --color-master-chief-900: #203b00;
  --color-master-chief-950: #122500;
}