Color Picker & Converter
Pick a color, convert HEX, RGB and HSL values, or sample a color directly from an image.
Pick and convert colors online
Choose a color visually or type a HEX value to instantly see matching HEX, RGB and HSL values.
Pick a color from an image
Upload a JPG, PNG, WebP or GIF image and tap any visible pixel to sample its color. The image stays on your device while you use the picker.
HEX, RGB and HSL
HEX represents red, green and blue channels with hexadecimal values. RGB uses numeric channel values from 0 to 255. HSL describes hue, saturation and lightness.
Convert a color notation
Try #336699. Its RGB channels are red 51, green 102 and blue 153. Its HSL representation is hue 210 degrees, saturation 50% and lightness 40%. These describe the same opaque color.
Sampling a photo is different from matching a brand color
Choose a supported image and select a point in its preview to inspect that pixel. A compressed photo can contain several similar shades around one edge. Lighting, transparency and anti-aliasing can affect the sampled value, so sample a flat area for a representative color.
The picker does not measure text contrast or certify an accessible color combination. Check foreground and background together in your design. To prepare an image at different dimensions, use the Image Resizer.
Frequently Asked Questions
Can I convert HEX to RGB?
Yes. Enter a valid HEX color and the RGB and HSL values update automatically.
Can I pick a color from an image?
Yes. Upload a supported image and tap or click a pixel to sample its color.
What image formats can I use?
The image picker supports common browser-readable formats such as JPG, PNG, WebP and GIF.
Is my image uploaded?
No. The image is read and sampled locally in your browser.
Will text be readable on your color?
This picker converts colors but doesn't measure contrast. As a reference, here are WCAG contrast ratios we calculated for common pairs. Normal text needs at least 4.5:1.
| Text | Background | Ratio | Normal text |
|---|---|---|---|
| #2563EB blue | #FFFFFF white | 5.17:1 | Pass |
| #767676 gray | #FFFFFF white | 4.54:1 | Pass (lightest gray that does) |
| #FF0000 red | #FFFFFF white | 4.00:1 | Fail |
| #FFFFFF white | #16A34A green | 3.30:1 | Fail |
| #000000 black | #F59E0B amber | 9.78:1 | Pass |
| #FFFFFF white | #F59E0B amber | 2.15:1 | Fail |
To fix a failing pair, lower the HSL lightness of the text color a few points at a time; the hue stays the same. See Accessible Text Colors and HEX, RGB and HSL Explained.