These tools are for web designers, front-end developers and accessibility reviewers, and for anyone matching a brand color or checking a new monitor.
They run in your browser, and nothing is uploaded. That includes photos you open in the Image Color Picker, which are read on your device.
Start here
All color tools
HEX to RGB Converter
Convert HEX to RGB and HSL, and RGB to HEX.
Color Picker From Image
Click a pixel in a photo to get its HEX/RGB value.
Contrast Checker
Check WCAG text contrast ratios.
Gradient Generator
Build a CSS gradient visually.
Color Palette Generator
Harmonious palettes with a contrast check.
Dead Pixel Test
Full-screen colors to find dead pixels.
Hex Color Codes
Hex, RGB and HSL color chart.
How to choose
Color work usually follows the same path: find a color, put it in the format your code needs, check that it's readable, then use it. Each step has its own tool.
Find it
If the color lives in a photo, logo or screenshot, open it in the Image Color Picker and click a pixel to get its HEX and RGB values. Images wider than 640 pixels are scaled down before sampling, so on a large photo one sampled pixel can blend several neighbors. For an exact brand value, use the code from the design file.
Translate it
The Color Converter turns HEX into RGB and HSL and back without changing the color. HSL is the handiest format for a lighter or darker shade of the same hue, because you only change the lightness number.
Check it
Run every text and background pair through the Contrast Checker before it ships. WCAG 2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text. Level AAA raises those to 7:1 and 4.5:1. Close grays are where people get caught out: on white, #767676 scores about 4.54:1 and passes AA, while #777777 scores about 4.48:1 and fails. Your eye won't tell those apart, but the formula will.
Use it
The Gradient Generator builds linear or radial CSS gradients and gives a Tailwind CSS v4 version too. If text sits on a gradient, check contrast against both its lightest and darkest stops, since the text has to pass across the whole range.
Check the screen itself
If a color looks wrong in only one spot, the problem may be the display, not the code. The Dead Pixel Test fills the screen with solid black, white, red, green and blue so stuck or dead pixels stand out.
A quick guide to color formats
Most color problems on the web are really format problems. The same color can be written several ways, and each one has a job:
- HEX (
#1e90ff): compact and the usual format in design handoffs. Each pair of digits is the red, green, or blue channel from 00 to ff (0 to 255). An optional fourth pair sets transparency. - RGB (
rgb(30 144 255)): the same three channels written as decimal numbers. It's handy when you're adjusting a channel by hand or adding alpha. - HSL (
hsl(210 100% 56%)): hue, saturation, and lightness. This is the easiest format for making a lighter or darker version of a brand color, because you only change one number.
All three are standard CSS and supported by every modern browser. The Color Converter translates between them without changing the color itself.
Frequently asked questions
Using the WCAG relative luminance formula on both colors, producing a ratio between 1:1 and 21:1 — the same method browsers and accessibility auditing tools use.
At least 4.5:1 for normal text, or 3:1 for large text (18pt+, or 14pt+ bold).
Yes — the Gradient Generator outputs ready-to-paste CSS background syntax.
At least 7:1 for normal text and 4.5:1 for large text, under WCAG 2 success criterion 1.4.6, Contrast (Enhanced).
No. The image is drawn onto a canvas and sampled in your browser. Images wider than 640 pixels are scaled down first, and nothing is sent to a server.