Sea to Velour Scar Color Palette

About this palette

Sea to Velour Scar is a 5-color warm, vintage palette: #299D96 (Sea), #A4DDD7 (Whirlpool), #C79AA6 (Lily), #5F3645 (Hot Chocolate), #8B5064 (Velour Scar). It mixes turquoise, pink, red tones and feels warm overall. The strongest text pairing is #A4DDD7 on #5F3645 with a contrast ratio of 6.62:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea	rgb(41, 157, 150)	hsl(176, 59%, 39%)
Whirlpool	rgb(164, 221, 215)	hsl(174, 46%, 75%)
Lily	rgb(199, 154, 166)	hsl(344, 29%, 69%)
Hot Chocolate	rgb(95, 54, 69)	hsl(338, 28%, 29%)
Velour Scar	rgb(139, 80, 100)	hsl(340, 27%, 43%)

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.

Aa6.62:1 Good#A4DDD7 on #5F3645
Aa6.62:1 Good#5F3645 on #A4DDD7
Aa4.10:1 Poor#C79AA6 on #5F3645
Aa4.10:1 Poor#5F3645 on #C79AA6
Aa4.05:1 Poor#A4DDD7 on #8B5064
Aa4.05:1 Poor#8B5064 on #A4DDD7
Aa3.03:1 Poor#299D96 on #5F3645
Aa3.03:1 Poor#5F3645 on #299D96

Color blindness preview

CSS variables

/* Sea to Velour Scar — https://swatchly.xyz/palette/299d96-a4ddd7-c79aa6-5f3645-8b5064 */
:root {
  --sea: #299d96;
  --whirlpool: #a4ddd7;
  --lily: #c79aa6;
  --hot-chocolate: #5f3645;
  --velour-scar: #8b5064;
}

Tailwind CSS v4

/* Sea to Velour Scar — https://swatchly.xyz/palette/299d96-a4ddd7-c79aa6-5f3645-8b5064 */
@theme {
  --color-sea: #299d96;
  --color-sea-50: #d9fffb;
  --color-sea-100: #bffaf5;
  --color-sea-200: #a1eae3;
  --color-sea-300: #80d5ce;
  --color-sea-400: #53b8b1;
  --color-sea-500: #299d96;
  --color-sea-600: #00807a;
  --color-sea-700: #006560;
  --color-sea-800: #004f4b;
  --color-sea-900: #003d3a;
  --color-sea-950: #002624;
  --color-whirlpool: #a4ddd7;
  --color-whirlpool-50: #d7f8f4;
  --color-whirlpool-100: #c9eee9;
  --color-whirlpool-200: #a4ddd7;
  --color-whirlpool-300: #95c6c1;
  --color-whirlpool-400: #73a9a3;
  --color-whirlpool-500: #588e89;
  --color-whirlpool-600: #3f7570;
  --color-whirlpool-700: #2c5e5a;
  --color-whirlpool-800: #1e4b47;
  --color-whirlpool-900: #133a37;
  --color-whirlpool-950: #082422;
  --color-lily: #c79aa6;
  --color-lily-50: #fff4f7;
  --color-lily-100: #ffe8ee;
  --color-lily-200: #f4d2da;
  --color-lily-300: #e2bbc5;
  --color-lily-400: #c79aa6;
  --color-lily-500: #a97e89;
  --color-lily-600: #8c636e;
  --color-lily-700: #714c56;
  --color-lily-800: #5a3943;
  --color-lily-900: #462b32;
  --color-lily-950: #2c191e;
  --color-hot-chocolate: #5f3645;
  --color-hot-chocolate-50: #fff1f5;
  --color-hot-chocolate-100: #ffe2eb;
  --color-hot-chocolate-200: #f2ccd8;
  --color-hot-chocolate-300: #dfb4c2;
  --color-hot-chocolate-400: #c293a3;
  --color-hot-chocolate-500: #a77888;
  --color-hot-chocolate-600: #8b5f6e;
  --color-hot-chocolate-700: #724a58;
  --color-hot-chocolate-800: #5f3645;
  --color-hot-chocolate-900: #482a35;
  --color-hot-chocolate-950: #2e1921;
  --color-velour-scar: #8b5064;
  --color-velour-scar-50: #fff1f5;
  --color-velour-scar-100: #ffe1e9;
  --color-velour-scar-200: #f9c4d4;
  --color-velour-scar-300: #e5aabc;
  --color-velour-scar-400: #c6889c;
  --color-velour-scar-500: #a96b7f;
  --color-velour-scar-600: #8b5064;
  --color-velour-scar-700: #713d4f;
  --color-velour-scar-800: #5a2e3d;
  --color-velour-scar-900: #47222f;
  --color-velour-scar-950: #2e131d;
}