Convert between CSS color formats: hex, rgb, hsl, hwb, oklch, oklab, and color() with live swatch.
CSS Color Function Converter takes a color written as hex, rgb(), hsl(), hwb(), oklab(), oklch(), or color() and expresses that color in the other supported CSS forms. It resolves the entered components as a color, displays the converted coordinates, and provides a live swatch for visual checking. The common surprise is that equivalent colors do not retain similar-looking numbers: HSL, HWB, OKLab, and OKLCH describe color through different coordinate systems, so their component values are not directly comparable.
The converter first interprets the entry according to its CSS notation. Hex and rgb() describe sRGB channel values, hsl() uses hue, saturation, and lightness, and hwb() uses hue, whiteness, and blackness. OKLab and OKLCH use perceptual coordinates. A color() value also identifies the color space associated with its components.
Conversion changes the coordinates used to describe a color, not the intended color itself. Rectangular OKLab coordinates use L, a, and b, while OKLCH expresses the same model with lightness, chroma, and hue. Decimal rounding can make a converted value slightly different after repeated conversions. The swatch helps reveal differences large enough to be visible.
For a color inside the target gamut and output with sufficient precision, the formats should describe the same color closely. No, exact visual identity is not guaranteed in every case. Rounded coordinates can introduce small differences, and a target such as hex cannot preserve a source color that lies outside sRGB. Display capabilities can also change what the swatch shows.
No. HSL lightness and OKLCH lightness belong to different color models and do not have equivalent numeric meanings. Matching their displayed percentages or decimals does not ensure matching appearance. Use the conversion result to preserve a color between formats, but use a dedicated contrast calculation when the actual question is text readability or accessibility.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.