Free Color Converter — HEX, RGB, HSL, CMYK, LAB & OKLCH

Color Spaces, Conversions and Why HEX Isn't Enough

Color on the web looks deceptively simple. You pick a HEX code, paste it into your CSS, and the browser draws the color. End of story — except it isn't, because the moment you have to do anything beyond display a single color on a single screen, you run into the messy reality of color spaces. Print designers want CMYK. Photographers want CIE LAB. Modern web designers want OKLCH for design systems with consistent perceived brightness. Accessibility auditors want WCAG contrast ratios computed from linear RGB. Mobile developers need UIColor literals or color int constants. This guide walks through every color space the Color Lab converter supports, explains when each one matters, and shows how the conversions actually work under the hood — so you understand what your tools are doing instead of just trusting them.

HEX — the format you already know

HEX is just a compact way of writing three (or four) bytes. The string #FF6B35 packs three numbers — 255, 107 and 53 — into six hexadecimal characters that are easy to copy, paste and read at a glance. The # is a sentinel that says "what follows is a color code." The first pair (FF = 255) is the red channel, the second pair (6B = 107) is the green channel, the third pair (35 = 53) is the blue channel. Each channel ranges from 0 to 255 because 8 bits can hold 256 distinct values. You can also write HEX in the short form #F63, which is shorthand for #FF6633 — each character is doubled. Modern CSS adds an optional alpha channel: #FF6B3580 means the same color at 50% opacity (80 in hex is 128, which is 128/255 ≈ 50%).

HEX is the universal interchange format for the web because it's compact and unambiguous. But HEX is just a representation of RGB — there is no "HEX color space," only an RGB color space written in hexadecimal. Every property HEX has is really a property of RGB.

RGB — additive light, screen-native

RGB stands for Red, Green, Blue. It's an additive color model, meaning colors are produced by adding light together: starting from black (no light) and adding red light, green light and blue light in different amounts. Maximum red plus maximum green plus maximum blue produces white, because all the wavelengths combine. RGB is the native color model for anything that emits light: monitors, phones, TVs, projectors, LED signs.

Each channel is conventionally represented as an integer from 0 to 255 (8 bits per channel, 24-bit color in total, also called "true color"). Modern displays support 10 bits per channel (HDR / Display P3) but the CSS standard still uses 0–255. RGB also has a normalised form where each channel runs from 0.0 to 1.0, which is what graphics libraries and shaders use internally. The Color Lab converter outputs both: the integer form for CSS and the float form for the Swift UIColor literal.

HSL and HSV — perceptually-friendlier color models

RGB is great for hardware but terrible for humans. If I tell you "rgb(178, 34, 200)," you have no immediate intuition for what that color looks like or how to make it slightly bluer or slightly darker. HSL and HSV solve this by describing colors using axes that match how people actually think about color: hue ("what color is it?"), saturation ("how vivid is it?") and lightness or value ("how bright is it?").

HSL uses Hue (0–360°), Saturation (0–100%) and Lightness (0–100%). Lightness is symmetric — 0% is pure black, 50% is the pure hue, 100% is pure white. So an HSL hue at 50% lightness is "the color," and you can move toward white or black by sliding lightness up or down. HSV uses Hue, Saturation and Value, where Value is asymmetric — 0% is pure black, 100% is the brightest version of the hue with no white added at all. To get white in HSV you have to drop saturation to 0 and raise value to 100. HSL is more intuitive for picking colors visually; HSV is more common in image editors because the value slider matches how monitors display brightness directly.

HSL conversion to and from RGB is a deterministic mathematical operation — no information is lost in either direction, and round-tripping HEX → HSL → HEX gives you the same value back (modulo rounding to integer percentages). The Color Lab converter does the round trip continuously as you drag the sliders.

CMYK — subtractive color for print

CMYK is the four-channel color model used in commercial printing: Cyan, Magenta, Yellow and Key (which is black, called "key" historically because it's the printing plate that aligns with the others). It's a subtractive model — colors are produced by laying inks on white paper, and each ink absorbs (subtracts) part of the spectrum from the reflected light. Maximum cyan plus maximum magenta plus maximum yellow theoretically produces black, but in practice the result is a muddy brown, which is why a separate black ink is added. CMYK uses percentages (0–100%) for each channel.

The conversion from RGB to CMYK is a standard mathematical formula, but here's the part most online converters don't tell you: the standard conversion is an approximation. Real-world print color depends on the specific ink set, paper stock, ink absorption rate, registration accuracy and the press's color management profile. Two printers handed the same CMYK file will produce subtly different colors. For production print work, the CMYK values from any free online converter (including this one) are a starting point — your print shop will make adjustments based on their specific workflow. For comps, mockups, specs and design discussions, the calculated CMYK is fine.

CIE LAB — perceptually uniform, the gold standard

CIE LAB (also written CIELAB or L*a*b*) was designed by the International Commission on Illumination in 1976 as a perceptually uniform color space. The defining property of LAB is that equal numerical distances correspond to equal perceived differences — if two colors are 5 units apart in LAB, they look about as different from each other as any other pair of colors that are 5 units apart. RGB doesn't have this property at all (a 10-unit change in the green channel is much more visible than a 10-unit change in the blue channel because human vision is most sensitive to green light). HSL doesn't have it either.

LAB uses three axes: L* for lightness from 0 (black) to 100 (white), a* for the green-red axis (negative is green, positive is red, no fixed range but typically -128 to +127), and b* for the blue-yellow axis (negative is blue, positive is yellow, same range). The conversion from sRGB to LAB goes through several intermediate spaces: first sRGB is converted to linear RGB by undoing the gamma curve, then to CIE XYZ using a 3×3 matrix transform with the D65 illuminant white point, then to LAB using a non-linear function with a cube-root transform. The Color Lab converter does all of this in JavaScript on the client.

Why does LAB matter? Two main reasons. First, color matching: when you need to know if two colors look the same to a human observer (rather than whether they have the same RGB numbers), you compute the Euclidean distance in LAB space — this is called Delta E, and it's the standard metric for color difference in print, photography, paint matching and textile dyeing. Second, perceptual operations: if you want to lighten a color "by 10%" in a way that looks consistent across hues, you do it in LAB space, not RGB. LAB is the color space all professional color management is built on.

OKLCH — modern CSS, better than HSL

OKLCH is a 2020 color space designed by Björn Ottosson, now natively supported in CSS Color Module Level 4. It expresses colors using L (perceptual lightness, 0 to 1 or 0% to 100%), C (chroma, similar to saturation but unbounded — typically 0 to about 0.4 for sRGB colors), and H (hue from 0° to 360°). OKLCH solves a long-standing problem with HSL that you've probably noticed without naming: in HSL, two colors with the same lightness value can look noticeably different in perceived brightness. A yellow at 50% HSL lightness looks much brighter than a blue at 50% HSL lightness because human vision is more sensitive to yellow wavelengths. This makes HSL nearly useless for design systems where you want predictable contrast across hues.

OKLCH uses perceptual lightness instead, the same concept as LAB's L* axis, so a 50% L OKLCH yellow and a 50% L OKLCH blue look about equally bright. The chroma axis is unbounded but in practice tops out around 0.37 for the brightest sRGB colors. The hue axis is the standard 0–360° wheel. OKLCH is the right format for modern CSS design tokens, color palettes that scale predictably across light and dark themes, and any project where you want consistent visual weight across colors. Browsers including Chrome, Safari, Firefox and Edge all support oklch() in CSS as of late 2023 and it's increasingly common in production design systems.

Web-safe colors and Tailwind palette nearest

The "web-safe palette" is a set of 216 colors (6 × 6 × 6 levels of red, green and blue, where each channel is restricted to 00, 33, 66, 99, CC or FF in hex). It was created in the 1990s when 256-color displays were common and any color outside the safe palette would be dithered into a noisy approximation. Modern displays handle 16.7 million colors easily, so the web-safe palette is essentially obsolete — but the Color Lab converter still computes the nearest web-safe color because it's occasionally needed for legacy embedded displays, e-ink screens, very low-bit-depth output and retro design projects.

Far more useful for modern work is the Tailwind palette nearest match. Tailwind CSS ships with a carefully-designed palette of about 220 colors (22 hue families × 10 lightness steps each, from 50 to 950). When you pick a color in any tool and want to know which Tailwind utility class produces the closest match, the converter computes the perceptual distance in LAB space against every color in the Tailwind palette and tells you the nearest one. So you can sample a color from a logo, find out it's closest to indigo-500, and use that class directly in your code.

WCAG contrast and accessibility

The Web Content Accessibility Guidelines (WCAG) define a specific formula for measuring how visually distinguishable two colors are when one is placed on top of the other. The formula computes the relative luminance of each color (a weighted sum of the gamma-corrected RGB channels: 0.2126 × R + 0.7152 × G + 0.0722 × B, after undoing the sRGB gamma curve), then divides the brighter luminance plus 0.05 by the darker luminance plus 0.05. The result is a contrast ratio between 1:1 (no contrast, the same color on itself) and 21:1 (maximum contrast, pure black on pure white).

WCAG defines four pass thresholds: AA normal text requires at least 4.5:1, AA large text (18pt+ or 14pt+ bold) requires 3:1, AAA normal text requires 7:1, and AAA large text requires 4.5:1. The Color Lab analysis bar shows your selected color's contrast ratio against pure white and pure black with pass/fail badges for each threshold, so you can immediately tell whether a color works as a foreground on a white page or a background under black text. Catching contrast failures at the color-picking stage is much faster than running a full accessibility audit after the design is built.

Pantone — the part where we have to be honest

Pantone is a proprietary color matching system used in commercial printing, fashion and product design. The Pantone company sells physical swatch books (the "Solid Coated" book is the standard reference) and licenses their color codes to software vendors. The accurate sRGB or LAB equivalents of Pantone colors are licensed commercial data, not freely available, which is why you almost never see Pantone matches in free online tools — and when you do, they're approximations, not certified equivalents.

The Color Lab converter includes a small dataset of widely-published popular Pantone-style approximations so you can get a rough nearest match for a HEX color. This is useful as a starting point for ballpark conversions ("which Pantone is roughly this brand color?") but it is not accurate enough for production print work. For any project where Pantone color reproduction matters legally or commercially, use an official Pantone Color Bridge guide, your print shop's certified color management workflow, or licensed software with the official Pantone library.

From a single color to a full palette

This converter is focused on doing one color really well — every conversion, every analysis, every export format for one selected color. If your task is the next step ("now build a complete palette around this base color"), the right tool is the LazyTools Color Palette Generator. It takes any base color and generates harmonious palettes — complementary, triadic, analogous, split-complementary and tetradic — with shade and tint ramps for each color, contrast checks across every pair, and export to CSS variables, Tailwind config, SCSS or Figma styles. The palette generator uses the same color math as Color Lab, so the colors you pick here roundtrip cleanly into a full design system.

Frequently asked questions