Wide gamut: what Display P3 changes for web design
Most screens sold in the last five years can show colors sRGB cannot express. Here is how to use them without breaking everything else.
Colors and more
Pick the perfect background color
Loading the studio…
A background color is a decision, not a default
Everything else on the page is judged against it. Contrast, hierarchy, mood, how expensive the product feels, whether anyone can read your body copy at 2am. Pick it deliberately — these 100+ tools are how.
Backgrounds
Pick, pair and pressure-test the color behind everything else.
7 toolsPalettes
Build a set of colors that belong together.
25 toolsConversion
Move between every notation the web understands.
52 toolsAccessibility
Prove your colors work for everyone before you ship them.
9 toolsGradients & effects
Gradients, glass, shadow, grain, blend modes.
6 toolsDesign systems
Turn one color into a documented, exportable system.
4 toolsStart here
All 100+ tools →
Backgrounds
Surface System Generator
One background in, a full elevation stack out.
BackgroundsDark Mode Generator
Turn a light theme into a dark one that does not look inverted.
PalettesPalette Generator
Nine harmony rules, computed in a perceptual color space.
PalettesOpposite Color Finder
Three different answers to “what’s the opposite of this?”
PalettesPalette from Image
Drop an image, get the colors — and the background it wants.
ConversionUniversal Color Converter
Every notation the web understands, at once.
ConversionOKLCH Explorer
The color space CSS finally gave us. Learn it here.
AccessibilityWCAG Contrast Checker
The ratio, the grades, and the nearest passing color.
AccessibilityColor Blindness Simulator
Eight kinds of vision, one palette, no guessing.
Gradients & effectsCSS Gradient Generator
Interpolate in OKLab and the gray dead zone disappears.
Design systemsTailwind Palette Generator
A full 50–950 ramp from one brand color.
Design systemsDesign Token Exporter
One background, exported to eight formats.
From the blog
All articles →Text over images, and the scrim that makes it work
A hero image that averages to mid-gray can still contain a blown-out sky. Solve for the worst pixel, not the average one.
Color and mood: what the research actually supports
Blue does not mean trust. The studies most often cited for color psychology say considerably less than the infographics claim.
Why your dark background looks blotchy
Those faint rings in your gradient are not a rendering bug. They are 8-bit quantisation, and the fix is about three percent of noise.
Choosing an accent color that survives your background
An accent has one job: to be the most noticeable thing on the screen at the moment it appears. What that requires depends entirely on what is behind it.
The 60-30-10 rule is not a law of nature
It is a useful heuristic from interior design that gets repeated as though it were a specification. Here is what it is actually good for.
Frequently asked questions
Is bgcolor free?
Yes — all 100+ tools are free with no account, no sign-up and no limits. There is no paid tier.
What is the best background color for a website?
There is no single answer, but there is a reliable rule: stay off the extremes. Almost no well-made site uses pure #ffffff or #000000. Light backgrounds sit around 95–98% lightness with a trace of hue; dark ones sit between 8% and 18%. The picker on the home page shows you a full interface built from whatever you choose, so you can judge it in context rather than as a swatch.
Does bgcolor upload my images or colors?
No. There is no backend at all. Images you drop into the palette extractor, duotone or overlay tools are decoded to a canvas in your own browser and never transmitted. Saved colors live in local storage on your device.
What color formats does it support?
HEX (3, 4, 6 and 8 digit), RGB, HSL, HSB/HSV, CMYK, CIE Lab, LCH, OKLab, OKLCH and every CSS color keyword. You can paste any of them into any color field on the site.
Can I check WCAG contrast with bgcolor?
Yes. The contrast checker reports the WCAG 2.2 ratio with AA and AAA grades for normal and large text, and when a pair fails it solves for the nearest passing color in the same hue instead of just showing a red cross. APCA — the model behind WCAG 3 — is reported alongside it.
Does it work offline?
Yes, once a page has loaded. The whole site is static files and every tool does its own maths in the browser.
Everything here runs in your browser
No account, no upload, no analytics, no server. Images you drop in for palette extraction never leave your machine. The whole site is static files on GitHub Pages — you can read every line of it.