Color Picker & Converter

They are five ways to write the same color. HEX (#RRGGBB) is the compact hexadecimal notation CSS and design tools use most; this color converter turns any HEX to RGB and back. RGB(A) gives the red, green and blue channels as 0–255 (plus an optional alpha for transparency) and is how screens actually mix light. HSL and HSV both describe a color by its hue (the angle on the color wheel), saturation and either lightness (HSL) or value/brightness (HSV) — far more intuitive when you want a lighter or more muted variant. CMYK (cyan, magenta, yellow, black as percentages) is the subtractive model for print. Pick a color once and this tool shows every format at the same time, each with its own copy button.

Click “Pick from screen” and a magnifier appears — hover over any pixel, anywhere on your display (a photo, another app, a website), and click to grab its exact color. It uses the browser’s built-in EyeDropper API, so the button only shows up where that is supported: today that means Chromium browsers such as Chrome, Edge, Opera and Brave on desktop. Firefox and Safari do not expose the API yet, so the button is hidden there and you can still type or paste any color code instead. Nothing about the screen is uploaded — the sampling happens locally in the browser.

Alpha is the opacity of a color: 1 (or 100%) is fully solid and 0 is fully transparent. A normal 6-digit hex like #d946ef has no alpha, so to store transparency CSS added 8-digit hex — #RRGGBBAA — where the last two digits are the alpha as hex (for example #d946ef80 is about 50% opaque). This picker has an opacity slider; the moment you drop below 100% it adds the 8-digit hex and the rgba()/hsla() rows so you can copy whichever your CSS needs, and the preview shows the checkerboard through the transparent color.

It measures how legible text would be on the color you picked. The tool computes the WCAG contrast ratio (from 1:1 up to 21:1) for both black and white text and marks the more readable one as “Best”. As a rule of thumb, normal body text needs a ratio of at least 4.5:1 to pass WCAG AA and 7:1 to reach the stricter AAA, while large or bold text can pass AA at 3:1. If both black and white read “Fail”, the color is a poor background for text and you should darken or lighten it. This lets designers check accessibility while they choose a color, not afterward.

No. Every conversion — HEX to RGB, RGB to HEX, HSL, HSV, CMYK, the contrast check and the eyedropper — runs entirely in your browser with plain JavaScript. Nothing is uploaded, logged or shared, so it is safe to use with brand or client colors. Your last color is remembered only in your own browser’s local storage so the tool reopens where you left off, and the page URL also carries the color so you can bookmark or share an exact shade.