Violet Heaven to Pitch-Black Forests Color Palette

About this palette

Violet Heaven to Pitch-Black Forests is a 4-color vintage palette: #C5B9FF (Violet Heaven), #B17544 (Rocky Racoon), #954A00 (Brownie), #00352E (Pitch-Black Forests). It mixes purple, orange, brown, turquoise tones and feels balanced overall. The strongest text pairing is #C5B9FF on #00352E with a contrast ratio of 7.59:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Heaven	rgb(197, 185, 255)	hsl(250, 100%, 86%)
Rocky Racoon	rgb(177, 117, 68)	hsl(27, 44%, 48%)
Brownie	rgb(149, 74, 0)	hsl(30, 100%, 29%)
Pitch-Black Forests	rgb(0, 53, 46)	hsl(172, 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.

Aa7.59:1 Very good#C5B9FF on #00352E
Aa7.59:1 Very good#00352E on #C5B9FF
Aa3.61:1 Poor#C5B9FF on #954A00
Aa3.61:1 Poor#954A00 on #C5B9FF
Aa3.55:1 Poor#B17544 on #00352E
Aa3.55:1 Poor#00352E on #B17544

Color blindness preview

CSS variables

/* Violet Heaven to Pitch-Black Forests — https://swatchly.xyz/palette/c5b9ff-b17544-954a00-00352e */
:root {
  --violet-heaven: #c5b9ff;
  --rocky-racoon: #b17544;
  --brownie: #954a00;
  --pitch-black-forests: #00352e;
}

Tailwind CSS v4

/* Violet Heaven to Pitch-Black Forests — https://swatchly.xyz/palette/c5b9ff-b17544-954a00-00352e */
@theme {
  --color-violet-heaven: #c5b9ff;
  --color-violet-heaven-50: #f7f5ff;
  --color-violet-heaven-100: #edebff;
  --color-violet-heaven-200: #dad4ff;
  --color-violet-heaven-300: #c5b9ff;
  --color-violet-heaven-400: #a59ada;
  --color-violet-heaven-500: #897dbf;
  --color-violet-heaven-600: #6f62a1;
  --color-violet-heaven-700: #584c84;
  --color-violet-heaven-800: #44396b;
  --color-violet-heaven-900: #342b54;
  --color-violet-heaven-950: #201937;
  --color-rocky-racoon: #b17544;
  --color-rocky-racoon-50: #fff2e9;
  --color-rocky-racoon-100: #ffe5d2;
  --color-rocky-racoon-200: #fdcba6;
  --color-rocky-racoon-300: #eab388;
  --color-rocky-racoon-400: #cd9162;
  --color-rocky-racoon-500: #b17544;
  --color-rocky-racoon-600: #945b2b;
  --color-rocky-racoon-700: #794617;
  --color-rocky-racoon-800: #623509;
  --color-rocky-racoon-900: #4d2702;
  --color-rocky-racoon-950: #321700;
  --color-brownie: #954a00;
  --color-brownie-50: #fff2ea;
  --color-brownie-100: #ffe3d1;
  --color-brownie-200: #ffc6a0;
  --color-brownie-300: #f1a877;
  --color-brownie-400: #d3844d;
  --color-brownie-500: #b4662b;
  --color-brownie-600: #954a00;
  --color-brownie-700: #773a00;
  --color-brownie-800: #5e2c00;
  --color-brownie-900: #4a2100;
  --color-brownie-950: #301300;
  --color-pitch-black-forests: #00352e;
  --color-pitch-black-forests-50: #e1fcf6;
  --color-pitch-black-forests-100: #d5f3ec;
  --color-pitch-black-forests-200: #bce0d9;
  --color-pitch-black-forests-300: #a2cbc2;
  --color-pitch-black-forests-400: #7daba2;
  --color-pitch-black-forests-500: #5f8e85;
  --color-pitch-black-forests-600: #45726a;
  --color-pitch-black-forests-700: #305a52;
  --color-pitch-black-forests-800: #21443e;
  --color-pitch-black-forests-900: #00352e;
  --color-pitch-black-forests-950: #0a1f1b;
}