Lucky to Vicious Violet Color Palette

About this palette

Lucky to Vicious Violet is a 5-color cool palette: #A69D00 (Lucky), #F8E1FF (Bunny Tail), #424000 (Green Not Found), #5BD9B7 (Tadorna Teal), #99449A (Vicious Violet). It mixes yellow, purple, brown, turquoise, pink tones and feels cool overall. The strongest text pairing is #F8E1FF on #424000 with a contrast ratio of 8.76:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lucky	rgb(166, 157, 0)	hsl(57, 100%, 33%)
Bunny Tail	rgb(248, 225, 255)	hsl(286, 100%, 94%)
Green Not Found	rgb(66, 64, 0)	hsl(58, 100%, 13%)
Tadorna Teal	rgb(91, 217, 183)	hsl(164, 62%, 60%)
Vicious Violet	rgb(153, 68, 154)	hsl(299, 39%, 44%)

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.

Aa8.76:1 Very good#F8E1FF on #424000
Aa8.76:1 Very good#424000 on #F8E1FF
Aa6.13:1 Good#424000 on #5BD9B7
Aa6.13:1 Good#5BD9B7 on #424000
Aa4.72:1 Good#F8E1FF on #99449A
Aa4.72:1 Good#99449A on #F8E1FF
Aa3.79:1 Poor#A69D00 on #424000
Aa3.79:1 Poor#424000 on #A69D00

Color blindness preview

CSS variables

/* Lucky to Vicious Violet — https://swatchly.xyz/palette/a69d00-f8e1ff-424000-5bd9b7-99449a */
:root {
  --lucky: #a69d00;
  --bunny-tail: #f8e1ff;
  --green-not-found: #424000;
  --tadorna-teal: #5bd9b7;
  --vicious-violet: #99449a;
}

Tailwind CSS v4

/* Lucky to Vicious Violet — https://swatchly.xyz/palette/a69d00-f8e1ff-424000-5bd9b7-99449a */
@theme {
  --color-lucky: #a69d00;
  --color-lucky-50: #f9f6b5;
  --color-lucky-100: #efeba1;
  --color-lucky-200: #dbd67c;
  --color-lucky-300: #c5be54;
  --color-lucky-400: #a69d00;
  --color-lucky-500: #8a8300;
  --color-lucky-600: #706900;
  --color-lucky-700: #595400;
  --color-lucky-800: #464200;
  --color-lucky-900: #373300;
  --color-lucky-950: #232000;
  --color-bunny-tail: #f8e1ff;
  --color-bunny-tail-50: #fbf0ff;
  --color-bunny-tail-100: #f8e1ff;
  --color-bunny-tail-200: #e1d0e6;
  --color-bunny-tail-300: #ccb9d1;
  --color-bunny-tail-400: #ad99b4;
  --color-bunny-tail-500: #927d98;
  --color-bunny-tail-600: #77637d;
  --color-bunny-tail-700: #604e65;
  --color-bunny-tail-800: #4b3c50;
  --color-bunny-tail-900: #3a2d3e;
  --color-bunny-tail-950: #251b28;
  --color-green-not-found: #424000;
  --color-green-not-found-50: #f7f8d7;
  --color-green-not-found-100: #eeeec9;
  --color-green-not-found-200: #dbdbaf;
  --color-green-not-found-300: #c4c492;
  --color-green-not-found-400: #a4a36c;
  --color-green-not-found-500: #88874e;
  --color-green-not-found-600: #6d6c35;
  --color-green-not-found-700: #555421;
  --color-green-not-found-800: #424000;
  --color-green-not-found-900: #32310b;
  --color-green-not-found-950: #1e1e04;
  --color-tadorna-teal: #5bd9b7;
  --color-tadorna-teal-50: #d6fff1;
  --color-tadorna-teal-100: #b5fce5;
  --color-tadorna-teal-200: #94ead0;
  --color-tadorna-teal-300: #5bd9b7;
  --color-tadorna-teal-400: #3bb898;
  --color-tadorna-teal-500: #009c7e;
  --color-tadorna-teal-600: #007e65;
  --color-tadorna-teal-700: #006450;
  --color-tadorna-teal-800: #004e3e;
  --color-tadorna-teal-900: #003d2f;
  --color-tadorna-teal-950: #00261d;
  --color-vicious-violet: #99449a;
  --color-vicious-violet-50: #ffeffe;
  --color-vicious-violet-100: #ffdffe;
  --color-vicious-violet-200: #ffbefe;
  --color-vicious-violet-300: #efa1ee;
  --color-vicious-violet-400: #d27dd2;
  --color-vicious-violet-500: #b65fb7;
  --color-vicious-violet-600: #99449a;
  --color-vicious-violet-700: #7d307e;
  --color-vicious-violet-800: #652166;
  --color-vicious-violet-900: #501551;
  --color-vicious-violet-950: #340a35;
}