Arctic Nights to Pitch-Black Forests color palette

375C5DArctic Nights AAC9A9Limestoned E9FFE9Snow White 63887CAloe Vera 11372CPitch-Black Forests

About this palette

Arctic Nights to Pitch-Black Forests is a 5-color muted, cool palette: #375C5D (Arctic Nights), #AAC9A9 (Limestoned), #E9FFE9 (Snow White), #63887C (Aloe Vera), #11372C (Pitch-Black Forests). It mixes turquoise, green, white tones and feels cool overall. The strongest text pairing is #E9FFE9 on #11372C with a contrast ratio of 12.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Arctic Nights	rgb(55, 92, 93)	hsl(182, 26%, 29%)
Limestoned	rgb(170, 201, 169)	hsl(118, 23%, 73%)
Snow White	rgb(233, 255, 233)	hsl(120, 100%, 96%)
Aloe Vera	rgb(99, 136, 124)	hsl(161, 16%, 46%)
Pitch-Black Forests	rgb(17, 55, 44)	hsl(163, 53%, 14%)

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.

Aa12.41:1 Super#E9FFE9 on #11372C
Aa12.41:1 Super#11372C on #E9FFE9
Aa7.24:1 Very good#AAC9A9 on #11372C
Aa7.24:1 Very good#11372C on #AAC9A9
Aa7.00:1 Good#375C5D on #E9FFE9
Aa7.00:1 Good#E9FFE9 on #375C5D
Aa4.08:1 Poor#375C5D on #AAC9A9
Aa4.08:1 Poor#AAC9A9 on #375C5D

Color blindness preview

CSS variables

/* Arctic Nights to Pitch-Black Forests — https://swatchly.xyz/palette/375c5d-aac9a9-e9ffe9-63887c-11372c */
:root {
  --arctic-nights: #375c5d;
  --limestoned: #aac9a9;
  --snow-white: #e9ffe9;
  --aloe-vera: #63887c;
  --pitch-black-forests: #11372c;
}

Tailwind CSS v4

/* Arctic Nights to Pitch-Black Forests — https://swatchly.xyz/palette/375c5d-aac9a9-e9ffe9-63887c-11372c */
@theme {
  --color-arctic-nights: #375c5d;
  --color-arctic-nights-50: #e4fafb;
  --color-arctic-nights-100: #d8f1f1;
  --color-arctic-nights-200: #c0dedf;
  --color-arctic-nights-300: #a6c8c9;
  --color-arctic-nights-400: #84a9aa;
  --color-arctic-nights-500: #688e8f;
  --color-arctic-nights-600: #4e7374;
  --color-arctic-nights-700: #375c5d;
  --color-arctic-nights-800: #2a4849;
  --color-arctic-nights-900: #1e3738;
  --color-arctic-nights-950: #102323;
  --color-limestoned: #aac9a9;
  --color-limestoned-50: #e8fae8;
  --color-limestoned-100: #ddf0dc;
  --color-limestoned-200: #c6dec5;
  --color-limestoned-300: #aac9a9;
  --color-limestoned-400: #8ca98b;
  --color-limestoned-500: #718e70;
  --color-limestoned-600: #587457;
  --color-limestoned-700: #435c43;
  --color-limestoned-800: #334932;
  --color-limestoned-900: #263825;
  --color-limestoned-950: #162316;
  --color-snow-white: #e9ffe9;
  --color-snow-white-50: #e9ffe9;
  --color-snow-white-100: #e5f2e4;
  --color-snow-white-200: #cfdecf;
  --color-snow-white-300: #b6c8b6;
  --color-snow-white-400: #95a995;
  --color-snow-white-500: #798d79;
  --color-snow-white-600: #5f725f;
  --color-snow-white-700: #4a5b4a;
  --color-snow-white-800: #384738;
  --color-snow-white-900: #2a372a;
  --color-snow-white-950: #192219;
  --color-aloe-vera: #63887c;
  --color-aloe-vera-50: #e4faf2;
  --color-aloe-vera-100: #d6efe6;
  --color-aloe-vera-200: #bedbd1;
  --color-aloe-vera-300: #a3c4b9;
  --color-aloe-vera-400: #80a598;
  --color-aloe-vera-500: #63887c;
  --color-aloe-vera-600: #4b6e63;
  --color-aloe-vera-700: #38584e;
  --color-aloe-vera-800: #2a463d;
  --color-aloe-vera-900: #1e362f;
  --color-aloe-vera-950: #11221d;
  --color-pitch-black-forests: #11372c;
  --color-pitch-black-forests-50: #e5fbf3;
  --color-pitch-black-forests-100: #d9f2e8;
  --color-pitch-black-forests-200: #c1dfd4;
  --color-pitch-black-forests-300: #a8cabd;
  --color-pitch-black-forests-400: #85aa9d;
  --color-pitch-black-forests-500: #688e81;
  --color-pitch-black-forests-600: #4e7366;
  --color-pitch-black-forests-700: #395b4f;
  --color-pitch-black-forests-800: #29463c;
  --color-pitch-black-forests-900: #11372c;
  --color-pitch-black-forests-950: #0f201b;
}