Jazz to Hydra Color Palette

About this palette

Jazz to Hydra is a 5-color cool palette: #582D37 (Jazz), #D385A0 (Primrose), #AED885 (Wasabi), #297FC5 (Mykonos), #006894 (Hydra). It mixes red, pink, green, blue tones and feels cool overall. The strongest text pairing is #582D37 on #AED885 with a contrast ratio of 7.02:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jazz	rgb(88, 45, 55)	hsl(346, 32%, 26%)
Primrose	rgb(211, 133, 160)	hsl(339, 47%, 67%)
Wasabi	rgb(174, 216, 133)	hsl(90, 52%, 68%)
Mykonos	rgb(41, 127, 197)	hsl(207, 66%, 47%)
Hydra	rgb(0, 104, 148)	hsl(198, 100%, 29%)

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.02:1 Very good#582D37 on #AED885
Aa7.02:1 Very good#AED885 on #582D37
Aa4.14:1 Poor#582D37 on #D385A0
Aa4.14:1 Poor#D385A0 on #582D37
Aa3.80:1 Poor#AED885 on #006894
Aa3.80:1 Poor#006894 on #AED885

Color blindness preview

CSS variables

/* Jazz to Hydra — https://swatchly.xyz/palette/582d37-d385a0-aed885-297fc5-006894 */
:root {
  --jazz: #582d37;
  --primrose: #d385a0;
  --wasabi: #aed885;
  --mykonos: #297fc5;
  --hydra: #006894;
}

Tailwind CSS v4

/* Jazz to Hydra — https://swatchly.xyz/palette/582d37-d385a0-aed885-297fc5-006894 */
@theme {
  --color-jazz: #582d37;
  --color-jazz-50: #fff1f3;
  --color-jazz-100: #ffe3e8;
  --color-jazz-200: #f4cbd3;
  --color-jazz-300: #e0b2ba;
  --color-jazz-400: #c18f99;
  --color-jazz-500: #a4737d;
  --color-jazz-600: #865862;
  --color-jazz-700: #6b424b;
  --color-jazz-800: #582d37;
  --color-jazz-900: #41242a;
  --color-jazz-950: #291519;
  --color-primrose: #d385a0;
  --color-primrose-50: #fff0f4;
  --color-primrose-100: #ffe1ea;
  --color-primrose-200: #ffc3d6;
  --color-primrose-300: #eea9c0;
  --color-primrose-400: #d385a0;
  --color-primrose-500: #b56a85;
  --color-primrose-600: #98516b;
  --color-primrose-700: #7d3c55;
  --color-primrose-800: #642c42;
  --color-primrose-900: #502033;
  --color-primrose-950: #34121f;
  --color-wasabi: #aed885;
  --color-wasabi-50: #f0ffe3;
  --color-wasabi-100: #e1faca;
  --color-wasabi-200: #cbeaaf;
  --color-wasabi-300: #aed885;
  --color-wasabi-400: #8fb669;
  --color-wasabi-500: #729948;
  --color-wasabi-600: #577c2c;
  --color-wasabi-700: #426316;
  --color-wasabi-800: #304d05;
  --color-wasabi-900: #233b00;
  --color-wasabi-950: #142500;
  --color-mykonos: #297fc5;
  --color-mykonos-50: #eaf4ff;
  --color-mykonos-100: #d4eaff;
  --color-mykonos-200: #acd6ff;
  --color-mykonos-300: #7abfff;
  --color-mykonos-400: #4d9de4;
  --color-mykonos-500: #297fc5;
  --color-mykonos-600: #0866a7;
  --color-mykonos-700: #005188;
  --color-mykonos-800: #003f6d;
  --color-mykonos-900: #003156;
  --color-mykonos-950: #001f39;
  --color-hydra: #006894;
  --color-hydra-50: #ebf7ff;
  --color-hydra-100: #d7efff;
  --color-hydra-200: #b2e1ff;
  --color-hydra-300: #8ccef7;
  --color-hydra-400: #65b1de;
  --color-hydra-500: #4697c6;
  --color-hydra-600: #287eab;
  --color-hydra-700: #006894;
  --color-hydra-800: #005175;
  --color-hydra-900: #003f5b;
  --color-hydra-950: #00273c;
}