Free Color Picker Online

You see a colour in a screenshot, on a website, in a photo of a brand asset — and you need its exact value. Or you have a brand colour as a HEX code and need to nudge it slightly warmer for a hover state. Our free online Color Picker handles both: drag the visual picker to choose any colour from the spectrum and watch HEX, RGB, HSL, and CMYK values update in real time, or paste a known HEX code and get the equivalents in every other format simultaneously. The picker has separate controls for hue (the colour itself), saturation (how vivid versus grey it is), and lightness (how dark versus white), which gives you fine-grained control without the trial-and-error of nudging RGB sliders. Beyond simple colour selection, the tool generates harmonious palettes around the chosen colour: complementary (the colour directly opposite on the colour wheel), analogous (colours next to each other for a calm feel), triadic (three evenly-spaced colours for a balanced contrast), and split-complementary (a softer alternative to complementary). It also shows the shade and tint range — the chosen colour darkened toward black and lightened toward white in 10% steps — which is exactly the input you need to build a CSS design system's primary colour scale. Real-world workflows: matching a brand colour from a logo screenshot, building a complete colour scale around a primary brand colour for a Tailwind config, picking a hover colour that is one shade darker than the base, or getting the CMYK values for a print job. After picking, the [HEX to RGB](/tools/hex-to-rgb) converter handles deeper conversion to formats like rgba and 8-digit HEX with alpha, the [Color Palette Generator](/tools/color-palette) builds full multi-colour schemes, and the [Contrast Checker](/tools/contrast-checker) tells you whether your chosen text colour passes WCAG against your chosen background.