Color Picker

How to use the online color picker

Drag anywhere inside the square to move through saturation and brightness; drag the strip underneath to change hue. Between the two you can reach all 16,777,216 colors an RGB screen can display — this single field works as a hex color picker, an RGB color picker and an HSL color picker at once. Already know the color you want? Skip the dragging: paste a hex code, an RGB triple like 255, 90, 54, or an HSL value into any of the three fields above the swatch, and the picker jumps straight to it.

However you arrive at a color, the harmonies, shade ramp and full conversion table on the right update instantly, and the page's URL updates too — copy it from the address bar to share this exact color with a teammate, a client, or your own future self. For repeatable work, use Export CSS or Export SCSS in the picker actions to copy a ready-made custom property straight into a stylesheet.

Hex, RGB, HSL, HSV, CMYK and OKLCH — one color, every format

A color picker online is only as useful as the formats it speaks. Hex codes like #FF5A36 are what you'll paste into CSS and HTML; RGB is what canvas, SVG and most image-editing software expect; HSL and HSV/HSB describe a color the way people actually think about it — hue, then how saturated and how light or dark it is. CMYK is there for anyone prepping a color for print, and OKLCH is the newer, perceptually-uniform space that CSS Color Level 4 and modern design systems increasingly use, because equal steps in OKLCH actually look equal, unlike HSL.

Switch to the Conversion tab above to see all six formats for the current color at once, each with its own copy button. Need just the numbers without the drag-to-pick interface? The standalone color converter does the same conversion from a plain text field, and the dedicated RGB to hex and hex to RGB pages are built for exactly those two one-way lookups.

Color picker use cases

• Web and UI design — grab a brand hex code and instantly see its complementary, analogous and triadic partners for buttons, links and hover states.
• Front-end development — copy a CSS custom property or SCSS variable straight into a stylesheet, already formatted and ready to paste.
• Digital art and illustration — dial in a hue with the saturation/value field the same way you would in Photoshop, Procreate or GIMP.
• Brand and style guides — export a color's full shade and tint ramp for a slide deck, brand book or design-token file.
• Accessibility review — switch to the Contrast tab to check a color against black and white text, or the Vision tab to preview it under color blindness, before it ships.

From one color to a full palette

Picking a single color is rarely the whole job. Once you've found the right shade, open it in the palette generator to build a complete scheme, or drop it into the color wheel to see its harmonies plotted around a circle instead of a list. If you're pairing it with text or a background, run both through the contrast checker to confirm they clear WCAG AA before you ship the pairing. Curious what the color is actually called? Compare it against the 140 standard CSS color names, or browse the wider named-color library by family. And if you want to see this color blended toward a second one, step by step, the color mixer will show you exactly what sits in between.

Color picker workflow tips

A few habits make an online color picker faster to work with. Treat the URL as a clipboard for colors — every shade you land on gives you a link that reopens the picker on that exact hex, which is ideal for bug reports, pull-request notes and design reviews. When you're matching an existing color, paste it into the hex field rather than eyeballing the saturation/value square: a one-character typo is a visibly different color, and the field flags a value that didn't parse.

The Shades & Tints tab is the quickest route to a UI scale from one hue — tints toward white for hover and disabled states, shades toward black for borders and pressed states, tones toward gray for muted secondary text. Export the color as an SCSS variable once and rename it rather than re-picking each visit; the math is deterministic, so it stays identical.

Color picker FAQ