Online Color Picker — HEX, RGB, HSV and CMYK

You get a paintable color field plus four linked value boxes: HEX, RGB, HSV and CMYK. Edit any one of them and the other three update immediately, so switching between models does not need a separate converter. A slider sets the brush from 6 to 72 pixels, which helps when you want to mix a shade by hand instead of picking it off a fixed ramp. All drawing and all arithmetic happen in the browser. The usual case: a printer hands you CMYK numbers and you need the web equivalent in HEX for the same page. See also: pull a palette out of an existing image, build a HEX code from three RGB values, check text and background contrast against WCAG.

How to use it

Pick a shade on the color field — the current value lands in the HEX, RGB, HSV and CMYK boxes at once.
Choose a brush shape — round, square, diamond or pixel — then set its size on the slider: 6 to 72 pixels in steps of 2, starting at 18.
For an exact color, type it into the HEX field (00FF7F, for instance) instead of aiming with the mouse.
Or enter channels in the RGB field as «0, 255, 127» — the other three models are recomputed for you.
For print work read the CMYK box: a value like «100, 0, 50, 0» describes the same shade.
Copy the string you need into CSS, Figma or your design token file.

FAQ

Can I sample a color from another site or from my desktop?

No. The page only reads its own canvas and cannot see pixels in other tabs or windows — that is a browser security boundary. To capture a color from an external interface, take a screenshot, run it through a palette extractor, then fine-tune the value in the HEX field here.

Why is HSV easier than RGB for choosing shades?

In HSV the first number is hue, the second saturation, the third value. To get a paler version of a brand color you just lower the second number and leave the hue alone. Doing the same in RGB means moving three channels at once and usually drifts the hue somewhere you did not intend.

Why doesn't the CMYK reading match my print job?

The CMYK box uses a plain arithmetic conversion with no ICC profile, paper or ink model. A real press works against a profile such as Coated FOGRA39, and vivid screen colors like pure green simply cannot be reproduced with four inks. For a print run, always confirm against a proof or a Pantone fan.

Is transparency or RGBA supported?

There is no alpha channel in the fields; the picker reports an opaque color in four models. If you need translucency, copy the RGB numbers and add the fourth parameter yourself in CSS — rgba(0, 255, 127, 0.4), for example. The hue stays exactly the same.

Should the HEX value include the hash sign?

The field holds it without one, as 00FF7F. CSS requires the hash, so add it when you paste: #00FF7F. The shorthand three-digit form like #0F7 is not used here — the field always shows the full six-digit notation.

What does the brush size slider do?

It sets the stroke diameter on the canvas from 6 to 72 pixels in steps of 2, starting at 18. Beside it sit four brush shapes: round, square, diamond and pixel. A small brush helps when you are hunting an exact shade inside a narrow band of gradient; a large one fills an area so you can judge the color at scale. The clear-background button wipes every stroke at once.

Does my palette survive a page reload?

No — the canvas and the field values last only until you refresh, and nothing is sent to a server. Move the values you care about straight into CSS variables, Figma styles or a token sheet so the palette outlives the tab.

Examples

Print color taken to the web

Before: CMYK 100, 0, 50, 0 from a business card layout

After: HEX 00FF7F and RGB 0, 255, 127 for a CSS variable

Softening an accent through HSV

Before: HSV 150, 100, 100 — a fully saturated green

After: HSV 150, 60, 100 — same hue, calmer, with HEX recalculated for you

Rate this tool

Your rating and feedback help decide what to improve next.

— No votes yet