Violet Heaven to Beauty and the Beach color palette

C4BEF7Violet Heaven 847CAFAster 3C2716English Walnut B0F7E4Pale King’s Blue 346150Herbes de Provence BF967ABeauty and the Beach

Open in generator Export PNG, PDF, ASE…

About this palette

Violet Heaven to Beauty and the Beach is a 6-color cool palette: #C4BEF7 (Violet Heaven), #847CAF (Aster), #3C2716 (English Walnut), #B0F7E4 (Pale King’s Blue), #346150 (Herbes de Provence), #BF967A (Beauty and the Beach). It mixes purple, brown, turquoise, orange tones and feels cool overall. The strongest text pairing is #3C2716 on #B0F7E4 with a contrast ratio of 11.56:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Heaven	rgb(196, 190, 247)	hsl(246, 78%, 86%)
Aster	rgb(132, 124, 175)	hsl(249, 24%, 59%)
English Walnut	rgb(60, 39, 22)	hsl(27, 46%, 16%)
Pale King’s Blue	rgb(176, 247, 228)	hsl(164, 82%, 83%)
Herbes de Provence	rgb(52, 97, 80)	hsl(157, 30%, 29%)
Beauty and the Beach	rgb(191, 150, 122)	hsl(24, 35%, 61%)

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.

Aa11.56:1 Very good#3C2716 on #B0F7E4
Aa11.56:1 Very good#B0F7E4 on #3C2716
Aa8.07:1 Very good#C4BEF7 on #3C2716
Aa8.07:1 Very good#3C2716 on #C4BEF7
Aa5.81:1 Good#B0F7E4 on #346150
Aa5.81:1 Good#346150 on #B0F7E4
Aa5.26:1 Good#3C2716 on #BF967A
Aa5.26:1 Good#BF967A on #3C2716

Color blindness preview

CSS variables

/* Violet Heaven to Beauty and the Beach — https://swatchly.xyz/palette/c4bef7-847caf-3c2716-b0f7e4-346150-bf967a */
:root {
  --violet-heaven: #c4bef7;
  --aster: #847caf;
  --english-walnut: #3c2716;
  --pale-king-s-blue: #b0f7e4;
  --herbes-de-provence: #346150;
  --beauty-and-the-beach: #bf967a;
}

Tailwind CSS v4

/* Violet Heaven to Beauty and the Beach — https://swatchly.xyz/palette/c4bef7-847caf-3c2716-b0f7e4-346150-bf967a */
@theme {
  --color-violet-heaven: #c4bef7;
  --color-violet-heaven-50: #f7f7ff;
  --color-violet-heaven-100: #eeecff;
  --color-violet-heaven-200: #dad6ff;
  --color-violet-heaven-300: #c4bef7;
  --color-violet-heaven-400: #a49ed3;
  --color-violet-heaven-500: #8881b7;
  --color-violet-heaven-600: #6d6699;
  --color-violet-heaven-700: #564f7d;
  --color-violet-heaven-800: #423d64;
  --color-violet-heaven-900: #322d4f;
  --color-violet-heaven-950: #1f1b33;
  --color-aster: #847caf;
  --color-aster-50: #f4f3ff;
  --color-aster-100: #eae7ff;
  --color-aster-200: #d6d0fa;
  --color-aster-300: #bfb9e7;
  --color-aster-400: #9f98cb;
  --color-aster-500: #847caf;
  --color-aster-600: #6a6292;
  --color-aster-700: #544d78;
  --color-aster-800: #423b61;
  --color-aster-900: #322d4d;
  --color-aster-950: #1f1b32;
  --color-english-walnut: #3c2716;
  --color-english-walnut-50: #fff3e9;
  --color-english-walnut-100: #f9e7da;
  --color-english-walnut-200: #e8d3c4;
  --color-english-walnut-300: #d3bcaa;
  --color-english-walnut-400: #b49b87;
  --color-english-walnut-500: #977e6b;
  --color-english-walnut-600: #7a6351;
  --color-english-walnut-700: #614c3b;
  --color-english-walnut-800: #4a392b;
  --color-english-walnut-900: #3c2716;
  --color-english-walnut-950: #221810;
  --color-pale-king-s-blue: #b0f7e4;
  --color-pale-king-s-blue-50: #d3fbf0;
  --color-pale-king-s-blue-100: #b0f7e4;
  --color-pale-king-s-blue-200: #ace0d2;
  --color-pale-king-s-blue-300: #90ccbc;
  --color-pale-king-s-blue-400: #6cae9d;
  --color-pale-king-s-blue-500: #4f9483;
  --color-pale-king-s-blue-600: #357969;
  --color-pale-king-s-blue-700: #216254;
  --color-pale-king-s-blue-800: #114d41;
  --color-pale-king-s-blue-900: #073c32;
  --color-pale-king-s-blue-950: #02261e;
  --color-herbes-de-provence: #346150;
  --color-herbes-de-provence-50: #e2fcf1;
  --color-herbes-de-provence-100: #d6f3e6;
  --color-herbes-de-provence-200: #bee1d2;
  --color-herbes-de-provence-300: #a4ccbb;
  --color-herbes-de-provence-400: #81ae9b;
  --color-herbes-de-provence-500: #659380;
  --color-herbes-de-provence-600: #4b7866;
  --color-herbes-de-provence-700: #346150;
  --color-herbes-de-provence-800: #274c3e;
  --color-herbes-de-provence-900: #1b3b2f;
  --color-herbes-de-provence-950: #0e251d;
  --color-beauty-and-the-beach: #bf967a;
  --color-beauty-and-the-beach-50: #fff2e9;
  --color-beauty-and-the-beach-100: #ffe4d3;
  --color-beauty-and-the-beach-200: #f0cfb9;
  --color-beauty-and-the-beach-300: #dcb79e;
  --color-beauty-and-the-beach-400: #bf967a;
  --color-beauty-and-the-beach-500: #a37b60;
  --color-beauty-and-the-beach-600: #876147;
  --color-beauty-and-the-beach-700: #6e4c34;
  --color-beauty-and-the-beach-800: #583a25;
  --color-beauty-and-the-beach-900: #452c1a;
  --color-beauty-and-the-beach-950: #2c1b0e;
}