Color Picker

A color picker lets you select a color visually and instantly see it expressed in the different formats that CSS, design tools, and code actually use. This tool shows any color in six formats at once — HEX, HEX8, RGB, RGBA, HSL, and HSV — so instead of looking up a conversion formula or reaching for a separate converter, every value is already there, each with its own one-click copy button.

There are three ways in. Click the color swatch to open your browser's built-in color picker (on Chrome and Edge desktop, this includes an eyedropper for sampling any color on your screen); type or paste a value straight into the HEX, RGB, or HSL field; or reuse a color from the row of recently picked swatches the tool keeps for you. The text fields are deliberately forgiving — #abc, #aabbcc, #aabbccdd, rgb(51, 102, 204), rgba(51 102 204 / 50%), hsl(220, 60%, 50%), and bare values like 51,102,204 all parse — and anything unreadable raises a clear inline error rather than quietly doing nothing.

An alpha slider feeds the RGBA and HEX8 outputs, so semi-transparent colors are covered too. It's built for developers styling a component and designers translating a brand color across HEX for CSS, RGB for a design spec, HSL for programmatically adjusting lightness, and HSV for matching what Photoshop and Figma's own pickers display.

HEX (like #3B82F6) is the most common format in CSS and design tools because it's compact, a single six-character string that fully defines a color. It's the easiest format to paste into a stylesheet or share with a teammate, but it's also the hardest to reason about visually, since there's no intuitive way to guess what color a random hex string represents.

RGB (like rgb(59, 130, 246)) expresses a color as the intensity of red, green, and blue light, each from 0 to 255. It maps directly to how screens actually render color and is common in design software. When you need transparency, the RGBA output adds the alpha slider's value on the end, and HEX8 packs the same alpha into two extra hex digits for CSS that prefers hex notation.

HSL (like hsl(217, 91%, 60%)) expresses a color as hue (position on a 360-degree color wheel), saturation (intensity), and lightness (how close to black or white). HSL is the most useful format for programmatically adjusting a color, since darkening a color is just lowering the lightness value, and creating a matching color scheme is often just rotating the hue while keeping saturation and lightness fixed.

HSV (like hsv(217, 76%, 96%)) looks similar to HSL but swaps lightness for value, which is brightness measured against pure white rather than against the midpoint. That's the model behind the square gradient in Photoshop, GIMP, and Figma's pickers, so HSV is the format to reach for when you're trying to reproduce a number you read in a design application rather than in a stylesheet.

• HEX: compact and standard for pasting into CSS or sharing a single color value
• HEX8 / RGBA: the same color plus an alpha channel, for semi-transparent fills and overlays
• RGB: maps directly to screen color channels (0-255 each for red, green, blue)
• HSL: easiest format for adjusting lightness/darkness or building a color palette by rotating hue
• HSV: matches the picker models in Photoshop, GIMP, and Figma
• They all represent the exact same color; converting between them changes the format, not the actual color

Web accessibility guidelines (WCAG) require a contrast ratio of at least 4.5:1 between normal body text and its background, and at least 3:1 for large text (18pt or larger, or 14pt bold), so that people with low vision can read the content comfortably. This tool doesn't calculate contrast ratio directly, but it's the first step: pick your text color and background color here, copy each HEX value, and run the pair through a dedicated contrast checker to confirm they meet the ratio.

As a general rule, very light text (like a pale gray) on a white background, or mid-tone colors on similarly mid-tone backgrounds, are the combinations most likely to fail contrast requirements. Pure black text on a white background produces a ratio of 21:1, far exceeding the minimum, while two similarly light colors might land below 2:1 and fail outright.

Adjusting the lightness value in HSL is often the fastest way to fix a failing contrast pair: keep the hue and saturation the same to preserve the brand color's identity, and push the lightness value down (for text) or up (for background) until the pair passes.

A single brand color rarely appears in only one place: it might need to be a HEX value in a CSS variable, an RGB value in a design tool's color picker, and an HSL value for generating lighter and darker tints programmatically. Rather than manually calculating each conversion, picking the color once here and reading off all three formats keeps everything numerically consistent across a codebase and a design file.

This is especially useful when a designer hands off a color as a HEX code and a developer needs the equivalent RGB values for a canvas drawing API or a design token system that stores colors as separate numeric channels instead of a hex string.

On Chrome and Edge for desktop, clicking the color swatch opens a native color picker that includes an eyedropper tool, letting you click anywhere on your screen, including outside the browser window on some systems, to sample that exact pixel's color. This is the fastest way to match a color from an existing image, screenshot, or another website without guessing at a hex value.

Firefox and Safari's native color pickers don't currently include this screen-sampling eyedropper, so on those browsers you're limited to the picker's built-in gradient and slider controls, or reusing one of your recently picked colors from this tool's history.

A frequent mistake is manually retyping a color value between formats and introducing a rounding error, since RGB values are whole numbers from 0-255 while the underlying color math involves fractional values; letting a tool handle the conversion avoids this drift entirely. Pasting the value into one of the text fields instead of retyping it by hand is the safest route, and it also catches typos immediately with an inline error rather than silently landing you on a slightly wrong color.

A related mix-up is reading an HSL number where an HSV one was meant, or the reverse. The hue is the same in both, but the saturation and the third component are not: #3366CC is hsl(220, 60%, 50%) and hsv(220, 75%, 80%). Copy from the row whose label matches the field you're pasting into. And when a design calls for transparency, set the alpha slider and copy the RGBA or HEX8 row rather than bolting an alpha value onto the plain RGB numbers by hand.