HEX, RGB, HSL & OKLCH Color Converter

CSS color has quietly grown far beyond hex codes and rgb(). Modern stylesheets increasingly mix HEX, RGB, HSL, and the newer OKLCH format, sometimes within the same design system, and converting between them by hand means running mental math that is easy to get wrong. This tool converts instantly in every direction, paste any format and get the other three back immediately, along with a live preview swatch.

HEX, RGB, and HSL: the familiar three

HEX represents a color as a six digit hexadecimal number, two digits each for red, green, and blue, compact and common in design tools. RGB expresses the same information as three decimal numbers from 0 to 255, more readable at a glance for anyone doing quick manual adjustments. HSL describes a color by hue, saturation, and lightness instead, often more intuitive for tasks like generating a lighter or darker variant of a brand color, since you can adjust lightness directly rather than recalculating three separate red, green, and blue values.

OKLCH, and why it behaves more predictably than HSL

OKLCH, based on the OKLab perceptual color space, expresses a color as lightness, chroma, and hue, similar in spirit to HSL but built on a fundamentally different foundation. HSL's lightness value is a mathematical convenience, not a measure of how bright a color actually appears to the human eye, two HSL colors with identical lightness values can look noticeably different in perceived brightness depending on their hue. OKLCH's lightness is designed to be perceptually uniform instead, meaning a lightness value of 70% looks roughly equally bright regardless of whether the hue is blue, yellow, or red, which makes generating a consistent, predictable color scale, or ensuring accessible contrast across a palette, meaningfully more reliable than doing the same work in HSL.

OKLCH can represent colors HEX and RGB cannot

Traditional HEX and RGB values are bound to the sRGB color gamut, the range of colors a standard monitor has historically been able to display. OKLCH, as a CSS color function, supports wider gamuts like Display P3, used by most modern phone and monitor screens, capable of representing more saturated colors than sRGB can reach, particularly in greens and reds. This tool's conversions work within the standard sRGB space in both directions, matching what a HEX or RGB value can represent, so every conversion here stays safely within a gamut every browser and screen can reproduce accurately.

Pasting a color in any format

Rather than requiring you to select which format you are pasting, this tool detects it automatically, a HEX code with or without the leading #, an rgb() or rgba() function, an hsl() or hsla() function, or an oklch() function are all recognized directly. The color picker swatch stays in sync in both directions too, adjust the color visually and the format field updates, or paste a value and the picker reflects it, whichever direction is more convenient for what you are doing.

Runs entirely in your browser

All conversion math, including the sRGB to linear light to OKLab to OKLCH pipeline, runs directly in your browser using standard, published color science formulas. Nothing you paste is sent to a server. If you are building out a full color scale rather than converting a single value, our Image to Tailwind Palette generator creates a complete 50 to 950 shade scale from any base color, and our SVG Palette Extractor pulls exact color values directly from existing SVG artwork, both part of the same Developer Utilities collection this tool belongs to.