Free Color Picker with HEX Code: RGB, HSL, CMYK & OKLCH Online

Written by the Utiliby editorial team · Last updated October 27, 2026 · Rules and formulas reviewed October 2026

What this free online color picker does

A color picker turns the vague idea of “a blue like that” into an exact code you can paste into a stylesheet, a design file or a slide. This free online color picker combines a classic saturation and brightness square, a hue slider and an opacity slider with a screen eyedropper, so you can choose a colour by eye, by number or by sampling something that is already on your screen.

Every change is shown immediately as HEX, RGB, HSL, HSV, HWB, CMYK, CIE Lab, LCH, OKLab and OKLCH values with one-click copy buttons, together with the nearest CSS colour name. Extra tabs show matching colour harmonies, a set of tints and shades, and a built-in WCAG contrast checker, so one visit answers “what is the code?”, “what goes with it?” and “is it readable?”. Nothing is uploaded, and there is nothing to install.

How to use the HEX color picker

1. Choose a hue. Drag the rainbow slider to the base colour you want, such as blue or orange.
2. Set saturation and brightness. Drag the dot in the square. Left is washed out, right is vivid, top is bright and bottom is dark. You can also use the arrow keys when the square is focused.
3. Fine tune with numbers. Type exact RGB or HSL values, or paste any colour code into the main box.
4. Add transparency. Move the opacity slider to get rgba(), hsla() and eight-digit HEX values.
5. Copy the code. Press Copy beside the format you need.
6. Explore. Open Harmonies for matching colours and Tints, shades and contrast for a scale and an accessibility check.

To match a colour you can already see, use Pick from screen and click anywhere. The picker then shows its code and everything else about it.

How to pick a color from your screen, a website or an image

You do not need an extension to sample a colour from something you can already see. Press Pick from screen, and the browser shows a magnifier. Click any pixel in any window, including another browser tab, a website, a design file or a video frame, and the picker fills in that colour's HEX, RGB, HSL, CMYK and other codes straight away. The browser gives the page only the colour you chose, not a picture of your screen.

The screen eyedropper depends on your browser and not on your computer. It is available in Chromium-based browsers such as Chrome, Edge and Opera on Windows, macOS, Linux and Chromebooks. If your browser does not offer it, the button is disabled and the rest of the picker still works. In that case, take a screenshot and open it in the Image Color Picker, which lets you click any pixel of an uploaded photo or screenshot.

The picker shows the nearest CSS colour name next to each code. For a wider list of more than 1,000 names, paste the HEX code into the Color Name Identifier. Our guide to finding the HEX code and name of any colour compares all of these methods.

Colour formats explained: HEX, RGB, HSL, HSV, CMYK, Lab and OKLCH

All of these describe the same colour, so converting between them does not change what you see. The exceptions are CMYK, which depends on the printer, and very vivid OKLCH or Lab values that fall outside the sRGB range of ordinary screens. The picker keeps to sRGB colours, which is what browsers use by default.

How the picker works: hue, saturation and brightness

The square uses the HSV model. Hue is the position on the colour wheel, measured as an angle from 0 to 360 degrees, with red at 0, green at 120 and blue at 240. Saturation is how far the colour is from grey, and value or brightness is how far it is from black. The slider sets the hue, and the square fills in every saturation and brightness for that hue, which is why it is so quick to find a lighter, darker, duller or more vivid version of the same colour.

HSL looks similar but treats lightness differently: 0 percent is black, 100 percent is white, and the purest colour sits at 50 percent. Designers often prefer HSL for building systems of colours because changing only the lightness gives a clean tint or shade. Both models are just different coordinates for the same screen colours, and the tool converts between them for you.

Colour harmony: complementary, analogous, triadic and more

Colour harmonies are combinations that tend to look balanced because of where they sit on the wheel. The Harmonies tab calculates them from your colour by rotating the hue and keeping saturation and lightness.

• Complementary: two opposite colours, strong contrast, good for a call to action.
• Split-complementary: a colour and the two neighbours of its opposite, with more variety and less tension.
• Analogous: three neighbouring colours, calm and cohesive.
• Triadic: three colours spaced evenly, lively and balanced when one leads.
• Tetradic and square: four colours that give a rich palette, best with one dominant colour.
• Monochromatic: one hue in several lightness levels, safe and elegant.

The Harmonies tab also draws a colour wheel with a dot for each colour in the scheme you choose, so you can see where the colours sit relative to each other.

A reliable rule is the 60-30-10 split: a dominant colour for about 60 percent of the design, a secondary for 30 percent and an accent for 10 percent. To go from one colour to a whole set, try the Color Palette Generator or the Color Wheel.

Contrast and accessibility

A colour is only useful if people can read what sits on it. The Web Content Accessibility Guidelines (WCAG) measure this with a contrast ratio from 1:1 (no difference) to 21:1 (black on white). Level AA asks for at least 4.5:1 for normal text and 3:1 for large text and for user-interface parts such as button borders and icons. Level AAA asks for 7:1 and 4.5:1.

The Tints, shades and contrast tab shows the ratio between your colour and any background and marks each requirement as pass or fail. The tool also tells you whether black or white text reads better on your colour. For a deeper audit of pairs, use the free Color Contrast Checker. Do not rely on colour alone to carry meaning, because many people have colour vision differences. Pair colour with text, shape or position, and try the Color Blind Test to understand how others see.

Choosing colour codes for websites and CSS

All modern CSS accepts these notations, and the picker shows each one ready to paste:

• color: #0369a1; is compact and universal.
• color: rgb(3 105 161 / 80%); adds transparency with the modern space-separated syntax.
• color: hsl(201 96% 32%); lets you create hover states by changing lightness.
• color: oklch(50% 0.12 243); keeps lightness consistent across hues, which helps accessible theming.

Older code often writes transparency as rgba(3, 105, 161, 0.8), which is the same colour as the modern rgb(3 105 161 / 80%) form with 80 percent opacity. Both work in current browsers, and the picker shows the RGBA value whenever you move the opacity slider.

Store brand colours as CSS custom properties, such as --brand: #0369a1;, so you change them in one place. The Download CSS file button writes the current colour, your chosen harmony, tints, shades and saved colours as a ready-made :root block. Use the nearest CSS name only when it is close, as names such as steelblue are convenient but rarely match a brand exactly.

How to add a color picker to your own HTML page

If you are building a page and want visitors to choose a colour, HTML has a built-in control: <input type="color">. It needs no library. The browser draws its own colour dialog, and the value you read back is a seven-character HEX string such as #0369a1.

<label for="brand">Brand colour</label>
<input type="color" id="brand" value="#0369a1">
<script>
  document.getElementById("brand").addEventListener("input", function (e) {
    document.body.style.setProperty("--brand", e.target.value);
  });
</script>

The native control is simple. Its appearance differs between browsers and operating systems, and in most browsers it returns a plain HEX value without transparency, so it has no opacity slider, no HSL or CMYK output and no harmonies. This page fills those gaps. If you only need a picker on your own site, you can add this tool with the embed code in the box above the article. Our guide to finding the HEX code and name of any colour covers the same basics in more detail.

Screen colour versus print colour

Screens mix light (RGB) and printers mix ink (CMYK), and the range of colours each can show is different. Bright blues, greens and oranges on a monitor often look duller on paper. The CMYK value shown here is a straightforward mathematical conversion, which is a good starting point but not what a press will produce. For packaging, brand guides or large print jobs, ask the printer for their colour profile and a printed proof, and consider spot colours when exact matching matters.

The screen eyedropper and your privacy

The Pick from screen button uses the browser EyeDropper API, which opens a magnifier and lets you click any pixel in any window on a computer. The browser handles the sampling and gives the page only the colour you chose, not a picture of your screen. It is available in Chromium-based browsers such as Chrome, Edge and Opera. If your browser lacks it, the button is disabled and the rest of the tool works as normal. For photos, the Image Color Picker is more precise because you can zoom and sample many points.

Common colour mistakes and how to avoid them

• Pure black on pure white everywhere. It has maximum contrast but can feel harsh. A very dark grey on off-white often reads better.
• Light grey text. It looks elegant and fails contrast checks. Test it.
• Too many saturated colours. Pick one main colour and use neutrals for the rest.
• Ignoring dark mode. A colour that works on white may not work on black, so check both.
• Trusting one screen. Preview on a phone and a laptop before you finalise.
• Mixing formats by hand. Copy codes from the picker instead of retyping them.

To pick a colour from a photo or screenshot instead, use the Image Color Picker, and to blend two chosen colours use the Color Mixer.

Accuracy, limits and responsible use

Calculations use standard published formulas and run in your browser. Values are rounded for display. Colours outside the sRGB range are not offered, so OKLCH and Lab values come from sRGB colours. Colour perception varies between people and displays, and the contrast ratio is a guide rather than a certificate of compliance. Treat this free online tool as an aid for design decisions, and confirm anything legally or commercially important with your own testing.

Related free tools

Use these free online tools together with this one:

• Learn every way to find a colour code and name in our guide to finding the HEX code and name of any colour.
• Sample colours from a photo or screenshot with the image color picker.
• See schemes and complements on a full wheel with the color wheel.
• Convert a picked code with the HEX to RGB converter.
• Find the name of any colour with the colour name identifier.
• Turn colours into a smooth background with the CSS gradient generator.
• Review a design against accessibility guidance with the WCAG checklist generator.
• Get images ready for your layout with the image resizer.
• Make a scannable code for your brand with the QR code generator.

Frequently asked questions

Sources and further reading

• W3C, CSS Color Module Level 4, for hex, rgb(), hsl(), hwb(), lab(), lch(), oklab() and oklch() syntax.
• W3C, Web Content Accessibility Guidelines (WCAG) 2.2, success criteria 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast.
• Björn Ottosson, A perceptual color space for image processing (Oklab).
• MDN Web Docs, EyeDropper API.
• MDN Web Docs, <input type="color">.
• MDN Web Docs, CSS <color> value reference.
• Wikipedia, HSL and HSV.

Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.