Witchcraft

#474c50

Mid gray with green cast for softer UI

Save
Share

About Witchcraft

Witchcraft is the gray you notice after you dim a screen and the corners stop looking harsh. It's not the charcoal-warm smear of , and it doesn't pull back like or feel boxed-in like . This one sits a touch lighter, with a muted neutrality that keeps shapes readable without turning into a shadow.

For design systems and editor tools (think timelines, inspector panels, and dense layer lists), it's the background tone that lets headings and controls do the talking. I also like it in media production dashboards and newsroom ops where you're juggling thumbnails, metadata, and activity feeds. Compared to the deeper grays, it stays calmer under long viewing sessions, which makes it a solid choice for secondary containers and table surfaces.

Quirk: because the undertone isn't as cool as , it pairs smoother with neutral and slightly warm UI text than with aggressively blue typography.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

Code snippets

Copy this color into your project.

Contrast checker

WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.

On White #ffffff

Aa
8.69:1AAA

On Gray 100 #f5f5f5

Aa
7.97:1AAA

On Gray 900 #18181b

Aa
2.04:1Fail

On Black #000000

Aa
2.42:1Fail

Variations

Shades

Darker variations, created by mixing toward black.

Tints

Lighter variations, created by mixing toward white.

Tones

Muted variations, created by reducing saturation.

Hues

Hue rotations around the color wheel.

Temperatures

Warm and cool shifts of this color.

Color harmonies

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Witchcraft

Open the generator with this color pre-loaded.

Start creating