Color Picker & Converter
Pick a color and convert between HEX, RGB, and HSL
HEX, RGB, HSL, and when to reach for each
The picker shows the same color as HEX, RGB, and HSL at once and reconverts the moment you drag. Which of the three you copy depends on where it is going.
Which format for which job
- HEX (like #FF6B35) for CSS, HTML, and design handoffs. It is compact and almost every tool accepts it on paste. The field also reads the three-digit shorthand, so #F63 comes through as #FF6633.
- RGB (255, 107, 53) when code has to compute with the channels, blending two colors or generating a scale. Decimal channels beat parsing hex pairs inside a loop.
- HSL when a person is adjusting the color by hand, for the reasons in the note above.
The tool converts between these three. For a print workflow that needs CMYK, or an alpha channel for transparency, do that step in a graphics editor, since those are not part of this picker.
Colors that people can read
Converting a color is the easy part. Choosing a pair a reader can see takes one more check. WCAG measures the contrast ratio between text and its background, and the thresholds are worth keeping in your head: normal body text needs 4.5 to 1 to pass AA, large or bold text needs 3 to 1, and the stricter AAA level asks 7 to 1 on body text. Light gray on white fails more than any other pairing. A #AAAAAA caption on white sits near 2.3 to 1, well under the bar, which is why placeholder-gray text vanishes for anyone with tired eyes or a screen in sunlight. When you nudge a color toward something you like, watch the lightness in HSL, since that axis moves the contrast most.
Color questions worth answering
- Does it read the three-digit hex shorthand?
- Yes. Type #F63 and the tool reads it as #FF6633 and fills in the matching RGB and HSL values.
- Which format should I hand-edit?
- HSL. Hue, saturation, and lightness map to how people think about a color, so tweaking one of them does what you expect, where nudging a HEX or RGB channel is guesswork.
- Can I pick a color straight out of an image?
- Not in this tool. Sample the pixel with an image editor's eyedropper, copy the hex, and paste it here to read the RGB and HSL.