Convert colours between formats

Converting a colour is a small job that appears constantly, usually in the middle of doing something else. A design tool gives you hex, a stylesheet wants rgb with an alpha, a chart library takes hsl, and a modern palette is defined in oklch.

This takes a list and returns every one of them.

One per line, because a palette is what you have

Colours rarely arrive alone. What you have is a block of hex values copied out of a design file, or a set of custom properties from a stylesheet, and converting them one at a time is the tedious part.

Each line is parsed independently, so a mixed list works: some hex, some rgb, some hsl, in any order. A line that is not a colour is reported as such and left in place rather than silently dropped, so the output lines up with the input and you can see which one was the problem.

What the formats are for

Hex is compact and universal and says nothing about how a colour will look. It is a memory layout.

RGB is the same information with the numbers visible, which is useful when you need to adjust a channel or hand a value to something that takes three numbers.

HSL is the first format that tries to be about perception rather than storage, and it half succeeds. Hue, saturation and lightness are the right ideas, but its lightness is a geometric average of the channels rather than anything the eye agrees with. Pure yellow and pure blue both have 50% lightness in HSL and one of them is far brighter than the other.

OKLCH fixes exactly that. Its lightness tracks perceived lightness closely enough that two colours with the same L look about equally bright, which is why palettes built by rotating the hue in OKLCH stay even where the same trick in HSL produces a set where some colours dominate. It is also the format to reach for when a colour has to pass a contrast requirement, because lightness is the axis that moves contrast.

The same parser as the contrast checker

This uses the colour parsing and formatting already behind the contrast checker on this site, rather than a second implementation.

That matters more than it sounds. Two colour tools on one site that round differently, or disagree about how to write an alpha value, produce a real bug: a value copied from one page into the other comes back subtly different, and the difference is small enough to be mistaken for a display artefact rather than a conversion error.

Everything runs in this tab. No colour is sent anywhere, and there is no request to make.