Bluerocratic to Diva color palette

2C60FFBluerocratic 0082D0Way Beyond the Blue A79500Greedy Gecko A78FFFDreamy Candy Forest 00C859Alienated C2A4FFDiva

Open in generator Export PNG, PDF, ASE…

About this palette

Bluerocratic to Diva is a 6-color vibrant, cool, neon palette: #2C60FF (Bluerocratic), #0082D0 (Way Beyond the Blue), #A79500 (Greedy Gecko), #A78FFF (Dreamy Candy Forest), #00C859 (Alienated), #C2A4FF (Diva). It mixes blue, yellow, purple, green tones and feels cool overall. The strongest text pairing is #2C60FF on #C2A4FF with a contrast ratio of 2.38:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bluerocratic	rgb(44, 96, 255)	hsl(225, 100%, 59%)
Way Beyond the Blue	rgb(0, 130, 208)	hsl(202, 100%, 41%)
Greedy Gecko	rgb(167, 149, 0)	hsl(54, 100%, 33%)
Dreamy Candy Forest	rgb(167, 143, 255)	hsl(253, 100%, 78%)
Alienated	rgb(0, 200, 89)	hsl(147, 100%, 39%)
Diva	rgb(194, 164, 255)	hsl(260, 100%, 82%)

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.

Color blindness preview

CSS variables

/* Bluerocratic to Diva — https://swatchly.xyz/palette/2c60ff-0082d0-a79500-a78fff-00c859-c2a4ff */
:root {
  --bluerocratic: #2c60ff;
  --way-beyond-the-blue: #0082d0;
  --greedy-gecko: #a79500;
  --dreamy-candy-forest: #a78fff;
  --alienated: #00c859;
  --diva: #c2a4ff;
}

Tailwind CSS v4

/* Bluerocratic to Diva — https://swatchly.xyz/palette/2c60ff-0082d0-a79500-a78fff-00c859-c2a4ff */
@theme {
  --color-bluerocratic: #2c60ff;
  --color-bluerocratic-50: #f0f5ff;
  --color-bluerocratic-100: #e4edff;
  --color-bluerocratic-200: #cadbff;
  --color-bluerocratic-300: #aac5ff;
  --color-bluerocratic-400: #7da5ff;
  --color-bluerocratic-500: #5485ff;
  --color-bluerocratic-600: #2c60ff;
  --color-bluerocratic-700: #1a46da;
  --color-bluerocratic-800: #0e30b6;
  --color-bluerocratic-900: #072194;
  --color-bluerocratic-950: #031065;
  --color-way-beyond-the-blue: #0082d0;
  --color-way-beyond-the-blue-50: #eaf5ff;
  --color-way-beyond-the-blue-100: #d5ebff;
  --color-way-beyond-the-blue-200: #acd8ff;
  --color-way-beyond-the-blue-300: #7ac1ff;
  --color-way-beyond-the-blue-400: #3ba0ee;
  --color-way-beyond-the-blue-500: #0082d0;
  --color-way-beyond-the-blue-600: #0069a9;
  --color-way-beyond-the-blue-700: #005388;
  --color-way-beyond-the-blue-800: #00416c;
  --color-way-beyond-the-blue-900: #003256;
  --color-way-beyond-the-blue-950: #002039;
  --color-greedy-gecko: #a79500;
  --color-greedy-gecko-50: #fcf2b3;
  --color-greedy-gecko-100: #f1e69e;
  --color-greedy-gecko-200: #ddd079;
  --color-greedy-gecko-300: #c7b750;
  --color-greedy-gecko-400: #a79500;
  --color-greedy-gecko-500: #8b7c00;
  --color-greedy-gecko-600: #716400;
  --color-greedy-gecko-700: #5a5000;
  --color-greedy-gecko-800: #483f00;
  --color-greedy-gecko-900: #383100;
  --color-greedy-gecko-950: #252000;
  --color-dreamy-candy-forest: #a78fff;
  --color-dreamy-candy-forest-50: #f6f5ff;
  --color-dreamy-candy-forest-100: #eceaff;
  --color-dreamy-candy-forest-200: #d9d3ff;
  --color-dreamy-candy-forest-300: #c4b8ff;
  --color-dreamy-candy-forest-400: #a78fff;
  --color-dreamy-candy-forest-500: #8c73df;
  --color-dreamy-candy-forest-600: #7157c0;
  --color-dreamy-candy-forest-700: #5a41a1;
  --color-dreamy-candy-forest-800: #472f83;
  --color-dreamy-candy-forest-900: #372269;
  --color-dreamy-candy-forest-950: #221246;
  --color-alienated: #00c859;
  --color-alienated-50: #e6ffe9;
  --color-alienated-100: #c6ffcf;
  --color-alienated-200: #91f6a6;
  --color-alienated-300: #69e387;
  --color-alienated-400: #00c859;
  --color-alienated-500: #00a649;
  --color-alienated-600: #008639;
  --color-alienated-700: #006a2c;
  --color-alienated-800: #005321;
  --color-alienated-900: #004017;
  --color-alienated-950: #00280c;
  --color-diva: #c2a4ff;
  --color-diva-50: #f2edff;
  --color-diva-100: #e8dfff;
  --color-diva-200: #d6c4ff;
  --color-diva-300: #c2a4ff;
  --color-diva-400: #a487dd;
  --color-diva-500: #8b6dc3;
  --color-diva-600: #7254a6;
  --color-diva-700: #5c408a;
  --color-diva-800: #493172;
  --color-diva-900: #3a255c;
  --color-diva-950: #24153d;
}