About the Color Converter
CSS colors can be expressed in several different formats — hex, rgb(), hsl(), and the newer oklch() — and design tools, style guides, and codebases don't always agree on which one to use.
This tool converts a single color between hex, RGB, HSL, and OKLCH simultaneously, with a live color picker so you can see and adjust the result visually.
How it works
- Pick a color using the color swatch, or type a value directly into the hex, RGB, or HSL field.
- All four representations (hex, RGB, HSL, OKLCH) update automatically to match.
- Copy whichever format your CSS, design tool, or codebase needs.
Common use cases
- Matching a design system: Converting a designer-provided hex value into HSL to make a lighter or darker variant by adjusting only the lightness channel.
- Modernizing CSS: Converting a legacy hex or RGB color into OKLCH, a perceptually uniform color space increasingly used in modern CSS for more predictable color mixing.
- Debugging a color picker: Confirming that a `hsl(200, 80%, 45%)` value from a design spec corresponds to the exact hex code used elsewhere in a stylesheet.
Frequently asked questions
What is OKLCH and why would I use it?
OKLCH is a newer CSS color format built for perceptual uniformity — equal numeric changes in lightness, chroma, or hue look like equal visual changes, which makes it easier to build consistent color scales (like a 9-step gray palette) than with HSL, where perceived brightness can shift unexpectedly.
Why do RGB and HSL show slightly different rounded values than I typed?
Color conversions between spaces (especially HSL) can introduce small rounding differences due to floating-point math; the tool rounds values for display, so re-entering a rounded HSL value may shift the hex code by a tiny amount.
Does this tool support alpha transparency?
This converter focuses on solid RGB/HSL/OKLCH/hex color values without an alpha channel; for transparency, you can typically append an alpha component (like `rgba()` or an 8-digit hex) manually once you have the base color.
Why does typing an invalid hex show 'Invalid color'?
The hex field expects a valid 3- or 6-digit hex code starting with #; anything else (a typo, missing #, or wrong digit count) can't be parsed into RGB and is flagged instead of silently guessing.
This tool runs entirely in your browser — nothing you enter is sent to a server. Read more in the Privacy Policy, or browse the full list of tools.