How Color Formats Work: HEX, RGB, HSL, and OKLCH

Overview

A color format is just a different way of writing the same color. A screen mixes red, green, and blue light for every pixel, and each format describes that mix from a different angle: HEX and RGB name the raw channels, HSL and HSV describe hue and brightness, OKLCH describes how light a color actually looks, and CMYK approximates printer inks. This color format converter turns any one of them into all the others at once so you can copy exactly the value your tool expects.

Why it matters

Different tools speak different color dialects. A design file hands you a hex code, a CSS variable wants rgb() or oklch(), and a print mockup needs CMYK. Retyping a color by eye across those formats invites mistakes and drifts your brand color. Converting once, accurately, keeps a single color identical everywhere it appears, which is the difference between a consistent design system and a slightly-off palette.

How it works

Every conversion routes through sRGB, the color space your screen uses. The tool parses your input into red, green, and blue channels, then derives each format from there. So what does a HEX color encode? Two hexadecimal digits per channel, which is why hex to rgb is a direct read and rgb to hex is its exact inverse. RGB writes those channels as 0 to 255 numbers, and HSL and HSV as hue plus brightness. OKLCH converts the channels into a perceptually uniform space so its lightness matches what the eye sees, and CMYK is a direct formula that estimates ink coverage. This single hub is all of color format conversion, and alpha transparency is preserved through the formats that support it.

Examples

For example, enter #3366ff and the color format converter shows rgb(51, 102, 255), hsl(220, 100%, 60%), and oklch(0.55 0.23 264). As another example, the name teal resolves to #008080 and rgb(0, 128, 128). Enter an 8-digit hex like #3366ff80 and the alpha of 0.5 carries into the rgba and hsla outputs. Each row has its own copy button, so grabbing just the OKLCH value takes one tap.

Common mistakes

• Trusting CMYK as a print proof. The CMYK here is a screen-based approximation. For accurate print color, use your printer's ICC profile.
• Assuming HSL lightness is perceptual. Two HSL colors with the same lightness can look very different in brightness. OKLCH is the format that fixes this.
• Dropping alpha. If your color has transparency, copy from a format that keeps it, such as the rgba or oklch output, not the 6-digit hex.

Comparisons and alternatives

When you compare the color format converter vs alternatives like single-direction hex-to-rgb pages, the difference is breadth: this tool shows all six formats together, including modern OKLCH that many older converters omit. On the question of HSL vs OKLCH for building shades, choose HSL when you want to nudge hue by hand, and OKLCH when you are building even shade scales or gradients, because its lightness is perceptual. Once you have a color you like, the natural next step is the WCAG Color Contrast Checker, which tells you whether that color is readable on its background.

Private by design

Every conversion happens in your browser. No color you enter is uploaded or stored on a server, and the tool keeps working with no network once loaded, so you can install it and use it offline.