New Heights to Siren Color Palette

About this palette

New Heights to Siren is a 5-color cool, vintage palette: #C9E7F8 (New Heights), #EA97B5 (Passion Potion), #8E9E4F (Vitality), #407492 (Harbour Blue), #60293A (Siren). It mixes blue, pink, green, red tones and feels cool overall. The strongest text pairing is #C9E7F8 on #60293A with a contrast ratio of 8.67:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
New Heights	rgb(201, 231, 248)	hsl(202, 77%, 88%)
Passion Potion	rgb(234, 151, 181)	hsl(338, 66%, 75%)
Vitality	rgb(142, 158, 79)	hsl(72, 33%, 46%)
Harbour Blue	rgb(64, 116, 146)	hsl(202, 39%, 41%)
Siren	rgb(96, 41, 58)	hsl(341, 40%, 27%)

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.67:1 Very good#C9E7F8 on #60293A
Aa8.67:1 Very good#60293A on #C9E7F8
Aa5.11:1 Good#EA97B5 on #60293A
Aa5.11:1 Good#60293A on #EA97B5
Aa3.94:1 Poor#C9E7F8 on #407492
Aa3.94:1 Poor#407492 on #C9E7F8
Aa3.81:1 Poor#8E9E4F on #60293A
Aa3.81:1 Poor#60293A on #8E9E4F

Color blindness preview

CSS variables

/* New Heights to Siren — https://swatchly.xyz/palette/c9e7f8-ea97b5-8e9e4f-407492-60293a */
:root {
  --new-heights: #c9e7f8;
  --passion-potion: #ea97b5;
  --vitality: #8e9e4f;
  --harbour-blue: #407492;
  --siren: #60293a;
}

Tailwind CSS v4

/* New Heights to Siren — https://swatchly.xyz/palette/c9e7f8-ea97b5-8e9e4f-407492-60293a */
@theme {
  --color-new-heights: #c9e7f8;
  --color-new-heights-50: #def0fb;
  --color-new-heights-100: #c9e7f8;
  --color-new-heights-200: #bdd4e1;
  --color-new-heights-300: #a6bfce;
  --color-new-heights-400: #86a2b1;
  --color-new-heights-500: #6c8897;
  --color-new-heights-600: #546f7d;
  --color-new-heights-700: #415966;
  --color-new-heights-800: #314651;
  --color-new-heights-900: #24363f;
  --color-new-heights-950: #142128;
  --color-passion-potion: #ea97b5;
  --color-passion-potion-50: #ffe7ee;
  --color-passion-potion-100: #ffd5e3;
  --color-passion-potion-200: #fab6cd;
  --color-passion-potion-300: #ea97b5;
  --color-passion-potion-400: #ca7b98;
  --color-passion-potion-500: #af627f;
  --color-passion-potion-600: #934b67;
  --color-passion-potion-700: #7a3853;
  --color-passion-potion-800: #642a41;
  --color-passion-potion-900: #511f34;
  --color-passion-potion-950: #351120;
  --color-vitality: #8e9e4f;
  --color-vitality-50: #ecf7c9;
  --color-vitality-100: #dfecb7;
  --color-vitality-200: #c8d798;
  --color-vitality-300: #afbf78;
  --color-vitality-400: #8e9e4f;
  --color-vitality-500: #758535;
  --color-vitality-600: #5e6c1d;
  --color-vitality-700: #4a5609;
  --color-vitality-800: #3a4400;
  --color-vitality-900: #2d3600;
  --color-vitality-950: #1d2300;
  --color-harbour-blue: #407492;
  --color-harbour-blue-50: #ebf7ff;
  --color-harbour-blue-100: #d7f0ff;
  --color-harbour-blue-200: #b7def7;
  --color-harbour-blue-300: #9bc9e5;
  --color-harbour-blue-400: #77aac9;
  --color-harbour-blue-500: #5a8fae;
  --color-harbour-blue-600: #407492;
  --color-harbour-blue-700: #2d5c77;
  --color-harbour-blue-800: #1e4860;
  --color-harbour-blue-900: #13384b;
  --color-harbour-blue-950: #082331;
  --color-siren: #60293a;
  --color-siren-50: #fff1f4;
  --color-siren-100: #ffe3e9;
  --color-siren-200: #fbc7d4;
  --color-siren-300: #e8aebc;
  --color-siren-400: #ca8b9b;
  --color-siren-500: #ad6f7f;
  --color-siren-600: #8f5464;
  --color-siren-700: #733f4e;
  --color-siren-800: #60293a;
  --color-siren-900: #47222d;
  --color-siren-950: #2d131b;
}