Color Format Converter
Enter a color in any CSS syntax and see it as HEX, RGB, HSL, HWB, LAB, LCH, OKLCH and OKLAB at once, with a live swatch. Everything converts in your browser.
The Color Format Converter parses and converts every color locally in your browser. The values you type or paste never leave your device and nothing is uploaded to ArrayKit.
Open the CSS Color Converter
About Color Format Converter
The Color Format Converter takes a single color written in any CSS syntax — a hex like #7c3aed, an rgb() or hsl() value, hwb(), lab(), lch(), oklch(), oklab(), or a named color such as rebeccapurple — and shows it simultaneously in every other notation. You get HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH and OKLAB, plus the nearest CSS named color and a live swatch, each ready to copy. It is built for designers and front-end developers who are migrating a palette to modern spaces like OKLCH, matching a color across a design tool and stylesheet, or checking how a value looks in a perceptually uniform space. Alpha is preserved end to end. Every parse and conversion runs locally in your browser, so the colors you enter never leave your device.
Features
- Enter a color in any CSS syntax — hex, rgb(), hsl(), hwb(), lab(), lch(), oklch(), oklab() or a named color
- See HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH and OKLAB side by side, updated as you type
- One-click copy for every individual format
- Live swatch on a checkerboard so transparency is obvious
- Nearest CSS named color surfaced for any input
- Alpha is preserved across HEXA, rgba()/hsla() and the modern `/ a` syntax
- OKLCH and OKLAB output for migrating palettes to perceptually uniform spaces
- Runs entirely in your browser — the colors you enter are never uploaded
How to use the Color Format Converter
- Type or paste a color into the input in any CSS format
- Read the live swatch to confirm you entered the right color
- Copy the notation you need — HEX, RGB, HSL, HWB, LAB, LCH, OKLCH or OKLAB
- Grab the nearest named color when you want a readable label
Example
Input
#7c3aed
Output
rgb(124, 58, 237)
hsl(262, 83%, 58%)
oklch(0.5413 0.2466 292.94)
One hex expands into every CSS color notation at once.
Common errors & troubleshooting
- The input shows "Couldn’t parse that color." — Check the syntax matches a real CSS color — e.g. #7c3aed, rgb(124 58 237), hsl(262 83% 58%) or a valid color name. Stray characters or a missing % break parsing.
- OKLCH or LCH values look slightly different after a hex round-trip. — Converting through a wider space and back rounds each channel, so a value can shift by a point or two. The swatch stays visually identical.
- The nearest named color says nothing is close. — Only 148 CSS names exist, so a custom brand color often has no near match. Use the HEX or OKLCH value instead of a name.
- Alpha disappeared from the output. — Alpha is only shown when it is below 1. A fully opaque color emits plain #rrggbb, rgb() and hsl() without an alpha tail.
Frequently asked questions
- Which color formats does this converter output?
- It shows HEX(A), RGB(A), HSL(A), HWB, LAB, LCH, OKLCH and OKLAB simultaneously, plus the nearest CSS named color, for whatever color you enter.
- What is OKLCH and why would I convert to it?
- OKLCH is a perceptually uniform color space where lightness, chroma and hue behave predictably. Designers migrate palettes to it because interpolating and lightening colors in OKLCH looks more even than in HSL or RGB.
- How is the nearest named color chosen?
- Your color is compared against the 148 CSS named colors by distance in RGB, and the closest match is returned. When nothing is genuinely close, the tool says so rather than suggest a misleading name.
- Does the converter keep the alpha channel?
- Yes. A translucent color is shown as HEXA (#rrggbbaa), as rgba()/hsla(), and with a `/ 0.5` alpha tail on HWB, LAB, LCH, OKLCH and OKLAB. Opaque colors omit the alpha entirely.
- Can I paste an oklch() or lab() value as the input?
- Yes. The input accepts any CSS color syntax, including oklch(), oklab(), lab(), lch() and hwb(), and converts it into every other format the same way it handles hex or rgb().
- Do the colors I enter get sent to a server?
- No. Parsing and every conversion run locally in your browser, so the colors you type or paste never leave your device and are not uploaded to ArrayKit.
Related tools
- CSS Color Converter — Convert between HEX, RGB and HSL with a live swatch.
- Contrast Checker — Check WCAG colour contrast ratio and AA/AAA pass for any two colours.
- Tailwind Color Generator — Generate a full 50-950 Tailwind color scale from one brand color, with config-ready output.
- Image Color Picker — Upload an image and pick colors from any pixel to get HEX, RGB and HSL values, in your browser.
- SVG to PNG Converter — Convert SVG to PNG or JPG at any scale, with a transparent or solid background, in your browser.
- CSS Unit Converter — Convert between px, rem, em, pt and % live with a configurable root font size.
All ArrayKit tools