Palette

Warlock's Brew Pot

A mysterious blend of deep, enchanted hues, reminiscent of a potion simmering under a moonlit sky.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Warlock's Brew Pot reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Warlock's Brew Pot.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#4B0082#800080#6A5ACD#4682B4#2F4F4F

Palette guide

How to use Warlock's Brew Pot

Overview

The Warlock's Brew Pot palette offers a mysterious and deep collection of hues, perfect for projects seeking an enchanted, sophisticated mood. Dominated by rich purples and blues, this palette includes the profound indigo of #4B0082, the regal purple of #800080, and the elegant slate blue of #6A5ACD. Complementing these are the striking steel blue of #4682B4 and the grounding dark slate gray of #2F4F4F. Designers can leverage this blend to craft immersive digital experiences, luxurious branding, or captivating fantasy-themed interfaces. Its inherent darkness provides a strong foundation for dramatic visual storytelling, evoking a sense of magic and depth suitable for sophisticated UI/UX designs.

Best used for

Fantasy game UI/UX design
Luxury brand websites and apps
Mystical or occult-themed branding
Night mode interfaces for productivity apps
Cinematic title sequences and intros
Sophisticated event invitations
Dark academic aesthetic content

Suggested color roles

primary

Use #4B0082 (Indigo) as the dominant brand color for headers, main calls-to-action, or large background sections where a deep, commanding presence is desired.

secondary

Employ #800080 (Purple) for secondary navigation, important subheadings, or as a complementary background element to add depth without overwhelming the primary.

accent

Introduce #4682B4 (Steel Blue) sparingly for interactive elements like buttons, links, or progress indicators to provide a vibrant, yet harmonious, point of interest.

background

Leverage #2F4F4F (Dark Slate Gray) as a versatile, grounding background color for most layouts, offering excellent contrast for lighter text and ensuring a consistent dark aesthetic.

text

Pair white or a very light gray text (e.g., #F0F0F0) with the darker backgrounds for maximum readability. For secondary text or captions, #6A5ACD can be used carefully against very dark backgrounds like #2F4F4F.

Accessibility notes

Ensure sufficient contrast when using lighter text on any of the dark palette colors; white text on #2F4F4F or #4B0082 generally meets WCAG AA standards.
Avoid using #800080 or #6A5ACD directly on #4B0082 for small text, as contrast may be insufficient for readability, especially for users with visual impairments.
Test #4682B4 as an accent color for interactive elements to ensure it stands out adequately against surrounding dark hues and provides clear affordance.
For larger text or headlines, slightly lower contrast combinations might be acceptable, but always prioritize readability for body text across all elements.

Recommended combinations

Deep Mystique

Excellent for defining layered UI elements; #2F4F4F as a base, #4B0082 for primary content areas, and #800080 for sub-sections or hover states, relying on light text for readability.

#2F4F4F · #4B0082 · #800080

Enchanted Contrast

Use #4B0082 for a background, #4682B4 for highlighted elements or interactive components, and #6A5ACD for secondary information or dividers, creating subtle distinction.

#4B0082 · #4682B4 · #6A5ACD

Shadowed Brew

Ideal for a dark theme with #2F4F4F as the main background, #6A5ACD for card elements or panels, and #800080 for subtle accents or decorative details.

#2F4F4F · #6A5ACD · #800080

CSS variables

:root {
  --warlock-s-brew-pot-1: #4B0082;
  --warlock-s-brew-pot-2: #800080;
  --warlock-s-brew-pot-3: #6A5ACD;
  --warlock-s-brew-pot-4: #4682B4;
  --warlock-s-brew-pot-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "warlock-s-brew-pot": {
        1: "#4B0082",
        2: "#800080",
        3: "#6A5ACD",
        4: "#4682B4",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#4B0082

Color 2#800080

Color 3#6A5ACD

Color 4#4682B4

Color 5#2F4F4F

Accessibility

Contrast checker

1.4:1Fail

2.4:1Fail

3.2:1AA18

1.5:1Fail

1.4:1Fail

1.8:1Fail

2.3:1Fail

1.1:1Fail

2.4:1Fail

1.8:1Fail

1.3:1Fail

1.7:1Fail

3.2:1AA18

2.3:1Fail

1.3:1Fail

2.2:1Fail

1.5:1Fail

1.1:1Fail

1.7:1Fail

2.2:1Fail

Similar palettes

More like Warlock's Brew Pot

View all dark

Celestial Glimmer Dust