NineClip Free Tools

Color Picker

Pick a colour with the swatch or type a hex code, and read it back as HEX, RGB, HSL and CMYK side by side. Your browser does every conversion.

Updated

Color ToolsPopularHot● Free No upload Instant

Loading Color Picker…

Your browser is preparing the tool. It runs 100% locally.

Quick answer

Pick a color with the swatch or type a hex code, and the tool shows it in five formats at once: HEX, RGB, the CSS rgb() string, HSL and CMYK. The swatch is your browser's native color control, the same one your operating system shows, and your device works out every other value. Click any code to copy it.

What the Color Picker does

Drag the swatch or type a hex code and the two stay in sync. From that one color the tool shows HEX, the three RGB channels, a ready-to-paste CSS rgb() string, HSL and a CMYK approximation. It opens on a blue (#2563EB) so there is always something to read, and a click on any code copies it.

Having every format on screen at once saves trips between converters. CSS usually wants hex or HSL, a canvas or image library wants the raw 0 to 255 numbers, and a print hand-off asks for CMYK. You pick once and take whichever notation the next tool expects.

How it works

The swatch is the browser's native color input, the same OS color dialog other applications use. The specification says it always returns a six-digit lowercase hex with no transparency channel, so that hex drives everything else on the page.

The tool splits the hex into red, green and blue, converts those to HSL, and runs the plain RGB-to-CMYK approximation, all on your device. If you type into the hex box instead, it accepts three or six digits, adds the # for you and repaints the swatch. Nothing is uploaded, and the maths runs as you click or type.

Data source & conversion logic

The tool uses no color database and makes no network request. It reads one sRGB color from your browser's native color control (or the hex you type) and works out the other formats in the page, using the conversions in the CSS Color and sRGB specifications.

  1. Step 1. Set a color: open the native color control, or type a hex code into the field.
  2. Step 2. Read it as a six-digit sRGB hex and split it into red, green and blue (0 to 255 each).
  3. Step 3. Convert those RGB values to HSL: hue in degrees, saturation and lightness as percentages.
  4. Step 4. Convert the same RGB to a CMYK approximation as a rough print reference.
  5. Step 5. Show all five codes and the swatch; click any code to copy it.

Technical details

InputNative color swatch + hex field (3 or 6 digit)
Output formatsHEX, RGB, rgb(), HSL, CMYK
Color spacesRGB, 8-bit, 0 to 255 per channel
Total colors16,777,216 (256 × 256 × 256)
Alpha / opacityNot supported; the native control has none
CMYKApproximate; screen reference, not print-ready
CopyClick any code to copy it
Where it runsIn your browser, with no server call

Standards and references

  • sRGB (IEC 61966-2-1): the default color space of the web, and what a hex or RGB value means. Eight bits per channel gives 256 levels each and 16,777,216 colors in total.
  • CSS Color notation: the CSS Color specification defines the HEX, rgb() and hsl() forms the tool outputs, so they paste straight into a stylesheet.
  • HTML color input: the native swatch returns a seven-character lowercase hex (a # plus six digits) with no alpha channel, so it can only describe a fully opaque color.

Accuracy and limits

The CMYK figure is a plain mathematical approximation and not ready for print. RGB (light) and CMYK (ink) cover different ranges of color, and the printed result depends on the press, the ink and the paper. That is why print shops convert through an ICC profile for a specific stock. Use the CMYK here as a ballpark, and do not send it to a printer as a spec.

There is no transparency. The native color control can't express alpha, so you always get a fully opaque color. For an rgba() or hsla() value, add the alpha yourself.

HSL is rounded to whole degrees and percentages, so a hex to HSL to hex round trip can land a step or two off the original. For an exact, reversible pair, use the HEX and RGB converters.

Everything is read as sRGB. A wide-gamut color (Display P3 and similar) is treated as ordinary sRGB numbers here and is not remapped.

Real-world uses

Web and UI design

Grab a hex for CSS, an HSL to fine-tune and an rgb() for a gradient stop from the same pick.

Print hand-off reference

Read a color's rough CMYK before sending artwork out, then confirm the exact values with your printer's ICC profile.

Coding and canvas work

Pull the 0 to 255 RGB numbers a canvas, game engine or image library expects, instead of converting a hex by hand.

Matching a color

Paste a hex you found somewhere, see it filled large in the swatch, and copy the other format you need.

When it fits, and when it doesn't

Good for

  • Picking or inspecting a single color
  • Getting one color in several formats at once
  • Quick CSS and UI work
  • Learning how HEX, RGB and HSL relate

Not the best choice for

  • Building a coordinated multi-color palette
  • Checking text legibility against a background
  • Print-accurate CMYK for a real job
  • Anything needing transparency or alpha

For a coordinated set of colors, use the color palette generator. To check legibility, use the contrast checker. For transparency, add an alpha value to the rgb() or hsl() output yourself, and for print, convert through your print provider's ICC profile.

Frequently asked questions

What color formats does the picker show?
Five at once: HEX, the three RGB channels (0 to 255), the CSS rgb() string, HSL (hue in degrees, saturation and lightness as percentages) and a CMYK approximation. Click any of them to copy it to your clipboard.
Can I type a hex code instead of using the swatch?
Yes. The hex field accepts a six-digit code or a three-digit shorthand, with or without the leading #. Once the code is valid, the swatch repaints and the other formats update.
Why is there no transparency or alpha option?
The browser's native color control has no alpha channel by design and only describes a solid color. If you need transparency, take the rgb() or hsl() value here and add your own alpha to make an rgba() or hsla() color.
Is the CMYK value accurate for printing?
No, and it isn't meant to be. It comes from a direct formula on the RGB values, but screens (light) and presses (ink) reproduce different ranges of color. Accurate print conversion needs an ICC profile for your ink and paper, so use this CMYK as a rough guide and let your printer do the real conversion.
What's the difference between the HEX and RGB values?
They describe the same color two ways. HEX writes each channel as a two-digit base-16 pair (#8B5CF6), and RGB writes the same channels as decimal numbers (139, 92, 246). Hex is compact for CSS, while RGB numbers are handier in code.
Does it understand three-digit hex shorthand?
Yes. A shorthand like #F90 is expanded to #FF9900 before conversion, because each shorthand digit doubles (F becomes FF, 9 becomes 99).
How do I copy a value?
Click the code you want. Each readout is a copy chip, so one click puts that exact string on your clipboard.
Is my color sent anywhere?
No. The swatch reads from your browser and your device does every conversion. The tool uploads nothing and keeps nothing on a server.
What color space are these values in?
sRGB, the web's standard space, at eight bits per channel. A plain hex or rgb() value assumes the same space. Wide-gamut colors aren't remapped; they are read as ordinary sRGB numbers.
Why does the HEX show in uppercase when the native picker uses lowercase?
Only the display differs. The native control returns lowercase by specification, and the tool uppercases the hex to make it easier to read. #8B5CF6 and #8b5cf6 are the same color.
Can it pick a color out of an image or off my screen?
No. This tool works from the swatch or a hex code and does not sample pixels. To grab a color from a photo, use the image color picker, which reads pixels from an image you load.
What do the HSL numbers mean?
Hue is an angle on the color wheel from 0 to 360 degrees (red near 0, green near 120, blue near 240). Saturation is how vivid the color is, from 0 percent (gray) to 100 percent. Lightness runs from 0 percent (black) through 50 percent (the pure hue) to 100 percent (white).

References

All five codes come from one sRGB color, worked out in the page. The CMYK is a screen approximation with no print profile behind it, so check print values against your printer's ICC profile.

Popular

HEX to RGB Converter

Turn a hex color into its red, green and blue numbers and the CSS rgb() string, exactly.

ColorOpen Tool
Editor's Pick

Contrast Checker

Check whether your text and background colours have enough contrast to read, with a pass or fail at each WCAG accessibility level.

ColorOpen Tool

RGB to HEX Converter

Pack red, green and blue numbers into the compact #RRGGBB hex code the web runs on.

ColorOpen Tool
PopularHot

Image Compressor

Compress an image to JPEG with a quality slider and watch the file size drop as you drag, in your browser.

ImageOpen Tool
PopularHot

Merge PDF

Combine several PDFs into one file in the order you choose, without leaving your browser.

PDFOpen Tool
PopularHot

Word Counter

Count words, characters, sentences and paragraphs as you type, with reading and speaking time alongside.

TextOpen Tool

Back to the Color Picker

Paste or pick your input at the top of the page. The conversion runs on this device and needs no account.

Go to the tool Explore Color Tools