What is the difference between HEX, RGB, and HSL?

HEX is a six-digit hexadecimal notation for the same three channels as RGB - red, green, and blue - each ranging from 0 to 255. HSL (hue, saturation, lightness) describes color in terms that match human perception: hue is the color angle (0°–360°), saturation is how vivid the color is, and lightness is how light or dark it is. All three systems can represent the same set of sRGB colors; the choice is stylistic and depends on what is most convenient for your use case.

What is HSV and how is it different from HSL?

HSV (hue, saturation, value) and HSL share the hue channel but differ in the third channel. In HSV, "value" is the brightness of the brightest point - a fully saturated pure red has value 100 %. In HSL, "lightness" 50 % is a pure hue while 100 % is always white. HSV is the model used by most color pickers; HSL is more common in CSS.

What is CMYK and why does it differ from RGB on screen?

CMYK (cyan, magenta, yellow, key/black) is a subtractive color model used in print. Mixing inks absorbs light, so combining all primaries produces black. RGB is an additive model used for screens - mixing light produces white. The color gamuts differ: some CMYK print colors cannot be reproduced on screen and vice versa. This converter shows CMYK values as a rough approximation assuming ideal sRGB-to-CMYK mapping.

How is the closest CSS named color found?

The tool compares your color against all 140+ CSS named colors using Euclidean distance in RGB space - the straight-line distance between the two color points in a 3D cube. The named color with the smallest distance is shown. A perfect match (distance 0) is labeled "exact"; otherwise the closest approximation is displayed.

How is the closest Tailwind color found?

All 242 colors in the Tailwind CSS v3 palette (22 hue families × 11 shades, plus white and black) are compared to your color using the same Euclidean RGB distance. The Tailwind shade with the smallest distance is returned. This helps developers quickly identify which Tailwind utility class to use for a given design color.

Color Picker & HEX RGB HSL Converter

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.

The three coordinate systems for color on 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

Both oklch() and oklab() are supported in all modern browsers as of 2023.

Color gamuts: sRGB, Display P3, and beyond

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.