Start generating

Worcestershire Sauce to Nightmare color palette

5E2B21Worcestershire Sauce00776DEmperor Jade408FE1Olympic Blue6DB9FFCooler Than EverFFE2D8Pink Glitter00261FNightmare
Open in generator Export PNG, PDF, ASE…

About this palette

Worcestershire Sauce to Nightmare is a 6-color cool palette: #5E2B21 (Worcestershire Sauce), #00776D (Emperor Jade), #408FE1 (Olympic Blue), #6DB9FF (Cooler Than Ever), #FFE2D8 (Pink Glitter), #00261F (Nightmare). It mixes brown, turquoise, blue, white tones and feels cool overall. The strongest text pairing is #FFE2D8 on #00261F with a contrast ratio of 13.20:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Worcestershire Saucergb(94, 43, 33)hsl(10, 48%, 25%)
Emperor Jadergb(0, 119, 109)hsl(175, 100%, 23%)
Olympic Bluergb(64, 143, 225)hsl(211, 73%, 57%)
Cooler Than Everrgb(109, 185, 255)hsl(209, 100%, 71%)
Pink Glitterrgb(255, 226, 216)hsl(15, 100%, 92%)
Nightmarergb(0, 38, 31)hsl(169, 100%, 7%)

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.

  • Aa13.20:1 Super#FFE2D8 on #00261F
  • Aa13.20:1 Super#00261F on #FFE2D8
  • Aa9.29:1 Very good#5E2B21 on #FFE2D8
  • Aa9.29:1 Very good#FFE2D8 on #5E2B21
  • Aa7.74:1 Very good#6DB9FF on #00261F
  • Aa7.74:1 Very good#00261F on #6DB9FF
  • Aa5.44:1 Good#5E2B21 on #6DB9FF
  • Aa5.44:1 Good#6DB9FF on #5E2B21

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Worcestershire Sauce to Nightmare — https://swatchly.xyz/palette/5e2b21-00776d-408fe1-6db9ff-ffe2d8-00261f */
:root {
  --worcestershire-sauce: #5e2b21;
  --emperor-jade: #00776d;
  --olympic-blue: #408fe1;
  --cooler-than-ever: #6db9ff;
  --pink-glitter: #ffe2d8;
  --nightmare: #00261f;
}

Tailwind CSS v4

/* Worcestershire Sauce to Nightmare — https://swatchly.xyz/palette/5e2b21-00776d-408fe1-6db9ff-ffe2d8-00261f */
@theme {
  --color-worcestershire-sauce: #5e2b21;
  --color-worcestershire-sauce-50: #fff2ef;
  --color-worcestershire-sauce-100: #ffe4de;
  --color-worcestershire-sauce-200: #fbcbc0;
  --color-worcestershire-sauce-300: #e7b1a5;
  --color-worcestershire-sauce-400: #c98e82;
  --color-worcestershire-sauce-500: #ac7165;
  --color-worcestershire-sauce-600: #8d574b;
  --color-worcestershire-sauce-700: #714137;
  --color-worcestershire-sauce-800: #5e2b21;
  --color-worcestershire-sauce-900: #45231c;
  --color-worcestershire-sauce-950: #2c140f;
  --color-emperor-jade: #00776d;
  --color-emperor-jade-50: #d7fff9;
  --color-emperor-jade-100: #c1f7ef;
  --color-emperor-jade-200: #a2e5db;
  --color-emperor-jade-300: #82cfc4;
  --color-emperor-jade-400: #57b0a4;
  --color-emperor-jade-500: #329388;
  --color-emperor-jade-600: #00776d;
  --color-emperor-jade-700: #005e56;
  --color-emperor-jade-800: #004a43;
  --color-emperor-jade-900: #003934;
  --color-emperor-jade-950: #002420;
  --color-olympic-blue: #408fe1;
  --color-olympic-blue-50: #f0f7ff;
  --color-olympic-blue-100: #e1efff;
  --color-olympic-blue-200: #c1deff;
  --color-olympic-blue-300: #9ac9ff;
  --color-olympic-blue-400: #61abfa;
  --color-olympic-blue-500: #408fe1;
  --color-olympic-blue-600: #2172c1;
  --color-olympic-blue-700: #035aa2;
  --color-olympic-blue-800: #004580;
  --color-olympic-blue-900: #003564;
  --color-olympic-blue-950: #002041;
  --color-cooler-than-ever: #6db9ff;
  --color-cooler-than-ever-50: #e0f0ff;
  --color-cooler-than-ever-100: #cae5ff;
  --color-cooler-than-ever-200: #a1d1ff;
  --color-cooler-than-ever-300: #6db9ff;
  --color-cooler-than-ever-400: #519cde;
  --color-cooler-than-ever-500: #3582c4;
  --color-cooler-than-ever-600: #1b69a7;
  --color-cooler-than-ever-700: #04548d;
  --color-cooler-than-ever-800: #004372;
  --color-cooler-than-ever-900: #00355c;
  --color-cooler-than-ever-950: #00213c;
  --color-pink-glitter: #ffe2d8;
  --color-pink-glitter-50: #fff0ea;
  --color-pink-glitter-100: #ffe2d8;
  --color-pink-glitter-200: #e6d1c9;
  --color-pink-glitter-300: #d2bab1;
  --color-pink-glitter-400: #b49a91;
  --color-pink-glitter-500: #997f76;
  --color-pink-glitter-600: #7e655d;
  --color-pink-glitter-700: #665048;
  --color-pink-glitter-800: #503d37;
  --color-pink-glitter-900: #3f2f29;
  --color-pink-glitter-950: #281c18;
  --color-nightmare: #00261f;
  --color-nightmare-50: #e5fbf5;
  --color-nightmare-100: #d9f2eb;
  --color-nightmare-200: #c2dfd7;
  --color-nightmare-300: #a8c9c0;
  --color-nightmare-400: #86aba1;
  --color-nightmare-500: #6a8f86;
  --color-nightmare-600: #50746b;
  --color-nightmare-700: #3c5d55;
  --color-nightmare-800: #2c4942;
  --color-nightmare-900: #203833;
  --color-nightmare-950: #00261f;
}

Similar palettes