Color Converter

How to use this color converter

Use this converter when the same color needs to move between CSS, design documentation, QA notes, or design-system tokens.

Color Converter features

Color formats supported

Hex, RGB, and HSL are widely supported CSS color formats. OKLCH and Lab are perceptual color spaces, which makes them useful for modern design systems because lightness and chroma changes tend to behave more like people expect.

This is useful when a color comes from one tool but needs to be used somewhere else. A designer may hand off OKLCH values, a brand guide may list hex codes, a browser inspector may show RGB, and a CSS file may need HSL for easier manual adjustments. Seeing the formats together reduces the chance of copying the wrong value.

The preview swatch is included as a quick sanity check. It will not replace accessibility testing or device review, but it helps confirm that the parsed color is the one you intended before you paste it into production code or documentation.

• Hex to RGB, HSL, OKLCH, and Lab
• RGB to hex, HSL, OKLCH, and Lab
• HSL to hex, RGB, OKLCH, and Lab
• OKLCH to hex, RGB, HSL, and Lab
• Lab to hex, RGB, HSL, and OKLCH
• CSS color names to hex, RGB, HSL, OKLCH, and Lab

How this color converter works

The converter parses the input as a CSS color, converts the parsed value into each target color space, and rounds channel values for readable CSS output. Alpha values are preserved when the input includes transparency.

Color conversions are not just string formatting. Different spaces describe color in different ways: RGB describes channels of light, HSL describes hue with saturation and lightness, while Lab and OKLCH model color more closely to human perception. Moving between them can introduce tiny decimal differences, especially after rounding.

When browser compatibility matters, hex, RGB, and HSL remain the safest choices. OKLCH is helpful for modern CSS and design-system work, particularly when you want more predictable adjustments to lightness and chroma.

Color converter FAQ

Convert color values without assuming they will look identical

A color notation describes coordinates in a color space. Hex and common rgb() values usually describe sRGB components, while HSL rearranges an sRGB color into hue, saturation, and lightness controls. Lab and OKLCH are designed around perceptual relationships. Converting the same color between them should preserve appearance only within the assumptions and gamut of the source and destination.

Display gamut creates an important limit. A color expressible in OKLCH or Lab may sit outside sRGB, so converting it to a hex value requires clipping or mapping. The resulting sRGB color can be less vivid or shift slightly. Keep the wider-gamut source value when the design system supports it, and inspect the fallback rather than trusting matching decimals.

Rounding also changes round trips. An eight-bit RGB channel has a finite set of values, while a percentage or floating-point notation can show more digits. Repeatedly converting and rounding can drift from the original. Save one canonical source value and generate other formats from it instead of using each output as the next input.

Hue is unstable near neutral colors. When chroma or saturation is close to zero, large changes in the displayed hue may make almost no visible difference. Do not interpret that hue number as meaningful for gray. In a design token system, name neutral roles by purpose—such as border or muted text—rather than by a nominal hue.

Alpha is separate from the opaque color. A translucent foreground blends with whatever is behind it, so its final appearance and contrast depend on the background. Preserve the alpha channel when the selected format supports it. For accessibility review, composite the color over the actual background before calculating contrast.

The CSS Color Module Level 4 specification defines modern CSS color functions and conversion details. Browser support and serialization can still vary, especially for newer spaces. Test the exact syntax in the browsers required by the project and provide an sRGB fallback when the support policy calls for one.

A numeric conversion cannot account for color management outside the browser. Image editors, printers, operating-system pickers, embedded profiles, and export settings may use different working spaces. For a brand or print job, agree on the source profile and proof the output on the intended device. A screenshot is not a dependable color reference.

After converting a palette, use the color contrast checker for foreground and background pairs. Contrast is only one accessibility property, but it catches failures that a visually pleasing conversion can introduce. Also review focus states, links, disabled controls, charts, and meaning conveyed by color.

Production checklist