Rich Black to Violaceous Color Palette

About this palette

Rich Black to Violaceous is a 4-color vintage palette: #003A3B (Rich Black), #846100 (Alligator), #EAC26D (Bountiful Gold), #B988BB (Violaceous). It mixes turquoise, brown, yellow, pink tones and feels balanced overall. The strongest text pairing is #003A3B on #EAC26D with a contrast ratio of 7.45:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rich Black	rgb(0, 58, 59)	hsl(181, 100%, 12%)
Alligator	rgb(132, 97, 0)	hsl(44, 100%, 26%)
Bountiful Gold	rgb(234, 194, 109)	hsl(41, 75%, 67%)
Violaceous	rgb(185, 136, 187)	hsl(298, 27%, 63%)

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.45:1 Very good#003A3B on #EAC26D
Aa7.45:1 Very good#EAC26D on #003A3B
Aa4.38:1 Poor#003A3B on #B988BB
Aa4.38:1 Poor#B988BB on #003A3B
Aa3.37:1 Poor#846100 on #EAC26D
Aa3.37:1 Poor#EAC26D on #846100

Color blindness preview

CSS variables

/* Rich Black to Violaceous — https://swatchly.xyz/palette/003a3b-846100-eac26d-b988bb */
:root {
  --rich-black: #003a3b;
  --alligator: #846100;
  --bountiful-gold: #eac26d;
  --violaceous: #b988bb;
}

Tailwind CSS v4

/* Rich Black to Violaceous — https://swatchly.xyz/palette/003a3b-846100-eac26d-b988bb */
@theme {
  --color-rich-black: #003a3b;
  --color-rich-black-50: #dffcfc;
  --color-rich-black-100: #d3f3f3;
  --color-rich-black-200: #bae0e0;
  --color-rich-black-300: #9fcbcb;
  --color-rich-black-400: #7bacac;
  --color-rich-black-500: #5e9091;
  --color-rich-black-600: #447576;
  --color-rich-black-700: #305d5e;
  --color-rich-black-800: #214949;
  --color-rich-black-900: #003a3b;
  --color-rich-black-950: #0a2323;
  --color-alligator: #846100;
  --color-alligator-50: #fff4df;
  --color-alligator-100: #ffe8ba;
  --color-alligator-200: #efd29a;
  --color-alligator-300: #dbba79;
  --color-alligator-400: #bd994f;
  --color-alligator-500: #a07c2c;
  --color-alligator-600: #846100;
  --color-alligator-700: #694d00;
  --color-alligator-800: #533b00;
  --color-alligator-900: #402d00;
  --color-alligator-950: #291c00;
  --color-bountiful-gold: #eac26d;
  --color-bountiful-gold-50: #fff8ea;
  --color-bountiful-gold-100: #ffeecc;
  --color-bountiful-gold-200: #f6daa0;
  --color-bountiful-gold-300: #eac26d;
  --color-bountiful-gold-400: #c6a252;
  --color-bountiful-gold-500: #aa842b;
  --color-bountiful-gold-600: #8d6800;
  --color-bountiful-gold-700: #6f5200;
  --color-bountiful-gold-800: #573f00;
  --color-bountiful-gold-900: #422f00;
  --color-bountiful-gold-950: #2a1d00;
  --color-violaceous: #b988bb;
  --color-violaceous-50: #ffecff;
  --color-violaceous-100: #fddbfe;
  --color-violaceous-200: #ecc4ed;
  --color-violaceous-300: #d7abd8;
  --color-violaceous-400: #b988bb;
  --color-violaceous-500: #9e6ea0;
  --color-violaceous-600: #825584;
  --color-violaceous-700: #6a416c;
  --color-violaceous-800: #553257;
  --color-violaceous-900: #432545;
  --color-violaceous-950: #2c162d;
}