Designing for the web means designing for unpredictability — dynamic images, user themes, transparent layers. That’s where Tone Scout comes in.
Tone Scout is a lightweight tool I’ve built to detect whether a background is visually light or dark — so your content can adapt accordingly.
Why Tone Scout exists
Imagine placing white text on an image background. Looks great… until someone swaps that image or sets their system to dark mode. Suddenly your sleek white text disappears into the void.
Tone Scout automatically evaluates the visual tone of any background — light or dark — and lets your styles respond. That means:
- Better contrast on buttons and labels
- Dynamic adjustments to icons, outlines, and shadows
- Clean, readable UI across all backgrounds
How it works
Tone Scout grabs the RGB values of any element’s background and calculates perceived luminance — how bright it feels to the eye. Using a well-established formula:
js
CopyEditconst luminance = r * 0.299 + g * 0.587 + b * 0.114;
If that value is under 128, the background is considered dark.
Example usage:
js
CopyEditfunction isDark([r, g, b]) {
return (r * 0.299 + g * 0.587 + b * 0.114) < 128;
}
You can feed Tone Scout a CSS background colour or even extract colours from images using canvas sampling.
Real-world use cases
Tone Scout is already helping me:
- Auto-switch icon and text styles on dynamic card layouts
- Add readable overlays without manually setting themes
- Support light and dark mode without needing to hard-code colour rules
What’s next for Tone Scout
I’m exploring features like:
- Local tone mapping: Sampling different parts of an image to get smarter overlays
- Tone-aware transitions: Smooth fades between light/dark modes
- Custom thresholds and gradient detection
Try it out
Detecting…
Tone Scout is built to be flexible, unobtrusive, and smart. A little logic that makes your UI feel a lot more polished.