Color Picker & Converter

Pick colours and convert between HEX, RGB, HSL and related formats when building UI, documents or simple brand boards in the browser.

Who this is for

Anyone moving a colour between two places that disagree about how to write it: a designer handing HEX to a developer who needs RGB, someone matching a brand colour across a website and a document, or a developer nudging a shade lighter and needing the HSL value to do it predictably. Pick a colour once and read it in every notation at the same time, rather than converting by hand or trusting a search result.

How to use Colour Picker

1. Pick a colour with the control or type a known code.
2. Switch between HEX, RGB, HSL/HSV style views as offered.
3. Copy the value you need into CSS or a design note.
4. Use palette or contrast helpers when the UI shows them.

Worked examples

Example 1. Set HEX #7f32ff and read RGB components for a stylesheet.

Example 2. Check contrast between text and background when the checker is available.

Example 3. Build a complementary pair for a simple two-colour icon.

Screen vs print

Colours on screens use light (RGB-like models). Print often uses CMYK inks. What you see here is for on-screen work unless you have a calibrated print workflow.

What each notation is good for

HEX is the compact form used across the web — six digits, two each for red, green and blue. It is easy to paste and hard to reason about: nothing in #3fb950 tells you it is a green, or how to make it slightly darker.

RGB holds the same information in decimal, which makes it easier to read and to compute with, and it is the form most programming interfaces expect. HSL and HSV restate the colour as hue, saturation and lightness or value — the same colour described in a way that matches how people actually talk about it. When you want "the same blue but lighter", HSL gives you that by changing one number, where HEX and RGB require changing three and hoping the hue survives.

Common mistakes

Assuming a screen colour will print the same. Screens mix light and printers mix ink, so a vivid on-screen blue can arrive dull on paper — check a proof before committing to a print run. Adjusting brightness by editing HEX digits is the second, and it is why colours drift in hue as they lighten; HSL exists precisely so you can change lightness without touching the hue. The third is copying a colour without its opacity and wondering why the result looks heavier than the sample it came from.

Tips

Work in HSL when you are building a palette rather than picking a single colour: holding hue and saturation steady while stepping lightness gives you a set that looks deliberate, which picking each shade separately rarely does. Save swatches as you go so you can compare candidates side by side instead of relying on memory between clicks — colour perception shifts depending on what is next to it. Check any text-and-background pair for contrast before you commit; a colour that reads well on your monitor can be unreadable on a phone in daylight.

Accessibility notes

Every value is shown as selectable text alongside its copy button, so the exact colour can be read out or copied without needing to see the swatch. The picker itself is inherently visual, but each notation is also a text field you can type into directly, which means a colour can be entered and converted without using the visual picker at all.

Limitations (honest)

• Monitors differ; not a laboratory spectrophotometer.
• Print profiles may not match screen colours.
• Accessibility contrast guidance is approximate — test with real users when it matters.
• Requires JavaScript in a modern browser.

Privacy

Colours are converted in the page and saved swatches are kept in this browser. Nothing is uploaded, so a brand colour you are working with before launch is not disclosed by using this tool. Advertising cookies and the choices available to you are covered in the Privacy Policy and in the consent notice shown on your first visit.

Related tools on ToolsAre.Us

Once a palette is settled, the Paint tool lets you sketch with it and the Barcode Generator takes foreground and background colours for branded codes — though codes read most reliably in plain black on white. The Image Compressor is useful for the assets that come after. The full tool list is on the home page.

FAQ

More help: Colour Picker FAQ · All tools · Contact · About