Colour Tools Runs in browser Updated 30 Mar 2026

Color Picker

Pick any color and instantly view HEX, RGB, HSL, HSV, CMYK, alpha, and decimal values. Copy any format with one click.

Hue

Alpha

Hex input

Supports #RGB, #RGBA, #RRGGBB, and #RRGGBBAA.

Pick

Preview

RGB & Alpha

Red

Green

Blue

Alpha

HSV & HSL

Hue

Saturation

Brightness

Lightness (HSL)66%

Copy-ready formats

Hex#5E61F2

Hex + Alpha#5E61F2FF

RGBrgb(94, 97, 242)

RGBArgba(94, 97, 242, 1)

HSLhsl(239, 85%, 66%)

HSLAhsla(239, 85%, 66%, 1)

HSVhsv(239, 61%, 95%)

CMYKcmyk(61.2%, 59.9%, 0.0%, 5.1%)

Decimal6185458

Loading rating…

How to use Color Picker

Pick or paste your color

Click the color swatch to open the native color picker and select any color visually, or type/paste a hex code directly into the input field.
View all color formats

See your color displayed simultaneously in HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, decimal, and alpha formats, alongside a large preview swatch.
Fine-tune individual channels

Adjust the red, green, blue, alpha, hue, saturation, or brightness sliders to dial in precise values without leaving the interface.
Copy the format you need

Click the Copy button next to any format to copy it directly to your clipboard — ready to paste into CSS, Figma, Illustrator, or any other tool.

Color Picker FAQ

Can I paste a hex code directly?

Yes. Type or paste a three, four, six, or eight-digit hex code with or without the # prefix, and all derived values update immediately. Eight-digit hex codes include alpha (e.g. #FF000080 for 50% transparent red).

Is my data sent to a server?

No. All color conversion happens in your browser using standard color-space mathematics. Nothing is uploaded or stored.

What color formats are supported?

The tool displays HEX, HEX with alpha (8-digit), RGB, RGBA, HSL, HSLA, HSV channel values, CMYK percentages, decimal notation, and alpha percentage.

Does it support transparency and alpha values?

Yes. Set alpha directly using the slider, inspect both RGBA and HSLA output, and view or paste eight-digit hex values such as #FF000080 for semi-transparent colors.

What is the difference between HSL and HSV?

Both use Hue, Saturation, and a third channel — but HSV uses Value (brightness) while HSL uses Lightness. HSL is used in CSS; HSV is used in many design tools including Figma and Photoshop's color picker.

How do I use the CMYK values for print?

CMYK values are shown as percentages (0–100) for Cyan, Magenta, Yellow, and Key (Black). Note that CMYK conversion from sRGB is an approximation — for precise print color matching, use your print vendor's ICC profile workflow.

Can I pick colors from my screen (eyedropper)?

In browsers that support the EyeDropper API (Chrome 95+, Edge 95+), an eyedropper button may appear to sample any color from your screen. Safari and Firefox do not yet support this API.

Does it work on mobile?

Yes. The color picker is fully responsive and works on any modern mobile browser. The native color picker experience varies by device OS — iOS and Android provide their own color selector interfaces.

Background

Select any color using the native color picker, paste a hex code, or fine-tune individual RGB, HSL, or alpha channel sliders. All color representations update simultaneously: HEX, RGB, RGBA, HSL, HSLA, HSV channel values, CMYK percentages, decimal notation, and alpha percentage.

The large preview swatch shows your selected color at a glance, including transparency for semi-transparent colors. Copy any format to your clipboard with a single click — no manual reformatting needed when switching between CSS, design tools, and print workflows.

Supports eight-digit hex values (e.g. #FF000080) for alpha-inclusive HEX colors used in modern CSS and design tools. CMYK output is useful for preparing colors for print workflows where RGB values need converting for press use.

Who is this for? Web developers switching between CSS color formats, UI/UX designers converting between design tool color spaces, print designers converting screen colors to print-ready CMYK, and anyone who needs richer color data quickly.

Competitors like htmlcolorcodes.com and coolors.co offer similar conversion — Kordu adds CMYK, decimal, and alpha simultaneously with no ads inside the tool.

Color Contrast Checker

Check WCAG color contrast ratios between foreground and background colors. See AA and AAA pass/fail badges instantly.

Image Color Picker

Pick colors from any image and get HEX, RGB, and HSL values. Extract a full color palette instantly.

CSS Minifier

Minify and compress CSS for production — strip whitespace, merge rules, and show size reduction instantly.

Learn more

design

Color Theory for Web Designers: A Practical Guide

Learn color harmony rules with real hex values. 90% of snap judgments about products are based on color alone. Build better palettes today.