Pitch-Black Forests to Moonlight Mauve color palette

002F24Pitch-Black Forests BFEDF9Icy Breeze A8541DSienna 205A4AEvergreen D07AA3Moonlight Mauve

About this palette

Pitch-Black Forests to Moonlight Mauve is a 5-color cool, vintage palette: #002F24 (Pitch-Black Forests), #BFEDF9 (Icy Breeze), #A8541D (Sienna), #205A4A (Evergreen), #D07AA3 (Moonlight Mauve). It mixes turquoise, blue, brown, pink tones and feels cool overall. The strongest text pairing is #002F24 on #BFEDF9 with a contrast ratio of 11.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pitch-Black Forests	rgb(0, 47, 36)	hsl(166, 100%, 9%)
Icy Breeze	rgb(191, 237, 249)	hsl(192, 83%, 86%)
Sienna	rgb(168, 84, 29)	hsl(24, 71%, 39%)
Evergreen	rgb(32, 90, 74)	hsl(163, 48%, 24%)
Moonlight Mauve	rgb(208, 122, 163)	hsl(331, 48%, 65%)

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.

Aa11.66:1 Very good#002F24 on #BFEDF9
Aa11.66:1 Very good#BFEDF9 on #002F24
Aa6.37:1 Good#BFEDF9 on #205A4A
Aa6.37:1 Good#205A4A on #BFEDF9
Aa4.88:1 Good#002F24 on #D07AA3
Aa4.88:1 Good#D07AA3 on #002F24
Aa4.23:1 Poor#BFEDF9 on #A8541D
Aa4.23:1 Poor#A8541D on #BFEDF9

Color blindness preview

CSS variables

/* Pitch-Black Forests to Moonlight Mauve — https://swatchly.xyz/palette/002f24-bfedf9-a8541d-205a4a-d07aa3 */
:root {
  --pitch-black-forests: #002f24;
  --icy-breeze: #bfedf9;
  --sienna: #a8541d;
  --evergreen: #205a4a;
  --moonlight-mauve: #d07aa3;
}

Tailwind CSS v4

/* Pitch-Black Forests to Moonlight Mauve — https://swatchly.xyz/palette/002f24-bfedf9-a8541d-205a4a-d07aa3 */
@theme {
  --color-pitch-black-forests: #002f24;
  --color-pitch-black-forests-50: #e3fcf3;
  --color-pitch-black-forests-100: #d6f3e9;
  --color-pitch-black-forests-200: #bfe0d5;
  --color-pitch-black-forests-300: #a4cbbe;
  --color-pitch-black-forests-400: #82ac9e;
  --color-pitch-black-forests-500: #679284;
  --color-pitch-black-forests-600: #4f796b;
  --color-pitch-black-forests-700: #3b6357;
  --color-pitch-black-forests-800: #2c5045;
  --color-pitch-black-forests-900: #214137;
  --color-pitch-black-forests-950: #002f24;
  --color-icy-breeze: #bfedf9;
  --color-icy-breeze-50: #daf5fc;
  --color-icy-breeze-100: #bfedf9;
  --color-icy-breeze-200: #b6d8e2;
  --color-icy-breeze-300: #9dc4ce;
  --color-icy-breeze-400: #7ca6b1;
  --color-icy-breeze-500: #618c97;
  --color-icy-breeze-600: #49727d;
  --color-icy-breeze-700: #365c66;
  --color-icy-breeze-800: #264850;
  --color-icy-breeze-900: #1b383f;
  --color-icy-breeze-950: #0e2328;
  --color-sienna: #a8541d;
  --color-sienna-50: #fff2ec;
  --color-sienna-100: #ffe6d9;
  --color-sienna-200: #ffccb1;
  --color-sienna-300: #fcad83;
  --color-sienna-400: #e18b5b;
  --color-sienna-500: #c56f3b;
  --color-sienna-600: #a8541d;
  --color-sienna-700: #8a3f04;
  --color-sienna-800: #6e2f00;
  --color-sienna-900: #562300;
  --color-sienna-950: #381400;
  --color-evergreen: #205a4a;
  --color-evergreen-50: #defef2;
  --color-evergreen-100: #d1f5e8;
  --color-evergreen-200: #b6e1d2;
  --color-evergreen-300: #99cbba;
  --color-evergreen-400: #74ab99;
  --color-evergreen-500: #568e7c;
  --color-evergreen-600: #3b7261;
  --color-evergreen-700: #205a4a;
  --color-evergreen-800: #1a4639;
  --color-evergreen-900: #11362c;
  --color-evergreen-950: #07221a;
  --color-moonlight-mauve: #d07aa3;
  --color-moonlight-mauve-50: #ffedf4;
  --color-moonlight-mauve-100: #ffdceb;
  --color-moonlight-mauve-200: #ffbbd9;
  --color-moonlight-mauve-300: #ed9ec3;
  --color-moonlight-mauve-400: #d07aa3;
  --color-moonlight-mauve-500: #b36089;
  --color-moonlight-mauve-600: #96486f;
  --color-moonlight-mauve-700: #7c3559;
  --color-moonlight-mauve-800: #642747;
  --color-moonlight-mauve-900: #501c37;
  --color-moonlight-mauve-950: #360f23;
}