Velour Scar to Verde Color Palette

About this palette

Velour Scar to Verde is a 5-color cool, vintage palette: #824F61 (Velour Scar), #659668 (Leafy), #004450 (Cold and Dark), #F8D0DA (Icy Pink), #86B98D (Verde). It mixes red, green, turquoise, pink tones and feels cool overall. The strongest text pairing is #004450 on #F8D0DA with a contrast ratio of 7.73:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Velour Scar	rgb(130, 79, 97)	hsl(339, 24%, 41%)
Leafy	rgb(101, 150, 104)	hsl(124, 20%, 49%)
Cold and Dark	rgb(0, 68, 80)	hsl(189, 100%, 16%)
Icy Pink	rgb(248, 208, 218)	hsl(345, 74%, 89%)
Verde	rgb(134, 185, 141)	hsl(128, 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.73:1 Very good#004450 on #F8D0DA
Aa7.73:1 Very good#F8D0DA on #004450
Aa4.81:1 Good#004450 on #86B98D
Aa4.81:1 Good#86B98D on #004450
Aa4.64:1 Good#824F61 on #F8D0DA
Aa4.64:1 Good#F8D0DA on #824F61
Aa3.15:1 Poor#659668 on #004450
Aa3.15:1 Poor#004450 on #659668

Color blindness preview

CSS variables

/* Velour Scar to Verde — https://swatchly.xyz/palette/824f61-659668-004450-f8d0da-86b98d */
:root {
  --velour-scar: #824f61;
  --leafy: #659668;
  --cold-and-dark: #004450;
  --icy-pink: #f8d0da;
  --verde: #86b98d;
}

Tailwind CSS v4

/* Velour Scar to Verde — https://swatchly.xyz/palette/824f61-659668-004450-f8d0da-86b98d */
@theme {
  --color-velour-scar: #824f61;
  --color-velour-scar-50: #fff1f5;
  --color-velour-scar-100: #ffdfe9;
  --color-velour-scar-200: #f3c5d3;
  --color-velour-scar-300: #deaabb;
  --color-velour-scar-400: #be889a;
  --color-velour-scar-500: #a06a7d;
  --color-velour-scar-600: #824f61;
  --color-velour-scar-700: #693d4d;
  --color-velour-scar-800: #542e3c;
  --color-velour-scar-900: #42232e;
  --color-velour-scar-950: #2b141c;
  --color-leafy: #659668;
  --color-leafy-50: #e2ffe3;
  --color-leafy-100: #d6f6d7;
  --color-leafy-200: #bee4c0;
  --color-leafy-300: #a4cfa6;
  --color-leafy-400: #81b184;
  --color-leafy-500: #659668;
  --color-leafy-600: #4b7a4f;
  --color-leafy-700: #37623a;
  --color-leafy-800: #274d2a;
  --color-leafy-900: #1b3c1e;
  --color-leafy-950: #0e2610;
  --color-cold-and-dark: #004450;
  --color-cold-and-dark-50: #e4faff;
  --color-cold-and-dark-100: #cff2fb;
  --color-cold-and-dark-200: #b6e0ea;
  --color-cold-and-dark-300: #98c9d5;
  --color-cold-and-dark-400: #72a9b6;
  --color-cold-and-dark-500: #548c9a;
  --color-cold-and-dark-600: #39707d;
  --color-cold-and-dark-700: #255863;
  --color-cold-and-dark-800: #004450;
  --color-cold-and-dark-900: #0d333b;
  --color-cold-and-dark-950: #051f25;
  --color-icy-pink: #f8d0da;
  --color-icy-pink-50: #fff5f8;
  --color-icy-pink-100: #ffe8ee;
  --color-icy-pink-200: #f8d0da;
  --color-icy-pink-300: #dcbbc3;
  --color-icy-pink-400: #bd99a2;
  --color-icy-pink-500: #a17d86;
  --color-icy-pink-600: #84626b;
  --color-icy-pink-700: #6b4c54;
  --color-icy-pink-800: #543a41;
  --color-icy-pink-900: #422b32;
  --color-icy-pink-950: #2a1a1e;
  --color-verde: #86b98d;
  --color-verde-50: #eaffec;
  --color-verde-100: #dbf9de;
  --color-verde-200: #c4e9c8;
  --color-verde-300: #abd5b0;
  --color-verde-400: #86b98d;
  --color-verde-500: #6a9b71;
  --color-verde-600: #4e7e56;
  --color-verde-700: #386540;
  --color-verde-800: #284f2f;
  --color-verde-900: #1b3d21;
  --color-verde-950: #0d2512;
}