Ten dark palettes for websites, apps and dashboards. Each one has a background, card, text, button and accent colour, shown on a live dark screen with its contrast score. Tap any colour to copy it.
01
Midnight ink
Calm product UI
MidnightSign in
New this week
Your dashboard, after dark
Easy on the eyes at night, sharp in the day.
Get startedLearn more
A near-black with a hint of blue is easier on the eyes than pure black. Soft blue for links, a warm pink for alerts. Contrast: text 15.7:1 · primary 7.5:1 · Fonts: Inter
Deep green-black feels natural and quiet. Mint green buttons and a honey highlight keep it warm. Contrast: text 15.6:1 · primary 9.7:1 · Fonts: Fraunces + Manrope
Almost-black with acid lime and hot pink. Loud and techy; keep the bright colours for small things. Contrast: text 17.7:1 · primary 15.4:1 · Fonts: Space Grotesk
Dark coffee brown instead of grey makes dark mode feel cosy. Caramel and orange do the talking. Contrast: text 15.7:1 · primary 8.3:1 · Fonts: Fraunces + DM Sans
Navy reads as trustworthy. Bright blue for actions and a mint green for success and growth numbers. Contrast: text 15.9:1 · primary 4.9:1 · Fonts: Manrope + Inter
A purple-tinted black with lilac and peach: rich and a bit luxurious without being harsh. Contrast: text 15.6:1 · primary 7.0:1 · Fonts: Playfair Display + Work Sans
Neutral graphite lets charts stand out. Amber and sky blue are easy to tell apart, even for colour-blind users. Contrast: text 15.9:1 · primary 9.2:1 · Fonts: Inter
Warm black with fiery orange and yellow. Energetic, good for sport, events and food delivery. Contrast: text 16.6:1 · primary 6.2:1 · Fonts: Big Shoulders Display + Inter
Muted, earthy and grown-up. Low saturation keeps it calm for portfolios and studios. Contrast: text 14.9:1 · primary 8.2:1 · Fonts: DM Serif Display + DM Sans
Skip pure blackStart from a near-black like #0F1115 or a tinted dark such as brown or navy. It is softer on the eyes and lets lighter cards show depth.
Use off-white textPure white text on dark backgrounds glares. A soft white like #E8EAED is still very readable and feels calmer.
Lighter means closerIn dark mode, raised things like cards and menus should be a little lighter than the background, not darker or shadowed.
Tone down bright coloursVery saturated colours buzz on dark screens. Use slightly lighter, softer versions of your brand colour for buttons and links.
Use a very dark grey or tinted near-black for the background instead of pure #000000, a slightly lighter shade for cards, and off-white text instead of pure white. Then add one bright colour for buttons and one accent for highlights.
Why not use pure black for dark mode?
Pure black next to pure white creates harsh glare and makes text look like it is vibrating, especially on phones. A dark grey such as #0F1115 is softer and lets you show depth with lighter cards.
How much contrast does dark mode text need?
Body text should reach at least 4.5:1 against the background to pass WCAG AA, and large headings at least 3:1. Every palette on this page shows its text and button contrast scores.
Can I use these palettes in my app or website?
Yes. Colours are free for anyone to use. Copy the hex codes into Figma, Tailwind or your CSS, or open a palette in our generator to adjust it.