Paste your colors
A chart palette, a set of category tags, a brand palette.
Grayscale palette checker
Paste a list of colors and see each one converted to its equivalent shade of gray. The tool flags any pair that becomes too similar to tell apart once the color is gone.
- Free
- No sign-up
- Runs in your browser
100% private — the calculation is done in your browser and nothing is sent to any server.
How it works
See the grayscale version
Each color next to its gray equivalent.
Fix flagged pairs
Adjust the lightness of colors that clash in gray.
Color is not always there to help
A chart with five nicely distinct colored lines can turn into an unreadable mess the moment it is printed on a black-and-white printer, faxed, viewed by someone with color blindness, or shown on a badly calibrated screen. In every one of those cases, what matters is not the hue but the lightness of each color, because that is what survives when the color information is stripped away. This tool converts your palette to grayscale the same way a printer or a browser would and shows you the result directly.
How colors are converted
Each color is converted using the same relative luminance formula used for WCAG contrast calculations, which weighs green the most and blue the least, matching how the human eye perceives brightness. This is the standard approach used by most software when it needs a single brightness value for a color, closer to how print and screen convert to grayscale than a plain average of the red, green and blue values would be.
What counts as a clash
Two colors are flagged when their gray values are close enough that they would be hard to tell apart, a common problem with palettes built purely by varying hue, such as a rainbow of saturated colors that all happen to have similar brightness. Red and green in particular often convert to very similar grays, which compounds the readability problem for the many people with red-green color blindness even when color is present.
What to do about a clash
Vary the lightness of the colors involved, not just their hue: make one distinctly darker or lighter than the other. Adding a second visual cue, such as a pattern, a line style or a label, is the most reliable fix for charts and diagrams that must work without relying on color vision at all. To simulate how an image looks for specific kinds of color blindness rather than for full grayscale, use the color blindness simulator.
Limits
This checks a list of colors on their own, not colors placed against a specific background, and it does not simulate the exact rendering of a particular printer or fax machine. Everything is calculated in your browser.
Frequently asked questions
How do I check if my chart colors work in black and white?
Paste the colors here. Each one is converted to its grayscale equivalent, and pairs that end up too similar are flagged.
Why do some very different colors look almost the same in gray?
Because grayscale conversion is based on brightness, not hue. Two colors of similar lightness, like a mid red and a mid green, can produce nearly the same gray even though they look very different in color.
How do I fix a flagged pair?
Make one of the two colors noticeably lighter or darker than the other, or add a non-color cue such as a pattern or label.
Is this the same as a color blindness simulation?
It is related but not identical. Grayscale checking covers full color blindness and printing; the color blindness simulator shows the more common partial forms like red-green deficiency.
Does the background matter?
This tool checks the colors against each other, not against a specific background. Use the contrast checker for a color against one background.
Is my palette uploaded?
No. It is converted and compared in your browser.
Related tools
More utilities that also run without leaving your browser.
Palette to codeTurn a list of colors into CSS, SCSS, Tailwind, JavaScript or JSON code.
Text readability previewPreview text over two colors at several sizes and see what passes WCAG contrast.
Accessible color adjusterAdjust a color to pass WCAG contrast against a background, keeping its hue.
Color contrast checkerCheck text and background colors against WCAG, and get a fix that passes.
Color picker from an imageClick any point of a photo to get its exact hex, RGB and HSL color.
Brand color extractorGet the dominant colors of a logo or photo as ready-to-use hex codes.