Color tools for a clearer design
Convert solid CSS colors, sample an image pixel, and check text contrast for a color pair.
A color value is more useful when its role and context are clear. Convert between common numeric formats, sample a source pixel carefully, and compare a foreground against the background on which it will appear. These tools work with simple browser color representations rather than a professional print or color-management workflow.
3 tools found
HEX, RGB & HSL converter
Convert a solid sRGB color between common CSS formats.
Open toolColor contrast checker
Check a solid text/background pair against WCAG 2.x ratios.
Open toolImage color picker
Sample a pixel from a local image and copy its HEX or RGB.
Open toolNo tools found
Try another search or category.
A sampled pixel is a sample
A photograph can contain many nearby shades. A sampled pixel does not establish a brand specification, and alpha affects how the pixel appears on another background.
Contrast is one part of access
A solid color pair passing a selected text ratio does not certify an entire page. Check focus states, keyboard behavior, form labels, and the actual text size too.
Put the tools in context.
All guidesChoose a color pair you can actually read
Move from an attractive color swatch to a usable text and background combination.
Make a favicon that survives a tiny tab
Choose a simple source, compare square fitting options, and test the PNG after installing it on a site.