Crown Jewels to Vibrant Vine Color Palette

About this palette

Crown Jewels to Vibrant Vine is a 5-color cool palette: #9676B0 (Crown Jewels), #91E1C7 (Beach Glass), #746583 (Heron), #93C0A6 (Lichen), #53353A (Vibrant Vine). It mixes purple, turquoise, green, brown tones and feels cool overall. The strongest text pairing is #91E1C7 on #53353A with a contrast ratio of 7.12:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Crown Jewels	rgb(150, 118, 176)	hsl(273, 27%, 58%)
Beach Glass	rgb(145, 225, 199)	hsl(160, 57%, 73%)
Heron	rgb(116, 101, 131)	hsl(270, 13%, 45%)
Lichen	rgb(147, 192, 166)	hsl(145, 26%, 66%)
Vibrant Vine	rgb(83, 53, 58)	hsl(350, 22%, 27%)

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.12:1 Very good#91E1C7 on #53353A
Aa7.12:1 Very good#53353A on #91E1C7
Aa5.33:1 Good#93C0A6 on #53353A
Aa5.33:1 Good#53353A on #93C0A6
Aa3.51:1 Poor#91E1C7 on #746583
Aa3.51:1 Poor#746583 on #91E1C7

Color blindness preview

CSS variables

/* Crown Jewels to Vibrant Vine — https://swatchly.xyz/palette/9676b0-91e1c7-746583-93c0a6-53353a */
:root {
  --crown-jewels: #9676b0;
  --beach-glass: #91e1c7;
  --heron: #746583;
  --lichen: #93c0a6;
  --vibrant-vine: #53353a;
}

Tailwind CSS v4

/* Crown Jewels to Vibrant Vine — https://swatchly.xyz/palette/9676b0-91e1c7-746583-93c0a6-53353a */
@theme {
  --color-crown-jewels: #9676b0;
  --color-crown-jewels-50: #f9f2ff;
  --color-crown-jewels-100: #f2e5ff;
  --color-crown-jewels-200: #e4cbfa;
  --color-crown-jewels-300: #d0b3e8;
  --color-crown-jewels-400: #b192cb;
  --color-crown-jewels-500: #9676b0;
  --color-crown-jewels-600: #7b5c93;
  --color-crown-jewels-700: #634779;
  --color-crown-jewels-800: #4e3661;
  --color-crown-jewels-900: #3d284d;
  --color-crown-jewels-950: #261732;
  --color-beach-glass: #91e1c7;
  --color-beach-glass-50: #cdfbea;
  --color-beach-glass-100: #bdf0de;
  --color-beach-glass-200: #91e1c7;
  --color-beach-glass-300: #85cab3;
  --color-beach-glass-400: #60ad95;
  --color-beach-glass-500: #43937b;
  --color-beach-glass-600: #287963;
  --color-beach-glass-700: #12624e;
  --color-beach-glass-800: #024f3e;
  --color-beach-glass-900: #003d2f;
  --color-beach-glass-950: #00261c;
  --color-heron: #746583;
  --color-heron-50: #f8f2ff;
  --color-heron-100: #f1e6fc;
  --color-heron-200: #ded2eb;
  --color-heron-300: #c8bbd7;
  --color-heron-400: #aa9bb9;
  --color-heron-500: #8f7f9e;
  --color-heron-600: #746583;
  --color-heron-700: #5d4f6a;
  --color-heron-800: #493d54;
  --color-heron-900: #382e42;
  --color-heron-950: #231c2a;
  --color-lichen: #93c0a6;
  --color-lichen-50: #dbf6e6;
  --color-lichen-100: #ccebd8;
  --color-lichen-200: #b2d6c1;
  --color-lichen-300: #93c0a6;
  --color-lichen-400: #77a28a;
  --color-lichen-500: #5e8971;
  --color-lichen-600: #47705a;
  --color-lichen-700: #355b46;
  --color-lichen-800: #274937;
  --color-lichen-900: #1d3a2b;
  --color-lichen-950: #0f2419;
  --color-vibrant-vine: #53353a;
  --color-vibrant-vine-50: #fff1f3;
  --color-vibrant-vine-100: #fde4e7;
  --color-vibrant-vine-200: #eccfd3;
  --color-vibrant-vine-300: #d7b7bb;
  --color-vibrant-vine-400: #b8969b;
  --color-vibrant-vine-500: #9c7a7f;
  --color-vibrant-vine-600: #805f64;
  --color-vibrant-vine-700: #66494e;
  --color-vibrant-vine-800: #53353a;
  --color-vibrant-vine-900: #3e292d;
  --color-vibrant-vine-950: #27181b;
}