Sulphur to Night Fever Color Palette

About this palette

Sulphur to Night Fever is a 5-color cool palette: #CCB100 (Sulphur), #128539 (Broccoli Paradise), #E9E187 (Gold Grillz), #3C1A49 (Plunged Into Darkness), #532A8A (Night Fever). It mixes yellow, green, purple tones and feels cool overall. The strongest text pairing is #E9E187 on #3C1A49 with a contrast ratio of 10.85:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sulphur	rgb(204, 177, 0)	hsl(52, 100%, 40%)
Broccoli Paradise	rgb(18, 133, 57)	hsl(140, 76%, 30%)
Gold Grillz	rgb(233, 225, 135)	hsl(55, 69%, 72%)
Plunged Into Darkness	rgb(60, 26, 73)	hsl(283, 47%, 19%)
Night Fever	rgb(83, 42, 138)	hsl(266, 53%, 35%)

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.

Aa10.85:1 Very good#E9E187 on #3C1A49
Aa10.85:1 Very good#3C1A49 on #E9E187
Aa7.54:1 Very good#E9E187 on #532A8A
Aa7.54:1 Very good#532A8A on #E9E187
Aa6.86:1 Good#CCB100 on #3C1A49
Aa6.86:1 Good#3C1A49 on #CCB100
Aa4.77:1 Good#CCB100 on #532A8A
Aa4.77:1 Good#532A8A on #CCB100

Color blindness preview

CSS variables

/* Sulphur to Night Fever — https://swatchly.xyz/palette/ccb100-128539-e9e187-3c1a49-532a8a */
:root {
  --sulphur: #ccb100;
  --broccoli-paradise: #128539;
  --gold-grillz: #e9e187;
  --plunged-into-darkness: #3c1a49;
  --night-fever: #532a8a;
}

Tailwind CSS v4

/* Sulphur to Night Fever — https://swatchly.xyz/palette/ccb100-128539-e9e187-3c1a49-532a8a */
@theme {
  --color-sulphur: #ccb100;
  --color-sulphur-50: #fdeea3;
  --color-sulphur-100: #f3e28c;
  --color-sulphur-200: #e0cb62;
  --color-sulphur-300: #ccb100;
  --color-sulphur-400: #ac9500;
  --color-sulphur-500: #907c00;
  --color-sulphur-600: #756500;
  --color-sulphur-700: #5e5100;
  --color-sulphur-800: #4b4000;
  --color-sulphur-900: #3c3300;
  --color-sulphur-950: #261f00;
  --color-broccoli-paradise: #128539;
  --color-broccoli-paradise-50: #dfffe3;
  --color-broccoli-paradise-100: #c2fdca;
  --color-broccoli-paradise-200: #a6edb1;
  --color-broccoli-paradise-300: #87d995;
  --color-broccoli-paradise-400: #5dbc70;
  --color-broccoli-paradise-500: #3aa053;
  --color-broccoli-paradise-600: #128539;
  --color-broccoli-paradise-700: #006a29;
  --color-broccoli-paradise-800: #00531f;
  --color-broccoli-paradise-900: #004016;
  --color-broccoli-paradise-950: #00290b;
  --color-gold-grillz: #e9e187;
  --color-gold-grillz-50: #fffcce;
  --color-gold-grillz-100: #f7f3c0;
  --color-gold-grillz-200: #e9e187;
  --color-gold-grillz-300: #cfc980;
  --color-gold-grillz-400: #b0a854;
  --color-gold-grillz-500: #948c30;
  --color-gold-grillz-600: #787008;
  --color-gold-grillz-700: #5f5800;
  --color-gold-grillz-800: #4a4400;
  --color-gold-grillz-900: #393400;
  --color-gold-grillz-950: #232000;
  --color-plunged-into-darkness: #3c1a49;
  --color-plunged-into-darkness-50: #fbf1ff;
  --color-plunged-into-darkness-100: #f6e3ff;
  --color-plunged-into-darkness-200: #e9cbf6;
  --color-plunged-into-darkness-300: #d4b2e3;
  --color-plunged-into-darkness-400: #b590c5;
  --color-plunged-into-darkness-500: #9872a8;
  --color-plunged-into-darkness-600: #7b578a;
  --color-plunged-into-darkness-700: #61416e;
  --color-plunged-into-darkness-800: #4a2f55;
  --color-plunged-into-darkness-900: #3c1a49;
  --color-plunged-into-darkness-950: #221228;
  --color-night-fever: #532a8a;
  --color-night-fever-50: #f6f3ff;
  --color-night-fever-100: #eee7ff;
  --color-night-fever-200: #ddceff;
  --color-night-fever-300: #cbb2ff;
  --color-night-fever-400: #b08df0;
  --color-night-fever-500: #9570d6;
  --color-night-fever-600: #7b56b8;
  --color-night-fever-700: #64419b;
  --color-night-fever-800: #532a8a;
  --color-night-fever-900: #3f2368;
  --color-night-fever-950: #281345;
}