Color Format Converter.

Color formats explained.

This tool converts between four color formats: HEX, RGB, HSL, and OKLCH. Each format represents colors differently, and different tools and contexts require different formats.

HEX (#3366ff) is the most compact web format — six characters representing red, green, and blue channels in base-16. It's used in CSS, HTML, and design tools. A three-character shorthand (#36f) is equivalent when each pair has identical digits.

RGB (rgb(51, 102, 255)) uses decimal values for each channel. It's the native format for screens and is used in CSS, Canvas, and WebGL. Values range from 0 to 255 per channel.

HSL (hsl(225, 100%, 60%)) represents hue, saturation, and lightness. It's more intuitive for humans — adjusting lightness makes a color lighter or darker without changing its hue. CSS supports HSL natively.

OKLCH (oklch(0.6 0.2 265)) is a modern perceptual color space. Unlike HSL, OKLCH's lightness component matches human perception — a color with lightness 0.5 actually looks halfway between black and white. CSS Color Level 4 supports OKLCH natively.

When to use each format.

Use HEX for CSS properties, design tokens, and anywhere you need a compact color string. Use RGB when working with Canvas, WebGL, or programmatic color manipulation. Use HSL when you need to adjust lightness or saturation programmatically. Use OKLCH for accessible color systems where perceptual uniformity matters.

This tool accepts any of the four formats as input and shows all four conversions in the output. Paste a HEX value, an RGB function, an HSL function, or an OKLCH function — the tool detects the format and converts to all others.

Why OKLCH matters for design systems.

Traditional color spaces like HSL have a fundamental problem: equal changes in lightness values do not produce equal changes in perceived brightness. A blue at HSL lightness 50% looks much darker than a yellow at the same lightness value. This makes it difficult to create consistent color palettes where all colors appear equally bright.

OKLCH solves this by using a perceptually uniform color space. When you set OKLCH lightness to 0.7, every color at that lightness level appears equally bright to the human eye. This makes OKLCH ideal for building design systems, creating accessible color scales, and generating harmonious palettes where colors feel balanced.

CSS Color Level 4 supports OKLCH natively, so you can use oklch(0.6 0.2 265) directly in stylesheets without any conversion. Modern browsers including Chrome, Firefox, and Safari have full support. Using OKLCH in your CSS makes it straightforward to create color variations by adjusting only the lightness or chroma component.

Building accessible color systems.

WCAG contrast requirements mean your text colors must have sufficient contrast against their backgrounds. OKLCH makes this easier because you can adjust lightness directly to meet contrast ratios without accidentally shifting the hue or saturation. Darken a color by reducing its OKLCH lightness value until it passes the contrast check.

When generating a palette from a single brand color, convert it to OKLCH first, then create lighter and darker variants by stepping the lightness value up and down. This produces a smooth gradient of accessible colors that all feel related because they share the same hue and chroma.

Color format tips.

HEX is case-insensitive — #FF6600 and #ff6600 are identical. Short-hand HEX like #f60 expands to #ff6600. When working with design tools, export colors as HEX for compatibility, then convert to OKLCH in your CSS for the best of both worlds.

For programmatic color manipulation, RGB is the most straightforward since channels map directly to 0-255 integer values. HSL is better for creating tints and shades — keep the hue and saturation constant while adjusting lightness. OKLCH combines the intuitiveness of HSL with perceptual accuracy.