Witchcraft
#474c50
Mid gray with green cast for softer UI
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 Sooty Lashes, and it doesn't pull back like Abyssal or feel boxed-in like Nightfall. 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 Abyssal, it pairs smoother with neutral and slightly warm UI text than with aggressively blue typography.
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
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
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
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.