Start generating

Vicious Violet to Sunbathed Beach color palette

A0459DVicious Violet00636EWakame Green00AAAETeal Me No Lies511B6CVelvet VortexD3A400Mustard MusketeersFFD292Sunbathed Beach
Open in generator Export PNG, PDF, ASE…

About this palette

Vicious Violet to Sunbathed Beach is a 6-color cool palette: #A0459D (Vicious Violet), #00636E (Wakame Green), #00AAAE (Teal Me No Lies), #511B6C (Velvet Vortex), #D3A400 (Mustard Musketeers), #FFD292 (Sunbathed Beach). It mixes pink, turquoise, purple, yellow tones and feels cool overall. The strongest text pairing is #511B6C on #FFD292 with a contrast ratio of 8.64:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Vicious Violetrgb(160, 69, 157)hsl(302, 40%, 45%)
Wakame Greenrgb(0, 99, 110)hsl(186, 100%, 22%)
Teal Me No Liesrgb(0, 170, 174)hsl(181, 100%, 34%)
Velvet Vortexrgb(81, 27, 108)hsl(280, 60%, 26%)
Mustard Musketeersrgb(211, 164, 0)hsl(47, 100%, 41%)
Sunbathed Beachrgb(255, 210, 146)hsl(35, 100%, 79%)

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.64:1 Very good#511B6C on #FFD292
  • Aa8.64:1 Very good#FFD292 on #511B6C
  • Aa5.27:1 Good#511B6C on #D3A400
  • Aa5.27:1 Good#D3A400 on #511B6C
  • Aa4.95:1 Good#00636E on #FFD292
  • Aa4.95:1 Good#FFD292 on #00636E
  • Aa4.27:1 Poor#00AAAE on #511B6C
  • Aa4.27:1 Poor#511B6C on #00AAAE

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Vicious Violet to Sunbathed Beach — https://swatchly.xyz/palette/a0459d-00636e-00aaae-511b6c-d3a400-ffd292 */
:root {
  --vicious-violet: #a0459d;
  --wakame-green: #00636e;
  --teal-me-no-lies: #00aaae;
  --velvet-vortex: #511b6c;
  --mustard-musketeers: #d3a400;
  --sunbathed-beach: #ffd292;
}

Tailwind CSS v4

/* Vicious Violet to Sunbathed Beach — https://swatchly.xyz/palette/a0459d-00636e-00aaae-511b6c-d3a400-ffd292 */
@theme {
  --color-vicious-violet: #a0459d;
  --color-vicious-violet-50: #fff0fd;
  --color-vicious-violet-100: #ffe1fc;
  --color-vicious-violet-200: #ffc1fb;
  --color-vicious-violet-300: #f4a2ef;
  --color-vicious-violet-400: #d87ed3;
  --color-vicious-violet-500: #bd60b9;
  --color-vicious-violet-600: #a0459d;
  --color-vicious-violet-700: #833081;
  --color-vicious-violet-800: #6a2068;
  --color-vicious-violet-900: #541452;
  --color-vicious-violet-950: #370836;
  --color-wakame-green: #00636e;
  --color-wakame-green-50: #e1fbff;
  --color-wakame-green-100: #c6f5fc;
  --color-wakame-green-200: #abe3ec;
  --color-wakame-green-300: #8eced8;
  --color-wakame-green-400: #66b0bb;
  --color-wakame-green-500: #4795a0;
  --color-wakame-green-600: #2a7a85;
  --color-wakame-green-700: #00636e;
  --color-wakame-green-800: #004d56;
  --color-wakame-green-900: #003c43;
  --color-wakame-green-950: #00252b;
  --color-teal-me-no-lies: #00aaae;
  --color-teal-me-no-lies-50: #c2feff;
  --color-teal-me-no-lies-100: #a8f5f6;
  --color-teal-me-no-lies-200: #83e1e4;
  --color-teal-me-no-lies-300: #59cacd;
  --color-teal-me-no-lies-400: #00aaae;
  --color-teal-me-no-lies-500: #008e91;
  --color-teal-me-no-lies-600: #007376;
  --color-teal-me-no-lies-700: #005c5e;
  --color-teal-me-no-lies-800: #00494b;
  --color-teal-me-no-lies-900: #00393b;
  --color-teal-me-no-lies-950: #002526;
  --color-velvet-vortex: #511b6c;
  --color-velvet-vortex-50: #faf2ff;
  --color-velvet-vortex-100: #f4e4ff;
  --color-velvet-vortex-200: #eac9ff;
  --color-velvet-vortex-300: #daabf8;
  --color-velvet-vortex-400: #be8ade;
  --color-velvet-vortex-500: #a46ec4;
  --color-velvet-vortex-600: #8a55a8;
  --color-velvet-vortex-700: #72418e;
  --color-velvet-vortex-800: #5e3176;
  --color-velvet-vortex-900: #511b6c;
  --color-velvet-vortex-950: #321542;
  --color-mustard-musketeers: #d3a400;
  --color-mustard-musketeers-50: #fff8e8;
  --color-mustard-musketeers-100: #ffefc9;
  --color-mustard-musketeers-200: #fcdb8a;
  --color-mustard-musketeers-300: #ebc464;
  --color-mustard-musketeers-400: #d3a400;
  --color-mustard-musketeers-500: #af8800;
  --color-mustard-musketeers-600: #8d6d00;
  --color-mustard-musketeers-700: #705600;
  --color-mustard-musketeers-800: #574200;
  --color-mustard-musketeers-900: #423200;
  --color-mustard-musketeers-950: #291d00;
  --color-sunbathed-beach: #ffd292;
  --color-sunbathed-beach-50: #fff6e9;
  --color-sunbathed-beach-100: #ffeace;
  --color-sunbathed-beach-200: #ffd292;
  --color-sunbathed-beach-300: #e2bc88;
  --color-sunbathed-beach-400: #c49b60;
  --color-sunbathed-beach-500: #a87f40;
  --color-sunbathed-beach-600: #8c6425;
  --color-sunbathed-beach-700: #724e0e;
  --color-sunbathed-beach-800: #5a3b00;
  --color-sunbathed-beach-900: #462d00;
  --color-sunbathed-beach-950: #2d1b00;
}

Similar palettes