Velvet Black to Heavy Green Color Palette

About this palette

Velvet Black to Heavy Green is a 4-color muted palette: #2F1E19 (Velvet Black), #669CA3 (Tranquili Teal), #C7C2D4 (Mecha Kitty), #4E5936 (Heavy Green). It mixes gray, turquoise, green tones and feels cool overall. The strongest text pairing is #2F1E19 on #C7C2D4 with a contrast ratio of 9.16:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Velvet Black	rgb(47, 30, 25)	hsl(14, 31%, 14%)
Tranquili Teal	rgb(102, 156, 163)	hsl(187, 25%, 52%)
Mecha Kitty	rgb(199, 194, 212)	hsl(257, 17%, 80%)
Heavy Green	rgb(78, 89, 54)	hsl(79, 24%, 28%)

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.

Aa9.16:1 Very good#2F1E19 on #C7C2D4
Aa9.16:1 Very good#C7C2D4 on #2F1E19
Aa5.19:1 Good#2F1E19 on #669CA3
Aa5.19:1 Good#669CA3 on #2F1E19
Aa4.31:1 Poor#C7C2D4 on #4E5936
Aa4.31:1 Poor#4E5936 on #C7C2D4

Color blindness preview

CSS variables

/* Velvet Black to Heavy Green — https://swatchly.xyz/palette/2f1e19-669ca3-c7c2d4-4e5936 */
:root {
  --velvet-black: #2f1e19;
  --tranquili-teal: #669ca3;
  --mecha-kitty: #c7c2d4;
  --heavy-green: #4e5936;
}

Tailwind CSS v4

/* Velvet Black to Heavy Green — https://swatchly.xyz/palette/2f1e19-669ca3-c7c2d4-4e5936 */
@theme {
  --color-velvet-black: #2f1e19;
  --color-velvet-black-50: #fff2ee;
  --color-velvet-black-100: #f7e7e3;
  --color-velvet-black-200: #e5d3ce;
  --color-velvet-black-300: #d0bcb6;
  --color-velvet-black-400: #b29c96;
  --color-velvet-black-500: #97817b;
  --color-velvet-black-600: #7c6862;
  --color-velvet-black-700: #65524d;
  --color-velvet-black-800: #51413c;
  --color-velvet-black-900: #40322e;
  --color-velvet-black-950: #2f1e19;
  --color-tranquili-teal: #669ca3;
  --color-tranquili-teal-50: #e6fcff;
  --color-tranquili-teal-100: #d6f6fb;
  --color-tranquili-teal-200: #bfe6eb;
  --color-tranquili-teal-300: #a6d2d8;
  --color-tranquili-teal-400: #83b6bc;
  --color-tranquili-teal-500: #669ca3;
  --color-tranquili-teal-600: #4a7f86;
  --color-tranquili-teal-700: #33656c;
  --color-tranquili-teal-800: #224f55;
  --color-tranquili-teal-900: #153c41;
  --color-tranquili-teal-950: #092529;
  --color-mecha-kitty: #c7c2d4;
  --color-mecha-kitty-50: #f8f6ff;
  --color-mecha-kitty-100: #efecf7;
  --color-mecha-kitty-200: #dcd9e6;
  --color-mecha-kitty-300: #c7c2d4;
  --color-mecha-kitty-400: #a7a2b3;
  --color-mecha-kitty-500: #8b8697;
  --color-mecha-kitty-600: #6f6b7b;
  --color-mecha-kitty-700: #585462;
  --color-mecha-kitty-800: #44414d;
  --color-mecha-kitty-900: #34313b;
  --color-mecha-kitty-950: #201e25;
  --color-heavy-green: #4e5936;
  --color-heavy-green-50: #f1f9e3;
  --color-heavy-green-100: #e7efd6;
  --color-heavy-green-200: #d2dcbf;
  --color-heavy-green-300: #bac6a4;
  --color-heavy-green-400: #9aa782;
  --color-heavy-green-500: #7f8b66;
  --color-heavy-green-600: #65704d;
  --color-heavy-green-700: #4e5936;
  --color-heavy-green-800: #3d4529;
  --color-heavy-green-900: #2e351e;
  --color-heavy-green-950: #1c2110;
}