Ice Ice to Siren Color Palette

About this palette

Ice Ice to Siren is a 5-color cool, vintage palette: #B9ECB3 (Ice Ice), #85BD93 (Neptune Green), #B77793 (Prehistoric Pink), #006367 (Beau Vert), #6A2F4C (Siren). It mixes green, pink, turquoise, red tones and feels cool overall. The strongest text pairing is #B9ECB3 on #6A2F4C with a contrast ratio of 7.40:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ice Ice	rgb(185, 236, 179)	hsl(114, 60%, 81%)
Neptune Green	rgb(133, 189, 147)	hsl(135, 30%, 63%)
Prehistoric Pink	rgb(183, 119, 147)	hsl(334, 31%, 59%)
Beau Vert	rgb(0, 99, 103)	hsl(182, 100%, 20%)
Siren	rgb(106, 47, 76)	hsl(331, 39%, 30%)

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.40:1 Very good#B9ECB3 on #6A2F4C
Aa7.40:1 Very good#6A2F4C on #B9ECB3
Aa5.27:1 Good#B9ECB3 on #006367
Aa5.27:1 Good#006367 on #B9ECB3
Aa4.57:1 Good#85BD93 on #6A2F4C
Aa4.57:1 Good#6A2F4C on #85BD93
Aa3.25:1 Poor#85BD93 on #006367
Aa3.25:1 Poor#006367 on #85BD93

Color blindness preview

CSS variables

/* Ice Ice to Siren — https://swatchly.xyz/palette/b9ecb3-85bd93-b77793-006367-6a2f4c */
:root {
  --ice-ice: #b9ecb3;
  --neptune-green: #85bd93;
  --prehistoric-pink: #b77793;
  --beau-vert: #006367;
  --siren: #6a2f4c;
}

Tailwind CSS v4

/* Ice Ice to Siren — https://swatchly.xyz/palette/b9ecb3-85bd93-b77793-006367-6a2f4c */
@theme {
  --color-ice-ice: #b9ecb3;
  --color-ice-ice-50: #eaffe8;
  --color-ice-ice-100: #dbf9d7;
  --color-ice-ice-200: #b9ecb3;
  --color-ice-ice-300: #a8d2a3;
  --color-ice-ice-400: #84b37f;
  --color-ice-ice-500: #679662;
  --color-ice-ice-600: #4d7a48;
  --color-ice-ice-700: #386234;
  --color-ice-ice-800: #284d24;
  --color-ice-ice-900: #1c3b19;
  --color-ice-ice-950: #0f250d;
  --color-neptune-green: #85bd93;
  --color-neptune-green-50: #edfff0;
  --color-neptune-green-100: #dbfbe2;
  --color-neptune-green-200: #c4ebcd;
  --color-neptune-green-300: #abd8b5;
  --color-neptune-green-400: #85bd93;
  --color-neptune-green-500: #689f76;
  --color-neptune-green-600: #4c815a;
  --color-neptune-green-700: #356744;
  --color-neptune-green-800: #245132;
  --color-neptune-green-900: #183e24;
  --color-neptune-green-950: #0b2613;
  --color-prehistoric-pink: #b77793;
  --color-prehistoric-pink-50: #fff3f7;
  --color-prehistoric-pink-100: #ffe6f0;
  --color-prehistoric-pink-200: #fecbe0;
  --color-prehistoric-pink-300: #ecb3cb;
  --color-prehistoric-pink-400: #d192ad;
  --color-prehistoric-pink-500: #b77793;
  --color-prehistoric-pink-600: #995c77;
  --color-prehistoric-pink-700: #7d455f;
  --color-prehistoric-pink-800: #64334a;
  --color-prehistoric-pink-900: #4e2538;
  --color-prehistoric-pink-950: #321523;
  --color-beau-vert: #006367;
  --color-beau-vert-50: #d9fdff;
  --color-beau-vert-100: #c7f6f8;
  --color-beau-vert-200: #ace4e6;
  --color-beau-vert-300: #8ecfd2;
  --color-beau-vert-400: #67b0b4;
  --color-beau-vert-500: #479599;
  --color-beau-vert-600: #2a7a7e;
  --color-beau-vert-700: #006367;
  --color-beau-vert-800: #004d51;
  --color-beau-vert-900: #003c3e;
  --color-beau-vert-950: #002527;
  --color-siren: #6a2f4c;
  --color-siren-50: #fff1f6;
  --color-siren-100: #ffe2ee;
  --color-siren-200: #fcc6dd;
  --color-siren-300: #eaadc8;
  --color-siren-400: #ce8ca9;
  --color-siren-500: #b3718f;
  --color-siren-600: #965875;
  --color-siren-700: #7d435e;
  --color-siren-800: #6a2f4c;
  --color-siren-900: #50253a;
  --color-siren-950: #351525;
}