Free online color picker. Select a color to see HEX, RGB, HSL and CMYK together, with a WCAG contrast check, harmonies and shades. Copy any value in one click.
Color tools by OnlinePCApps since 2013
One color is written a different way for CSS, a canvas, a design app and print. The free online color picker shows four formats at once and copies the one needed.
CSS wants HEX, a canvas wants RGB, a design app leans on HSL and a print team needs CMYK. The online color picker shows all four together, so the right value is one click away instead of a conversion by hand.
Not sure where to start? Generate Random fills the online color picker with a new color. Complementary and Triadic swatches and a strip of tints and shades then give related colors, so a palette grows from one choice.
Text on a background needs enough contrast to stay legible, and WCAG sets the bar. The color picker shows the ratio of the color as text on white and on dark, with an AA or AAA badge, so a choice is readable before it ships.
In the online color picker, select the color box under Visual Selector, then choose a color in the browser dialog. Or select Generate Random, or any swatch in Harmonies or Shades & Tints.
HEX, RGB, HSL and CMYK show under Output Formats, with a color name under the HEX value. Contrast & Accessibility reports the WCAG ratio of the color on white and on dark.
Select COPY beside a format, or Copy CSS Prop for a ready background-color line. Harmonies and Shades & Tints swatches sit alongside as a starting palette.
To select a color is to name one point in color space in every format at once. The online color picker shows that point in four formats.
One color shows in four common formats together, with a color name under the HEX value. Select COPY beside any format to copy that value in one click.
Select the color box to open the browser color dialog, or select Generate Random for a new color. Every format, check and swatch updates as the color changes.
Contrast & Accessibility shows the WCAG ratio of the color as text on white and on dark. A badge shows AAA at 7 or more, AA at 4.5 or more and FAIL below that.
Complementary and Triadic swatches sit beside a strip of 10 tints and shades. Select any swatch to make it the new color. They are quick starting points, not a full palette system.
To select a color, to convert HEX to RGB and to check text contrast all name one job. A search for color picker or hex to rgb lands on the online color picker above.
One color is written several ways. The cases below show what the online color picker gives and what it leaves out.
| The case | Result | What happens and why |
|---|---|---|
| Visual Selector | color box | Select it to open the browser color dialog. The result updates as a color is chosen. |
| Color name | under HEX | A name shows below the HEX value. Treat it as a guide, not a spec. |
| HEX | #RRGGBB | Shown in capitals above the output formats. The CSS default. |
| RGB | 0 to 255 | Three channels from 0 to 255, what a canvas or an API expects. |
| HSL | hue, %, % | Hue, saturation and lightness, the easiest format for nudging a tint or a shade. |
| CMYK | print, approx | Cyan, magenta, yellow and black for print. A guide without a color profile. |
| HSV or HSB | not shown | Not in the tool. Convert from RGB in a design app or a short script. |
| Alpha | not supported | No transparency slider. Add alpha by hand with an 8-digit HEX or rgba(). |
| Typing a code | no field | There is no box for a HEX code. Some browser color dialogs have one. |
| Eyedropper | not on this page | No screen or image sampling. Use browser dev tools or a design app. |
| Generate Random | random color | Fills the picker with a random HEX and updates every format. |
| Copy | per format | COPY beside a format copies that value. Copy CSS Prop copies a background-color line. |
| Contrast | WCAG | Ratio on white and on dark. AAA at 7 or more, AA at 4.5 or more, FAIL below. |
| Harmonies | two sets | Complementary and Triadic swatches. Select a swatch to make it the new color. |
| Shades and tints | 10 swatches | A strip from tints to shades. Select a swatch to make it the new color. |
| Where it runs | on the device | The color work runs in the browser, so nothing is uploaded. |
One Color, Many Formats
A single color is one point in color space, and the formats are 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 describes the same color by hue with saturation and lightness, which is why it is easy to adjust by feel. 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 color depends on an ICC profile and the paper, so it is a starting point rather than an exact match. The online color picker shows four of these formats at once, with a contrast check against the WCAG guidelines, where AA text needs a ratio of 4.5 to 1 and AAA needs 7 to 1. It has no alpha slider and no HSV output, so those jobs need a design app or a short script. The references below define the standards.
Both choose and convert a color. The trade is real, and a brand palette is often a bigger job.
| Point of comparison | This tool Online color picker 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 sign-up | Free tier often capped |
| A perceptual color scale | Quick tints and shades | OKLCH and full ramps |
| Exact print CMYK | An RGB approximation | ICC-profile accurate |
| A quick select and copy | Open and copy at once | A heavy app to open |
A design app wins for a full palette system, an OKLCH ramp or print-accurate CMYK against an ICC profile. The online color picker wins for a quick choice, a conversion and a contrast check, opened with no install. Online file tools and whether yours uploads covers where a web tool sends its input.
The color 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 color is read on the device and never uploaded.
A screenshot used to eyedrop a brand shade can hold more than the color, 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.
All of these choose or convert a color. They differ in reach, in cost and in setup.
A browser picker gives one format, a design app is heavy and dev tools tie to a page. The online color picker shows four formats and a contrast check with nothing to install.
Keep these in mind for 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 format the destination expects from the online color picker rather than converting by hand later on.
A CMYK value worked out from RGB is a guide in any online color picker, not an exact print color, since a real print depends on an ICC profile and the paper. For a critical print job, confirm the color with the printer against a proof.
The Visual Selector opens the color dialog of the browser, so its look differs in Chrome, Edge, Firefox and Safari. Some dialogs have a field for typing a HEX code and others do not.
The online color picker handles one color with its harmonies, shades and tints. A full brand palette, an OKLCH ramp or print-accurate CMYK against an ICC profile belongs in a design app or the desktop edition, which manages an entire color 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 color.
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 every step looks equally spaced to the eye, past the plain sRGB mixes of a quick tool.
No sign-up needed. Open the online color picker, select a color and see every format at once.