Mysterious Dark
A mysterious dark palette with deep shadows and intriguing purple accents. Creates an atmosphere of curiosity and hidden depth.
Color Breakdown
Role
background
Name
Slate 950
Hex
#020617
Tailwind
bg-slate-950
Role
surface
Name
Slate 900
Hex
#0f172a
Tailwind
bg-slate-900
Role
primary
Name
Purple 500
Hex
#a855f7
Tailwind
text-purple-500
Role
secondary
Name
Slate 400
Hex
#94a3b8
Tailwind
text-slate-400
Role
accent
Name
Fuchsia 500
Hex
#d946ef
Tailwind
bg-fuchsia-500
Live Preview
Welcome Back
This is a live preview of the Mysterious Dark color scheme applied to a sample card component. See how the colors work together in a realistic UI context.
Design Rationale
“Near-black backgrounds create an atmosphere of the unknown and unexplored. Purple and fuchsia accents glow like arcane symbols in the darkness.
Use Cases
CSS Variables
:root {
--background: #020617;
--surface: #0f172a;
--primary: #a855f7;
--secondary: #94a3b8;
--accent: #d946ef;
}Tailwind Config
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'mysterious-dark': {
'background': '#020617', // bg-slate-950
'surface': '#0f172a', // bg-slate-900
'primary': '#a855f7', // text-purple-500
'secondary': '#94a3b8', // text-slate-400
'accent': '#d946ef', // bg-fuchsia-500
},
},
},
},
};Related Color Schemes
Minimalist Dark
A dark minimalist palette with refined grays and subtle accent color. Achieves elegance through restraint on a dark canvas.
Midnight Dark
A deep midnight palette with rich dark blues and silver starlight accents. Evokes the quiet sophistication of a clear night sky.
Calm Serene
A serene and calming palette with soft blues and muted backgrounds. Designed to reduce visual stress and promote tranquility.
Energetic Bold
A bold and energetic palette with vivid reds and bright accents. Designed to excite, motivate, and drive immediate action.
Professional Corporate
A polished corporate palette with conservative blues and structured grays. Conveys reliability, competence, and business credibility.
Playful Fun
A fun and playful palette bursting with cheerful colors. Designed to make users smile and create a lighthearted experience.
Build with This Scheme
Use our palette generator to customize and extend this color scheme for your project.
Open Palette Generator