Hydra to Jack-O Color Palette

About this palette

Hydra to Jack-O is a 5-color cool palette: #006DA3 (Hydra), #8D61D5 (Legendary Lavender), #C1D576 (Alligator Alley), #004573 (Mermaid Blues), #F99700 (Jack-O). It mixes blue, purple, green, orange tones and feels cool overall. The strongest text pairing is #C1D576 on #004573 with a contrast ratio of 6.22:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Hydra	rgb(0, 109, 163)	hsl(200, 100%, 32%)
Legendary Lavender	rgb(141, 97, 213)	hsl(263, 58%, 61%)
Alligator Alley	rgb(193, 213, 118)	hsl(73, 53%, 65%)
Mermaid Blues	rgb(0, 69, 115)	hsl(204, 100%, 23%)
Jack-O	rgb(249, 151, 0)	hsl(36, 100%, 49%)

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.

Aa6.22:1 Good#C1D576 on #004573
Aa6.22:1 Good#004573 on #C1D576
Aa4.50:1 Good#004573 on #F99700
Aa4.50:1 Good#F99700 on #004573
Aa3.51:1 Poor#006DA3 on #C1D576
Aa3.51:1 Poor#C1D576 on #006DA3

Color blindness preview

CSS variables

/* Hydra to Jack-O — https://swatchly.xyz/palette/006da3-8d61d5-c1d576-004573-f99700 */
:root {
  --hydra: #006da3;
  --legendary-lavender: #8d61d5;
  --alligator-alley: #c1d576;
  --mermaid-blues: #004573;
  --jack-o: #f99700;
}

Tailwind CSS v4

/* Hydra to Jack-O — https://swatchly.xyz/palette/006da3-8d61d5-c1d576-004573-f99700 */
@theme {
  --color-hydra: #006da3;
  --color-hydra-50: #ecf7ff;
  --color-hydra-100: #d7eeff;
  --color-hydra-200: #addcff;
  --color-hydra-300: #7fc7fa;
  --color-hydra-400: #54a6de;
  --color-hydra-500: #3089c1;
  --color-hydra-600: #006da3;
  --color-hydra-700: #005682;
  --color-hydra-800: #004367;
  --color-hydra-900: #003451;
  --color-hydra-950: #002035;
  --color-legendary-lavender: #8d61d5;
  --color-legendary-lavender-50: #f5f1ff;
  --color-legendary-lavender-100: #ebe3ff;
  --color-legendary-lavender-200: #d9c9ff;
  --color-legendary-lavender-300: #c5a9ff;
  --color-legendary-lavender-400: #a97ff3;
  --color-legendary-lavender-500: #8d61d5;
  --color-legendary-lavender-600: #7448b6;
  --color-legendary-lavender-700: #5d3498;
  --color-legendary-lavender-800: #4a257d;
  --color-legendary-lavender-900: #3a1a65;
  --color-legendary-lavender-950: #250e44;
  --color-alligator-alley: #c1d576;
  --color-alligator-alley-50: #f6ffda;
  --color-alligator-alley-100: #ecf9c3;
  --color-alligator-alley-200: #d8e8a7;
  --color-alligator-alley-300: #c1d576;
  --color-alligator-alley-400: #a1b35b;
  --color-alligator-alley-500: #849636;
  --color-alligator-alley-600: #697912;
  --color-alligator-alley-700: #525f00;
  --color-alligator-alley-800: #3f4a00;
  --color-alligator-alley-900: #2f3800;
  --color-alligator-alley-950: #1d2300;
  --color-mermaid-blues: #004573;
  --color-mermaid-blues-50: #edf6ff;
  --color-mermaid-blues-100: #dbeeff;
  --color-mermaid-blues-200: #b7dcff;
  --color-mermaid-blues-300: #94c7f5;
  --color-mermaid-blues-400: #6fa7d9;
  --color-mermaid-blues-500: #518bbe;
  --color-mermaid-blues-600: #3770a0;
  --color-mermaid-blues-700: #235985;
  --color-mermaid-blues-800: #004573;
  --color-mermaid-blues-900: #0b3555;
  --color-mermaid-blues-950: #042138;
  --color-jack-o: #f99700;
  --color-jack-o-50: #ffe9d4;
  --color-jack-o-100: #ffd9b4;
  --color-jack-o-200: #ffba74;
  --color-jack-o-300: #f99700;
  --color-jack-o-400: #d27e00;
  --color-jack-o-500: #b06900;
  --color-jack-o-600: #905500;
  --color-jack-o-700: #744400;
  --color-jack-o-800: #5d3500;
  --color-jack-o-900: #4b2a00;
  --color-jack-o-950: #301900;
}