Wine Tasting to Frost Color Palette

About this palette

Wine Tasting to Frost is a 5-color cool, vintage palette: #512C3D (Wine Tasting), #594A7A (Royal Robe), #538D79 (Highlands), #A6B17B (Estragon), #E2E5C2 (Frost). It mixes red, purple, turquoise, green, yellow tones and feels cool overall. The strongest text pairing is #512C3D on #E2E5C2 with a contrast ratio of 9.13:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wine Tasting	rgb(81, 44, 61)	hsl(332, 30%, 25%)
Royal Robe	rgb(89, 74, 122)	hsl(259, 24%, 38%)
Highlands	rgb(83, 141, 121)	hsl(159, 26%, 44%)
Estragon	rgb(166, 177, 123)	hsl(72, 26%, 59%)
Frost	rgb(226, 229, 194)	hsl(65, 40%, 83%)

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.13:1 Very good#512C3D on #E2E5C2
Aa9.13:1 Very good#E2E5C2 on #512C3D
Aa6.04:1 Good#594A7A on #E2E5C2
Aa6.04:1 Good#E2E5C2 on #594A7A
Aa5.17:1 Good#512C3D on #A6B17B
Aa5.17:1 Good#A6B17B on #512C3D
Aa3.42:1 Poor#594A7A on #A6B17B
Aa3.42:1 Poor#A6B17B on #594A7A

Color blindness preview

CSS variables

/* Wine Tasting to Frost — https://swatchly.xyz/palette/512c3d-594a7a-538d79-a6b17b-e2e5c2 */
:root {
  --wine-tasting: #512c3d;
  --royal-robe: #594a7a;
  --highlands: #538d79;
  --estragon: #a6b17b;
  --frost: #e2e5c2;
}

Tailwind CSS v4

/* Wine Tasting to Frost — https://swatchly.xyz/palette/512c3d-594a7a-538d79-a6b17b-e2e5c2 */
@theme {
  --color-wine-tasting: #512c3d;
  --color-wine-tasting-50: #fff1f6;
  --color-wine-tasting-100: #ffe2ee;
  --color-wine-tasting-200: #f0ccdb;
  --color-wine-tasting-300: #dcb4c4;
  --color-wine-tasting-400: #c095a7;
  --color-wine-tasting-500: #a67a8d;
  --color-wine-tasting-600: #8b6273;
  --color-wine-tasting-700: #734d5e;
  --color-wine-tasting-800: #5e3d4b;
  --color-wine-tasting-900: #512c3d;
  --color-wine-tasting-950: #321d26;
  --color-royal-robe: #594a7a;
  --color-royal-robe-50: #f6f3ff;
  --color-royal-robe-100: #ede7ff;
  --color-royal-robe-200: #dbd0fa;
  --color-royal-robe-300: #c5b8e7;
  --color-royal-robe-400: #a697cb;
  --color-royal-robe-500: #8a7baf;
  --color-royal-robe-600: #706192;
  --color-royal-robe-700: #594a7a;
  --color-royal-robe-800: #453960;
  --color-royal-robe-900: #352b4c;
  --color-royal-robe-950: #211a31;
  --color-highlands: #538d79;
  --color-highlands-50: #dcfdf0;
  --color-highlands-100: #cdf3e4;
  --color-highlands-200: #b3e0ce;
  --color-highlands-300: #96c9b6;
  --color-highlands-400: #71aa95;
  --color-highlands-500: #538d79;
  --color-highlands-600: #3b7360;
  --color-highlands-700: #285c4c;
  --color-highlands-800: #1b493b;
  --color-highlands-900: #11392d;
  --color-highlands-950: #07241b;
  --color-estragon: #a6b17b;
  --color-estragon-50: #f6fcdf;
  --color-estragon-100: #edf4d4;
  --color-estragon-200: #dae3bc;
  --color-estragon-300: #c5cea1;
  --color-estragon-400: #a6b17b;
  --color-estragon-500: #89945f;
  --color-estragon-600: #6d7744;
  --color-estragon-700: #565e2f;
  --color-estragon-800: #42491f;
  --color-estragon-900: #323814;
  --color-estragon-950: #1e2208;
  --color-frost: #e2e5c2;
  --color-frost-50: #edefda;
  --color-frost-100: #e2e5c2;
  --color-frost-200: #d0d2b7;
  --color-frost-300: #bbbea0;
  --color-frost-400: #9ea080;
  --color-frost-500: #848666;
  --color-frost-600: #6b6d4f;
  --color-frost-700: #56583c;
  --color-frost-800: #43452c;
  --color-frost-900: #333520;
  --color-frost-950: #202112;
}