Color Picker & HEX RGB HSL Converter

How to use this tool

1. Pick a color. Drag the crosshair in the saturation/value square, or use the hue strip below it, to visually select a color.
2. Type any format. Enter a HEX value or CSS color name, RGB, HSL, HSV, CMYK, OKLab, or OKLCH value, then press Enter or click away. All other fields update instantly.
3. Adjust opacity. Use the alpha slider to change the opacity from 0% (fully transparent) to 100% (fully opaque). The RGBA and HSLA outputs update accordingly.
4. Copy the result. Click the copy icon next to any format row to copy that value to your clipboard. The CSS named color and closest Tailwind shade are shown at the bottom.

How HEX, RGB, and HSL relate

Every color on a screen is produced by mixing three light sources: red, green, and blue (RGB). Each channel is an integer from 0 to 255. HEX is simply the same three channels written in hexadecimal: #RRGGBB. A value of #FF0000 is pure red (R = 255, G = 0, B = 0). HEX is ubiquitous in HTML and CSS because it is compact and copy-friendly.

HSL (hue, saturation, lightness) remaps the same color space into coordinates that match human intuition. Hue is the angle on the color wheel (0°–360°): 0° is red, 120° is green, 240° is blue. Saturation is how vivid the color is: 0% is gray, 100% is the pure hue. Lightness goes from 0% (black) to 100% (white), with 50% being the pure hue. Designers often prefer HSL because it is easier to reason about. For instance, "make it 10% lighter" is a single lightness edit.

The three systems describe the same set of sRGB colors. This tool converts between all of them instantly so you can work in whichever format your context demands.

Color coordinate systems for the web

RGB: the hardware model

RGB mirrors the physical structure of display hardware. Each pixel has red, green, and blue sub-pixels. The integer 0–255 value maps directly to the signal strength of each sub-pixel. CSS accepts the decimal form (rgb(100, 149, 237)) and hex shorthand (#6495ED). The rgba() variant adds an alpha channel (0 = transparent, 1 = opaque) for compositing over other layers.

HSL and HSV: the perceptual models

HSL and HSV (hue, saturation, value) are cylindrical remappings of the RGB cube designed to separate chromatic information (hue) from achromatic information (lightness or brightness). They make it easy to create color variations: keep the hue constant and vary the saturation or lightness to produce tints, shades, and tones.

The key difference between HSL and HSV is in the third axis. In HSV, "value" is the brightness of the brightest component: a pure red at full value is exactly rgb(255, 0, 0). In HSL, "lightness" at 50% gives the pure hue and 100% gives white regardless of saturation. Most color pickers use the HSV model internally; CSS uses HSL in the hsl() function.

CMYK: the print model

CMYK (cyan, magenta, yellow, key/black) is the subtractive model used in print. Inks absorb wavelengths of light: mixing all three primaries produces black (in theory), so a separate black channel (K) is added to produce deep blacks efficiently. CMYK has a different color gamut than RGB: some vivid screen colors cannot be reproduced in print, and some print colors fall outside the sRGB gamut. The CMYK values shown here are mathematical conversions from sRGB and should be treated as approximations for reference rather than production print values.

Common use cases

• Design handoff: Figma exports colors in HEX; your CSS may use hsl() variables. Convert instantly to avoid manual calculation errors.
• Tailwind development: Given a HEX from a brand guide, find the nearest Tailwind palette color to stay within the utility-class system.
• Accessibility: Understanding the lightness of a color (the L in HSL) helps judge contrast before running a full WCAG check.
• Print preparation: Get a CMYK approximation to brief your print vendor, then verify the exact values in a professional color-managed workflow.

OKLab and OKLCH: the next generation

CSS Color Level 4 introduces OKLab and OKLCH, which are perceptually uniform color spaces developed by Björn Ottosson (2020). Unlike HSL, where equal steps in lightness don’t look equal to the eye (e.g., yellow at 50% lightness appears much brighter than blue at 50% lightness), OKLab is designed so that equal numeric differences correspond to equal perceived differences. OKLCH is the cylindrical form (Lightness, Chroma, Hue), analogous to HSL but perceptually correct. These spaces are especially useful for:

• Generating perceptually smooth gradients (no muddy gray middle)
• Creating harmonious palettes by adjusting lightness/chroma while keeping hue constant
• Accessibility work where perceived contrast matters more than mathematical contrast

This converter includes editable oklch() and oklab() rows. If an entered color falls outside the sRGB gamut, the other format rows show a channel-clipped sRGB approximation and the tool displays a notice. Modern browsers support these CSS functions; older browser versions may need fallback colors.

Color gamuts: sRGB, Display P3, and beyond

The converter's HEX, RGB, HSL, HSV, CMYK, CSS-name, and Tailwind results use sRGB. It does not currently accept Display P3 or Rec. 2020 values, though understanding those larger gamuts is useful when choosing colors for newer displays.

• sRGB: the standard color space for the web, covers about 35% of all visible colors. All monitors support it. CSS colors without a color-space qualifier are assumed to be sRGB.
• Display P3: a wider gamut used by Apple displays (iPhone, iPad, iMac, MacBook) since 2016. About 25% wider than sRGB. Can be accessed in CSS via color(display-p3 r g b). Vivid reds, greens, and oranges look noticeably more saturated on P3 displays.
• Rec. 2020: an ultra-wide gamut used in HDR video production, covering about 75% of visible colors. Not yet fully supported in CSS for web content.