Ultra Mint to Nordic Noir color palette

96F5C9Ultra Mint FF9895Mad Pinker CA6C6CFuzzy Wuzzy 00765BTropical Rainforest 023442Nordic Noir

About this palette

Ultra Mint to Nordic Noir is a 5-color cool palette: #96F5C9 (Ultra Mint), #FF9895 (Mad Pinker), #CA6C6C (Fuzzy Wuzzy), #00765B (Tropical Rainforest), #023442 (Nordic Noir). It mixes green, pink, red, turquoise, blue tones and feels cool overall. The strongest text pairing is #96F5C9 on #023442 with a contrast ratio of 10.30:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ultra Mint	rgb(150, 245, 201)	hsl(152, 83%, 77%)
Mad Pinker	rgb(255, 152, 149)	hsl(2, 100%, 79%)
Fuzzy Wuzzy	rgb(202, 108, 108)	hsl(0, 47%, 61%)
Tropical Rainforest	rgb(0, 118, 91)	hsl(166, 100%, 23%)
Nordic Noir	rgb(2, 52, 66)	hsl(193, 94%, 13%)

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.

Aa10.30:1 Very good#96F5C9 on #023442
Aa10.30:1 Very good#023442 on #96F5C9
Aa6.47:1 Good#FF9895 on #023442
Aa6.47:1 Good#023442 on #FF9895
Aa4.33:1 Poor#96F5C9 on #00765B
Aa4.33:1 Poor#00765B on #96F5C9
Aa3.73:1 Poor#CA6C6C on #023442
Aa3.73:1 Poor#023442 on #CA6C6C

Color blindness preview

CSS variables

/* Ultra Mint to Nordic Noir — https://swatchly.xyz/palette/96f5c9-ff9895-ca6c6c-00765b-023442 */
:root {
  --ultra-mint: #96f5c9;
  --mad-pinker: #ff9895;
  --fuzzy-wuzzy: #ca6c6c;
  --tropical-rainforest: #00765b;
  --nordic-noir: #023442;
}

Tailwind CSS v4

/* Ultra Mint to Nordic Noir — https://swatchly.xyz/palette/96f5c9-ff9895-ca6c6c-00765b-023442 */
@theme {
  --color-ultra-mint: #96f5c9;
  --color-ultra-mint-50: #ebfff5;
  --color-ultra-mint-100: #caffe4;
  --color-ultra-mint-200: #96f5c9;
  --color-ultra-mint-300: #8dd9b5;
  --color-ultra-mint-400: #61ba93;
  --color-ultra-mint-500: #3d9e76;
  --color-ultra-mint-600: #18815b;
  --color-ultra-mint-700: #006746;
  --color-ultra-mint-800: #005036;
  --color-ultra-mint-900: #003d28;
  --color-ultra-mint-950: #002718;
  --color-mad-pinker: #ff9895;
  --color-mad-pinker-50: #ffeceb;
  --color-mad-pinker-100: #ffdcda;
  --color-mad-pinker-200: #ffbebb;
  --color-mad-pinker-300: #ff9895;
  --color-mad-pinker-400: #dc7b79;
  --color-mad-pinker-500: #c0605f;
  --color-mad-pinker-600: #a34748;
  --color-mad-pinker-700: #873435;
  --color-mad-pinker-800: #6e2527;
  --color-mad-pinker-900: #591a1c;
  --color-mad-pinker-950: #3a0d0f;
  --color-fuzzy-wuzzy: #ca6c6c;
  --color-fuzzy-wuzzy-50: #fff3f2;
  --color-fuzzy-wuzzy-100: #ffe7e5;
  --color-fuzzy-wuzzy-200: #ffccca;
  --color-fuzzy-wuzzy-300: #ffaba9;
  --color-fuzzy-wuzzy-400: #e58987;
  --color-fuzzy-wuzzy-500: #ca6c6c;
  --color-fuzzy-wuzzy-600: #aa5152;
  --color-fuzzy-wuzzy-700: #8d3b3d;
  --color-fuzzy-wuzzy-800: #722a2c;
  --color-fuzzy-wuzzy-900: #5a1d20;
  --color-fuzzy-wuzzy-950: #3b0f11;
  --color-tropical-rainforest: #00765b;
  --color-tropical-rainforest-50: #dafff1;
  --color-tropical-rainforest-100: #c1f8e3;
  --color-tropical-rainforest-200: #a2e5cd;
  --color-tropical-rainforest-300: #81cfb4;
  --color-tropical-rainforest-400: #56b092;
  --color-tropical-rainforest-500: #329376;
  --color-tropical-rainforest-600: #00765b;
  --color-tropical-rainforest-700: #005e48;
  --color-tropical-rainforest-800: #004a38;
  --color-tropical-rainforest-900: #00392a;
  --color-tropical-rainforest-950: #00241a;
  --color-nordic-noir: #023442;
  --color-nordic-noir-50: #e7f9ff;
  --color-nordic-noir-100: #d4f1fc;
  --color-nordic-noir-200: #bcdeeb;
  --color-nordic-noir-300: #a1c8d7;
  --color-nordic-noir-400: #7da8b8;
  --color-nordic-noir-500: #5f8c9c;
  --color-nordic-noir-600: #457080;
  --color-nordic-noir-700: #315866;
  --color-nordic-noir-800: #21444f;
  --color-nordic-noir-900: #023442;
  --color-nordic-noir-950: #0a1f26;
}