Voila! to Hōjicha color palette

A987AEVoila!4A5E69Seven Seas 5A8EA8Treasure Map Waters E3D6E8Pastel Day DAB5A6Prosciutto 3D4F38Hōjicha

Open in generator Export PNG, PDF, ASE…

About this palette

Voila! to Hōjicha is a 6-color muted palette: #A987AE (Voila!), #4A5E69 (Seven Seas), #5A8EA8 (Treasure Map Waters), #E3D6E8 (Pastel Day), #DAB5A6 (Prosciutto), #3D4F38 (Hōjicha). It mixes pink, gray, blue, orange, green tones and feels cool overall. The strongest text pairing is #E3D6E8 on #3D4F38 with a contrast ratio of 6.34:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Voila!	rgb(169, 135, 174)	hsl(292, 19%, 61%)
Seven Seas	rgb(74, 94, 105)	hsl(201, 17%, 35%)
Treasure Map Waters	rgb(90, 142, 168)	hsl(200, 31%, 51%)
Pastel Day	rgb(227, 214, 232)	hsl(283, 28%, 87%)
Prosciutto	rgb(218, 181, 166)	hsl(17, 41%, 75%)
Hōjicha	rgb(61, 79, 56)	hsl(107, 17%, 26%)

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.34:1 Good#E3D6E8 on #3D4F38
Aa6.34:1 Good#3D4F38 on #E3D6E8
Aa4.86:1 Good#4A5E69 on #E3D6E8
Aa4.86:1 Good#E3D6E8 on #4A5E69
Aa4.69:1 Good#DAB5A6 on #3D4F38
Aa4.69:1 Good#3D4F38 on #DAB5A6
Aa3.60:1 Poor#4A5E69 on #DAB5A6
Aa3.60:1 Poor#DAB5A6 on #4A5E69

Color blindness preview

CSS variables

/* Voila! to Hōjicha — https://swatchly.xyz/palette/a987ae-4a5e69-5a8ea8-e3d6e8-dab5a6-3d4f38 */
:root {
  --voila: #a987ae;
  --seven-seas: #4a5e69;
  --treasure-map-waters: #5a8ea8;
  --pastel-day: #e3d6e8;
  --prosciutto: #dab5a6;
  --h-jicha: #3d4f38;
}

Tailwind CSS v4

/* Voila! to Hōjicha — https://swatchly.xyz/palette/a987ae-4a5e69-5a8ea8-e3d6e8-dab5a6-3d4f38 */
@theme {
  --color-voila: #a987ae;
  --color-voila-50: #fce9ff;
  --color-voila-100: #f3dbf7;
  --color-voila-200: #e0c3e4;
  --color-voila-300: #c9a9ce;
  --color-voila-400: #a987ae;
  --color-voila-500: #8f6e94;
  --color-voila-600: #76577a;
  --color-voila-700: #604464;
  --color-voila-800: #4d3550;
  --color-voila-900: #3d2840;
  --color-voila-950: #28192a;
  --color-seven-seas: #4a5e69;
  --color-seven-seas-50: #ebf7ff;
  --color-seven-seas-100: #e0eef6;
  --color-seven-seas-200: #cbdce5;
  --color-seven-seas-300: #b3c6d1;
  --color-seven-seas-400: #93a8b4;
  --color-seven-seas-500: #798e99;
  --color-seven-seas-600: #60747f;
  --color-seven-seas-700: #4a5e69;
  --color-seven-seas-800: #394953;
  --color-seven-seas-900: #2a3840;
  --color-seven-seas-950: #192329;
  --color-treasure-map-waters: #5a8ea8;
  --color-treasure-map-waters-50: #eaf8ff;
  --color-treasure-map-waters-100: #d4f0ff;
  --color-treasure-map-waters-200: #b7def3;
  --color-treasure-map-waters-300: #9bc8e0;
  --color-treasure-map-waters-400: #77aac3;
  --color-treasure-map-waters-500: #5a8ea8;
  --color-treasure-map-waters-600: #40738c;
  --color-treasure-map-waters-700: #2d5c72;
  --color-treasure-map-waters-800: #1e485b;
  --color-treasure-map-waters-900: #133748;
  --color-treasure-map-waters-950: #08222e;
  --color-pastel-day: #e3d6e8;
  --color-pastel-day-50: #fcf5ff;
  --color-pastel-day-100: #f3ebf6;
  --color-pastel-day-200: #e3d6e8;
  --color-pastel-day-300: #cac0ce;
  --color-pastel-day-400: #ab9faf;
  --color-pastel-day-500: #8f8393;
  --color-pastel-day-600: #746878;
  --color-pastel-day-700: #5c5260;
  --color-pastel-day-800: #483f4b;
  --color-pastel-day-900: #37303a;
  --color-pastel-day-950: #221d24;
  --color-prosciutto: #dab5a6;
  --color-prosciutto-50: #fff0ea;
  --color-prosciutto-100: #fce3da;
  --color-prosciutto-200: #ebcec3;
  --color-prosciutto-300: #dab5a6;
  --color-prosciutto-400: #b99789;
  --color-prosciutto-500: #9e7c6e;
  --color-prosciutto-600: #826255;
  --color-prosciutto-700: #6a4d41;
  --color-prosciutto-800: #553b31;
  --color-prosciutto-900: #422d24;
  --color-prosciutto-950: #2a1b15;
  --color-h-jicha: #3d4f38;
  --color-h-jicha-50: #edf9ea;
  --color-h-jicha-100: #e2f0df;
  --color-h-jicha-200: #cdddc9;
  --color-h-jicha-300: #b6c8b2;
  --color-h-jicha-400: #97ab92;
  --color-h-jicha-500: #7d9177;
  --color-h-jicha-600: #64775f;
  --color-h-jicha-700: #4f614b;
  --color-h-jicha-800: #3d4f38;
  --color-h-jicha-900: #2f3d2c;
  --color-h-jicha-950: #1d261a;
}