Color Picker | BoringToolsKit

Saturation and brightness

Y · Brightness

X · Saturation

X · Saturation 67%Y · Brightness 89%

Hue 347°

System color picker

HEX

RGB228, 76, 108

HSL347°, 74%, 60%

HSV347°, 67%, 89%

CMYK0%, 67%, 53%, 11%

Basic colors

Click or drag across the X/Y plane, use arrow keys, adjust hue, enter HEX, or choose a basic color.

Ask an AI to explain this result

Screen colors and printed output can differ by display calibration, color profile, material, ink, and lighting. Verify production colors in the target medium.

This tool runs locally in your browser. Inputs and results are not transmitted or retained by BoringToolsKit.

Use this result

Share the current inputs or ask ChatGPT to explain the calculation in context.

Include calculator values in URL

More options

Report a calculation issue

Direct answer

What does this tool show?

Color picker: pick any color and convert between HEX, RGB, and HSL values with copy-ready codes for design and web work. Free, private, no signup needed.

Bar chart of cyan magenta yellow black ink percentages for hex FF8000 — #FF8000 totals 300 percent ink coverage in naive CMYK.

Transparent methodology

How this calculator works

Sources

Frequently asked questions

What is a color picker tool?

A color picker is a browser-based tool that lets you select and extract hex, RGB, or HSL color values from any image or screen directly on your device.

Do I need to create an account or sign up to use this color picker?

No, this color picker requires no signup or account; it runs entirely in your browser and does not save any of your data.

Does this color picker upload my images to a server?

No, this color picker is a no-signup, browser-based tool that processes all images and color data locally on your device without uploading anything.

Cite this tool

BoringToolsKit. “Color Picker.” boringtoolskit.com/color-picker/. Free to reference in articles, syllabi, and answer posts with a link.

Privacy: Inputs and results stay in this browser. Any future sponsored recommendation or advertisement will be clearly labeled and kept separate from the calculation.

Worked example: converting #FF8000 by hand

Take the hex code #FF8000. Split it into three pairs: FF, 80, 00. FF is 15 x 16 + 15 = 255, 80 is 8 x 16 = 128, and 00 is 0, so RGB is (255, 128, 0). Normalize each channel by dividing by 255: r = 1, g = 0.50196, b = 0.

The maximum channel is 1 and the minimum is 0, so the spread d = 1 and lightness L = (1 + 0) / 2 = 0.5, or 50 percent. Because L is exactly 0.5 and not greater, saturation uses the low-lightness branch: S = d / (max + min) = 1 / 1 = 1, or 100 percent. Red is the maximum channel, so hue = (g - b) / d x 60 = (0.50196 - 0) / 1 x 60 = 30.118 degrees, which rounds to 30 degrees. HSL comes out as 30 degrees, 100 percent, 50 percent.

HSV keeps the same hue. Value is the maximum channel itself: V = 1, or 100 percent. Saturation is d / max = 1, so HSV is 30 degrees, 100 percent, 100 percent. For CMYK, the black channel is k = 1 - max = 0, so each ink is (1 - channel - k) / (1 - k) = 1 - channel: cyan 0 percent, magenta 1 - 0.50196 = 49.8, which rounds to 50 percent, yellow 100 percent, black 0 percent. The tool therefore reports CMYK 0%, 50%, 100%, 0% for #FF8000.

Where rounded HSV values diverge

Every displayed value is rounded to the nearest whole number, so nearby hex codes can report identical results. #FF8000 has a true hue of 30.118 degrees, while #FF7F00 (green channel 127) has a true hue of (127/255) x 60 = 29.882 degrees. Both display as 30 degrees. The rounding error also feeds back: after typing a hex code, the saturation-brightness plane snaps to the rounded HSV state, so dragging from a freshly typed color moves from the rounded point, not the exact one.

The HSL and HSV numbers are computed in raw sRGB space, so they are not perceptually uniform. A 10 degree hue shift near red does not look like the same shift near cyan, and equal steps in lightness are not equal steps in perceived brightness. Two different colors with the same HSL lightness, such as pure blue #0000FF and pure yellow #FFFF00 (both 50 percent), appear far apart in brightness on screen.

The CMYK output is a naive mathematical conversion, not a print preview. #FF8000 reports 300 percent total ink coverage at 0% / 50% / 100% / 0% if you sum the channels, which most print workflows would flag. Real printing applies ink limits, black generation, and device profiles, so treat these CMYK figures as relative proportions rather than press-ready values.