Color Picker – Color Picker & Color Code Converter

Yes, the Color Picker is free and requires no sign-up. All conversions happen directly in your browser: no uploads, logging, or server requests. Only the page URL includes the current color as ?color=, so you can share it by link or bookmark it.

Click the colored field next to “Closest CSS color:”, choose saturation and brightness in the square, then set the hue below it. The HEX code appears at the top of the result and has a copy button. If you already know the color as RGB, HSL, HSV, or CMYK, enter the value in the corresponding field. To pick a color from a photo or screenshot, use the Image Color Picker; this tool doesn't read images. Go to Image Color Picker

Type or paste the value into the RGB field, such as 24, 232, 136 or rgb(24, 232, 136). The HEX field immediately shows #18e888, while HSL, HSV, and CMYK update too. To go the other way, enter the HEX code with or without # in the HEX field. Both formats describe the same screen color: HEX writes the three RGB values from 0 to 255 as hexadecimal pairs from 00 to ff.

RGB describes a color using the red, green, and blue light mixed by a screen. HSL (hue/saturation/lightness) and HSV (hue/saturation/value) are two different conversions of the same RGB value that are more intuitive for people. HSL is useful for lightening or darkening a color; HSV is useful for mixing colors using a hue, saturation, and brightness palette. CMYK (cyan/magenta/yellow/black), by contrast, describes ink or toner mixing used in printing, not light mixing.

The CMYK value is a simplified mathematical approximation without a color profile, rounded to whole percentages. It helps you assess a screen color for printing but doesn't replace a print proof using your print provider's profile. You can enter CMYK as 0%, 61%, 72%, 0% or cmyk(0%, 61%, 72%, 0%).

Yes. Set the opacity from 0 to 100% with the slider, and the result shows the color as rgba() and hsla() for copying. If you enter a value with alpha, such as a 4- or 8-digit HEX code (#rrggbbaa), rgba(), or hsla(), the slider adopts that opacity when you leave the field. The HEX code in the result remains six digits long.

It measures how well two colors, such as text and background, stand out from each other, on a scale from 1:1 to 21:1. The tool's ratings are AAA from 7:1, AA from 4.5:1 for normal text, and AA (large text) from 3:1 for large or bold text. The Color Picker shows the ratio of your color against black and white. For any foreground and background colors, use the Contrast Checker. Go to Contrast Checker

Next to the color field, the tool shows the closest CSS color. It calculates the Euclidean distance between your color and every named CSS color in RGB space and displays the closest match, such as tomato for #ff6347. If it isn't an exact match, “similar” appears after the name. You can copy the name and use it in CSS instead of the HEX code, though a “similar” match is only an approximation.