The free online color picker lets a colour be picked and read as HEX, RGB, HSL, HSV and CMYK at once, with an eyedropper and a contrast check. Because it runs in the browser, nothing is uploaded.
Colour tools by OnlinePCApps since 2013
One colour is written a different way for CSS, for a canvas, for a design app and for print. The free online color picker shows every format at once and copies the one the job needs.
CSS wants HEX, a canvas wants RGB, a design app leans on HSL and a print team needs CMYK. Picking a colour once shows all of them together, so the right value is a single click away rather than a conversion by hand.
A brand shade in a logo, a photo or a screenshot rarely comes with its code. The eyedropper grabs the exact pixel colour from the screen or a dropped image, so a match is read off directly rather than guessed by eye.
Text on a background needs enough contrast to be read, and the WCAG guidelines set the bar. The contrast check reports the ratio and whether it passes AA or AAA, so a colour choice is accessible before it ships.
Use the picker or the sliders, paste a HEX code, eyedrop a pixel from the screen or drop an image and click a colour in it. The swatch updates as the colour changes.
The colour shows as HEX, RGB, HSL, HSV and CMYK together, with the nearest CSS name. An alpha slider sets transparency, and a contrast check reports the WCAG ratio against a background.
Copy the format the job asks for with one click, ready to paste into CSS or a design ticket. Shades and tints sit alongside as a starting palette, all figured on the device.
To pick a colour is to name one point in colour space in every format at once. The tool does that on the device.
One colour shows in every common format together, from HEX and RGB to HSL, HSV and CMYK, with the nearest CSS name. Any format can be pasted in to jump to that colour, and any can be copied out with a single click.
The eyedropper grabs the exact pixel colour from anywhere on the screen in Chrome, Edge and Opera. From a dropped image, it works in any browser. That reads a brand shade off a logo or a photo without guessing at the code.
An alpha slider sets transparency, shown as an 8-digit HEX or an rgba value. A contrast check reports the WCAG ratio of the colour against a background, with a pass or fail for AA and AAA text, so a choice is readable.
A picked colour comes with a row of darker shades and lighter tints, plus simple harmonies such as complementary and triadic. These are even sRGB mixes, a fast starting palette rather than a perceptual scale.
To pick a colour, to convert HEX to RGB and to eyedrop a shade all name the same tool. A search for color picker or hex to rgb reaches this page, and nothing about the colour is sent anywhere.
One colour is written several ways, each suited to a job. These points decide which format fits.
| The case | Result | What happens and why |
|---|---|---|
| HEX | #RRGGBB | The CSS default, with a short form and an 8-digit version that carries alpha. |
| RGB and RGBA | 0 to 255 | Three channels from 0 to 255, plus an alpha from 0 to 1, what a canvas expects. |
| HSL and HSLA | hue, %, % | Hue, saturation and lightness, the easiest format for nudging a tint or a shade. |
| HSV or HSB | value | Hue, saturation and value, the model most design-tool pickers use inside. |
| CMYK | print, approx | Cyan, magenta, yellow and black for print, an approximation without a colour profile. |
| Named colours | CSS names | The CSS named colours such as coral, with the nearest name to any picked colour. |
| Eyedropper | screen or image | Grabs a pixel from the screen in Chrome, Edge and Opera. A dropped image works in any browser. |
| Contrast | WCAG | Reports the ratio and a pass for AA at 4.5 to 1 or AAA at 7 to 1 for text. |
| Where it runs | on the device | The colour work runs in the browser, so nothing is uploaded. |
One Color, Many Formats
A single colour is one point in colour space, and the formats are only different coordinate systems for naming it. HEX and RGB both give the red, green and blue channels, HEX in hexadecimal for CSS and RGB in numbers from 0 to 255 for a canvas or an API. HSL and HSV describe the same colour by hue with saturation and either lightness or value, which is why they are easy to adjust by feel, though HSL and HSV are not the same and scale saturation differently. CMYK is the subtractive model for print, and here is the honest part: a CMYK value worked out from RGB is an approximation, since a true print colour depends on an ICC profile and the paper, so it is a starting point rather than an exact match. Alpha adds transparency, carried in an 8-digit HEX or an rgba value. The eyedropper reads a pixel straight off the screen where the browser allows it, which today means Chrome, Edge and Opera. From a dropped image it works everywhere else. A contrast check compares two colours against the WCAG guidelines, where AA text needs a ratio of 4.5 to 1 and AAA needs 7 to 1. The references below define the standards.
Both pick and convert a colour. The trade is real, and a brand palette is often a bigger job.
| Point of comparison | This tool Picked in the browser On the device | A design app A desktop design app |
|---|---|---|
| Where the work runs | All in the browser | On the machine |
| Price and caps | Free with no file cap | Free tier often capped |
| A perceptual colour scale | Even sRGB shades and tints | OKLCH and full ramps |
| Exact print CMYK | An RGB approximation | ICC-profile accurate |
| A quick pick and copy | Open and copy at once | A heavy app to open |
A design app wins for a full palette system, a perceptual OKLCH ramp or a print-accurate CMYK against an ICC profile. This page wins for a quick pick, convert and copy with a contrast check, opened with no install. Both keep the work local.
The colour maths, the eyedropper and the contrast check all run inside the browser, so the work is client-side. An image dropped in to eyedrop a colour is read on the device and never uploaded.
A screenshot used to eyedrop a brand shade can hold more than the colour, a draft layout or private text alongside it. Keeping the picking local means the screenshot is never sent anywhere only to read a pixel from it.
Each of these picks or converts a colour. They vary in reach, in cost and in what they set up.
The browser picker, a design app and dev tools all pick a colour, yet each gives one format, opens a heavy app or ties to a page. This page shows every format with an eyedropper and a contrast check, kept local with nothing to set up.
A little context sets a cleaner result.
HEX and RGB suit CSS and a canvas, HSL suits nudging a tint or a shade, while CMYK is for print. Copy the one the destination expects rather than converting a value by hand later on.
A CMYK value worked out from RGB is a guide, not an exact print colour, since a real print depends on an ICC profile and the paper. For a critical print job, confirm the colour with the printer against a proof.
The screen eyedropper works in Chrome, Edge and Opera, which support the browser API for it. In Firefox or Safari, drop an image in and click a colour in it instead, which reads the pixel equally well.
The browser picks a colour with its shades and tints, which fits an everyday choice. A full brand palette, a perceptual OKLCH ramp or a print-accurate CMYK against an ICC profile belongs in a design app or the desktop edition, which manages the whole colour system in one place.
Build and keep a brand palette with tokens and named roles, the base of a design system rather than a single colour.
Convert against an ICC profile for a print-accurate CMYK, matched to the press and the paper rather than approximated from RGB.
Build an even OKLCH ramp where each step looks equally spaced to the eye, past the plain sRGB mixes of a quick tool.
Free and online, with no sign-up and no upload. Pick a colour and read every format in the browser, all on the device.