Ice Citadel to Pitch-Black Forests color palette

B3FAF2Ice Citadel 4CCEC7Peppy Peacock BD6388Malevolent Mauve 7E4153Nocturne Red 00352CPitch-Black Forests

Open in generator Export PNG, PDF, ASE…

About this palette

Ice Citadel to Pitch-Black Forests is a 5-color cool, vintage palette: #B3FAF2 (Ice Citadel), #4CCEC7 (Peppy Peacock), #BD6388 (Malevolent Mauve), #7E4153 (Nocturne Red), #00352C (Pitch-Black Forests). It mixes turquoise, pink, red tones and feels cool overall. The strongest text pairing is #B3FAF2 on #00352C with a contrast ratio of 11.56:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ice Citadel	rgb(179, 250, 242)	hsl(173, 88%, 84%)
Peppy Peacock	rgb(76, 206, 199)	hsl(177, 57%, 55%)
Malevolent Mauve	rgb(189, 99, 136)	hsl(335, 41%, 56%)
Nocturne Red	rgb(126, 65, 83)	hsl(342, 32%, 37%)
Pitch-Black Forests	rgb(0, 53, 44)	hsl(170, 100%, 10%)

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.56:1 Very good#B3FAF2 on #00352C
Aa11.56:1 Very good#00352C on #B3FAF2
Aa7.09:1 Very good#4CCEC7 on #00352C
Aa7.09:1 Very good#00352C on #4CCEC7
Aa6.46:1 Good#B3FAF2 on #7E4153
Aa6.46:1 Good#7E4153 on #B3FAF2
Aa3.96:1 Poor#4CCEC7 on #7E4153
Aa3.96:1 Poor#7E4153 on #4CCEC7

Color blindness preview

CSS variables

/* Ice Citadel to Pitch-Black Forests — https://swatchly.xyz/palette/b3faf2-4ccec7-bd6388-7e4153-00352c */
:root {
  --ice-citadel: #b3faf2;
  --peppy-peacock: #4ccec7;
  --malevolent-mauve: #bd6388;
  --nocturne-red: #7e4153;
  --pitch-black-forests: #00352c;
}

Tailwind CSS v4

/* Ice Citadel to Pitch-Black Forests — https://swatchly.xyz/palette/b3faf2-4ccec7-bd6388-7e4153-00352c */
@theme {
  --color-ice-citadel: #b3faf2;
  --color-ice-citadel-50: #d7fdf9;
  --color-ice-citadel-100: #b3faf2;
  --color-ice-citadel-200: #afe2dc;
  --color-ice-citadel-300: #93cdc7;
  --color-ice-citadel-400: #6dafa8;
  --color-ice-citadel-500: #4f948d;
  --color-ice-citadel-600: #347973;
  --color-ice-citadel-700: #1f615c;
  --color-ice-citadel-800: #104c48;
  --color-ice-citadel-900: #063b37;
  --color-ice-citadel-950: #012523;
  --color-peppy-peacock: #4ccec7;
  --color-peppy-peacock-50: #bdfffa;
  --color-peppy-peacock-100: #a9f5ef;
  --color-peppy-peacock-200: #86e2dc;
  --color-peppy-peacock-300: #4ccec7;
  --color-peppy-peacock-400: #27afa9;
  --color-peppy-peacock-500: #00938e;
  --color-peppy-peacock-600: #007773;
  --color-peppy-peacock-700: #00605c;
  --color-peppy-peacock-800: #004c49;
  --color-peppy-peacock-900: #003c39;
  --color-peppy-peacock-950: #002524;
  --color-malevolent-mauve: #bd6388;
  --color-malevolent-mauve-50: #fff0f5;
  --color-malevolent-mauve-100: #ffe2ec;
  --color-malevolent-mauve-200: #ffc3d9;
  --color-malevolent-mauve-300: #f6a3c3;
  --color-malevolent-mauve-400: #da80a4;
  --color-malevolent-mauve-500: #bd6388;
  --color-malevolent-mauve-600: #9f496e;
  --color-malevolent-mauve-700: #833557;
  --color-malevolent-mauve-800: #692644;
  --color-malevolent-mauve-900: #541a34;
  --color-malevolent-mauve-950: #370d21;
  --color-nocturne-red: #7e4153;
  --color-nocturne-red-50: #fff1f4;
  --color-nocturne-red-100: #ffe3e9;
  --color-nocturne-red-200: #fdc7d4;
  --color-nocturne-red-300: #ebaebe;
  --color-nocturne-red-400: #cf8d9e;
  --color-nocturne-red-500: #b37183;
  --color-nocturne-red-600: #965869;
  --color-nocturne-red-700: #7e4153;
  --color-nocturne-red-800: #633240;
  --color-nocturne-red-900: #4e2531;
  --color-nocturne-red-950: #33151e;
  --color-pitch-black-forests: #00352c;
  --color-pitch-black-forests-50: #e1fcf5;
  --color-pitch-black-forests-100: #d5f3eb;
  --color-pitch-black-forests-200: #bce1d7;
  --color-pitch-black-forests-300: #a2cbc0;
  --color-pitch-black-forests-400: #7daba0;
  --color-pitch-black-forests-500: #5f8f83;
  --color-pitch-black-forests-600: #457268;
  --color-pitch-black-forests-700: #305a50;
  --color-pitch-black-forests-800: #21443c;
  --color-pitch-black-forests-900: #00352c;
  --color-pitch-black-forests-950: #0a1f1a;
}