Make Your Logo Work on Dark Backgrounds
Ensure your logo looks great on dark surfaces. Create white, light-colored, or contrast-optimized versions for websites, apps, presentations, and printed materials with dark backgrounds.
Free preview · No signup · ~10 seconds
How Your Logo Looks on Dark Backgrounds
A white version of your logo stands out clearly on every dark surface below.
Website Dark Mode
CSS prefers-color-scheme: dark auto-swaps logos — you need the white file ready before wiring up the toggle.
App UI
System-dark on iOS, macOS, and Android uses near-black; app headers and splash screens need a logo that shows up.
Slides & Pitch Decks
Dark conference and investor decks look polished — a white logo fits without the jarring bright rectangle a coloured logo produces.
Merch & Packaging
Screen printing puts white ink on dark fabric; packaging with dark backgrounds needs a white file for production.
Why You Need a Dark Background Logo Version
Dark backgrounds are everywhere
Website dark modes, dark presentation themes, dark-colored packaging, and social media stories with dark photography all require a logo that is visible on dark surfaces. Your standard colored or dark logo becomes invisible against them.
More than one approach works
White is the obvious starting point, but your brand may call for light gray, a light version of your brand color, or a reversed outline version. Image Color Changer lets you try all of them in seconds, so iterating costs you nothing but the time to look.
Dark mode requires two logo files
CSS prefers-color-scheme: dark lets sites auto-swap logos when users enable dark mode. Wiring up the swap takes one line of CSS — but only once you have both files. The light logo is the piece that's usually missing.
Pure white vs near-white
Full white (#FFFFFF) on very dark navy or charcoal can look harsh — maximum contrast, almost aggressive. A 90% white or light grey (#E6E6E6) reads as white visually while feeling less stark. If your logo has a symbol and a wordmark, use different shades to preserve their visual hierarchy.
What to Include in Your Pack
The 5 files that cover 95% of requests
Transparent PNG (web & social), white transparent PNG (dark backgrounds), black PNG (print), SVG (developer handoff), and 1:1 square crop (app icons and profile pictures).
SVG for dev, PNG for everything else
Developers building your site need the SVG. Print vendors, social profiles, and document templates all work fine with a high-resolution PNG.
Name files clearly
logo-white.png and logo-black.png are clear. logo-v3-FINAL-USE-THIS.png is not. A simple pattern like brand-variation.format avoids the confusion every time you share the pack.
Square crop is its own export
A horizontal logo centered on a square always looks undersized. Export a dedicated 1:1 crop with the icon at the center — it's a different file, not a resized version of the wide logo.
Three Approaches for Dark Backgrounds
Pure White
#FFFFFF
- Maximum contrast — reads on any dark surface
- Required for merchandise and screen printing
- Standard for dark mode websites
- Works in CSS media queries without adjustment
Dark mode sites, merch, presentations, video overlays
Situations where full white looks too stark or clinical
Near-White / Light Grey
#E6E6E6 or #D0D0D0
- Reads as white visually, softer tonally
- Better for luxury or refined brand aesthetics
- Preserves visual hierarchy between logo elements
- Still passes WCAG contrast on dark backgrounds
Premium brands, editorial, any logo with two elements needing hierarchy
Print or merchandise where a true white ink is required
Light Brand Color
Your brand hue at 80–90% lightness
- Maintains brand color recognition in the logo
- Works when the brand has a strong color identity
- Use Color Replacement to target specific elements
- More visible than white on some colored dark backgrounds
Branded dark headers where color recognition matters
General dark mode or print contexts — use white for those
How to Prepare Your Logo for Dark Backgrounds
Upload your logo
Upload your logo. Transparent PNGs work best as a starting point.
Choose your approach
Use Logo Styler for solid white/light colors, or Color Replacement for selective changes.
Preview on dark
Toggle the preview background to dark to see exactly how your logo will look.
Download
Export your dark-background-ready logo as a transparent PNG.
Make Your Logo Work on Dark Backgrounds — in the editor
The real editor, start to finish — no signup needed to try it yourself.
Free preview · No signup · ~10 seconds
Dark Background Scenarios
Website Dark Mode
Automatic theme switching needs a pre-prepared light logo variant for seamless dark mode support.
Presentations
Dark slide decks with a white or light logo create a sleek, modern, professional look.
Dark Packaging
Products with dark packaging need a high-contrast logo that stands out on the shelf.
Photo Overlays
White logos overlaid on dark photography create striking social media posts and marketing materials.
Or just ask
Describe the edit in your own words
Type what you want changed and the assistant does it on the canvas — each step lands as a layer you can reopen, so nothing it does is baked in.
No edits yet.
Frequently Asked Questions
You'll want these too
Related Tools
Guides worth reading
How to Change a Logo Color in Figma (4 Methods, Step by Step)
A complete guide to recoloring a logo in Figma — the Fill row, the Selection colors panel that swaps one hex everywhere at once, the clipped-rectangle trick for placed PNGs, and why the export panel has no WebP.
How to Make a Vector Logo (and When You Actually Need One)
What vector really means, the three honest routes from where you are now, when auto-tracing works, and how to check the result is genuinely vector.
SVG vs PNG for Logos: Which File Do You Actually Need?
What SVG and PNG really are, where each one wins, why your developer keeps asking for the SVG, and the three files that cover almost every request.
Ready for a Dark-Background Logo?
Get a white or light logo version that looks perfect on dark mode, dark slides, and dark merch. Upload your logo and convert in one click.