Beau Vert to Pitch-Black Forests Color Palette

About this palette

Beau Vert to Pitch-Black Forests is a 5-color cool, vintage palette: #005F66 (Beau Vert), #F2C8F2 (Sugar High), #CF7DC5 (Pink Punk), #A7514B (Hot Sauce), #182D1C (Pitch-Black Forests). It mixes turquoise, pink, red, green tones and feels cool overall. The strongest text pairing is #F2C8F2 on #182D1C with a contrast ratio of 10.01:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beau Vert	rgb(0, 95, 102)	hsl(184, 100%, 20%)
Sugar High	rgb(242, 200, 242)	hsl(300, 62%, 87%)
Pink Punk	rgb(207, 125, 197)	hsl(307, 46%, 65%)
Hot Sauce	rgb(167, 81, 75)	hsl(4, 38%, 47%)
Pitch-Black Forests	rgb(24, 45, 28)	hsl(131, 30%, 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.

Aa10.01:1 Very good#F2C8F2 on #182D1C
Aa10.01:1 Very good#182D1C on #F2C8F2
Aa5.17:1 Good#CF7DC5 on #182D1C
Aa5.17:1 Good#182D1C on #CF7DC5
Aa5.06:1 Good#005F66 on #F2C8F2
Aa5.06:1 Good#F2C8F2 on #005F66
Aa3.65:1 Poor#F2C8F2 on #A7514B
Aa3.65:1 Poor#A7514B on #F2C8F2

Color blindness preview

CSS variables

/* Beau Vert to Pitch-Black Forests — https://swatchly.xyz/palette/005f66-f2c8f2-cf7dc5-a7514b-182d1c */
:root {
  --beau-vert: #005f66;
  --sugar-high: #f2c8f2;
  --pink-punk: #cf7dc5;
  --hot-sauce: #a7514b;
  --pitch-black-forests: #182d1c;
}

Tailwind CSS v4

/* Beau Vert to Pitch-Black Forests — https://swatchly.xyz/palette/005f66-f2c8f2-cf7dc5-a7514b-182d1c */
@theme {
  --color-beau-vert: #005f66;
  --color-beau-vert-50: #ddfcff;
  --color-beau-vert-100: #c8f5f9;
  --color-beau-vert-200: #ace3e8;
  --color-beau-vert-300: #8ecdd3;
  --color-beau-vert-400: #66aeb5;
  --color-beau-vert-500: #469299;
  --color-beau-vert-600: #2a767d;
  --color-beau-vert-700: #005f66;
  --color-beau-vert-800: #034a50;
  --color-beau-vert-900: #00393e;
  --color-beau-vert-950: #002427;
  --color-sugar-high: #f2c8f2;
  --color-sugar-high-50: #fff0ff;
  --color-sugar-high-100: #fce2fc;
  --color-sugar-high-200: #f2c8f2;
  --color-sugar-high-300: #d7b4d7;
  --color-sugar-high-400: #b993b9;
  --color-sugar-high-500: #9e779e;
  --color-sugar-high-600: #825d82;
  --color-sugar-high-700: #694869;
  --color-sugar-high-800: #533754;
  --color-sugar-high-900: #412941;
  --color-sugar-high-950: #29182a;
  --color-pink-punk: #cf7dc5;
  --color-pink-punk-50: #ffeefc;
  --color-pink-punk-100: #ffdefa;
  --color-pink-punk-200: #febdf4;
  --color-pink-punk-300: #eba2e1;
  --color-pink-punk-400: #cf7dc5;
  --color-pink-punk-500: #b262a9;
  --color-pink-punk-600: #95498d;
  --color-pink-punk-700: #7a3573;
  --color-pink-punk-800: #62265c;
  --color-pink-punk-900: #4e1a49;
  --color-pink-punk-950: #330d30;
  --color-hot-sauce: #a7514b;
  --color-hot-sauce-50: #fff2f0;
  --color-hot-sauce-100: #ffe5e2;
  --color-hot-sauce-200: #ffcac4;
  --color-hot-sauce-300: #fbaaa2;
  --color-hot-sauce-400: #e08880;
  --color-hot-sauce-500: #c46b64;
  --color-hot-sauce-600: #a7514b;
  --color-hot-sauce-700: #893c37;
  --color-hot-sauce-800: #6f2b28;
  --color-hot-sauce-900: #581f1c;
  --color-hot-sauce-950: #3a100f;
  --color-pitch-black-forests: #182d1c;
  --color-pitch-black-forests-50: #ebfaed;
  --color-pitch-black-forests-100: #e0f0e2;
  --color-pitch-black-forests-200: #cadecd;
  --color-pitch-black-forests-300: #b2c8b5;
  --color-pitch-black-forests-400: #91a994;
  --color-pitch-black-forests-500: #778f7a;
  --color-pitch-black-forests-600: #5f7662;
  --color-pitch-black-forests-700: #4b604e;
  --color-pitch-black-forests-800: #3b4e3e;
  --color-pitch-black-forests-900: #2e3f31;
  --color-pitch-black-forests-950: #182d1c;
}