What this is

The premise

Most color tools hand you a palette and leave you to work out where it goes. That is backwards. On a website, one color covers more surface area than everything else combined, and every other decision — text color, border weight, shadow tint, how saturated your accent can afford to be — is downstream of it. So this site opens on a background color picker, and every tool is built to answer the question “given this background, then what?”

How it works

The color you pick is stored locally and used to theme the entire site. Change it on the picker and the navigation, the cards, the borders, the body copy and the accent all recompute — not from a light/dark toggle, but from the same derivation logic the tools expose. The site is its own demo. If a background produces an unusable interface here, it will produce an unusable interface in your product.

Under that sits one color engine, shared by all 100+ tools. Conversions round-trip through CIE XYZ and OKLab. Contrast is reported with both the WCAG 2.2 ratio and the APCA lightness model. Hue rotations happen in OKLCH, so a 120° triad really is three evenly spaced hues at the same perceived lightness instead of the lopsided result HSL gives you. Color vision simulation uses the standard LMS cone-response transform rather than a set of hand-tuned CSS filters.

Privacy

There is no backend. No account, no analytics, no cookies, no fonts fetched from a third party, no error reporting. Images you drop into the palette extractor or duotone tool are decoded to a canvas in your own browser and never transmitted anywhere. Your saved colors live in localStorage on your device; clearing site data deletes them permanently, because there is nowhere else for them to be. The whole thing is static files served from GitHub Pages, and it works offline once loaded.

The blog

New writing goes up through the year. 17 articles so far.

Keyboard

Press / or ⌘K anywhere to search the tools and the writing — you can also paste a hex code straight into that box to apply it. C copies the current background, R randomizes it, S saves it, and I inverts it.

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.

Colophon

Hand-written HTML, CSS and ES modules. No framework, no build step for the client code, no dependencies of any kind — the site generator is a single Node script with nothing in node_modules. Type is set in whatever your system serves for a modern sans, which is faster than anything that could be downloaded.