Grayscale a Color
The correct luminance-weighted conversion, next to the common wrong one.
The correct luminance-weighted conversion, next to the common wrong one. Shows the perceptual OKLCH result next to the naive HSL one, with the CSS to reproduce it. It is free, runs entirely in your browser with nothing uploaded, and works offline once loaded.
Everything here is computed live from the color you give it. The numbers beside each output are real measurements from the same engine the rest of the site uses — not labels attached to a preset — so a value you copy out of this page means exactly the same thing in the next one.
There is no account, no upload and no analytics. Colors you save live in your browser's local storage, and any image you drop in is decoded to a canvas locally and never transmitted.
How to use it
- Set your starting color. Type any notation into the color field — hex, rgb(), hsl(), oklch() or a CSS color name — or click "Use site background" to pull in the color you already picked.
- Adjust the controls. Every slider updates the result live, and the numbers next to each output are real measurements rather than labels.
- Copy what you need. Click any swatch to copy its hex, or use the copy button on the code panel to take the whole thing as CSS.
How it works under the hood
Conversions round-trip through linear sRGB, CIE XYZ and OKLab rather than through shortcuts. Contrast is reported with both the WCAG 2.2 ratio and the APCA lightness model. Hue rotations happen in OKLCH, so equal angles look equally different — which is not true in HSL. Color vision simulation uses the standard LMS cone-response transform rather than a stack of approximate CSS filters.
Generated colors are clamped to the sRGB gamut at their own lightness and hue, so nothing you copy silently shifts hue when the browser clips it.
Frequently asked questions
Is Grayscale a Color free?
Yes, completely, with no account and no limits. There is no paid tier and nothing is gated.
Does my data leave the browser?
No. There is no backend. Any image you drop in is decoded to a canvas locally and never transmitted, and saved colors live in your browser's local storage.
Does it work offline?
Yes, once the page has loaded. The whole site is static files and the tools do their own maths.
What else is in the conversion category?
Quite a lot — the related tools are listed further down this page, and the full index has 100+ of them across six categories.