OKLCH to HEX, without pasting your colour into someone else's server

Full disclosure first: I work on OnePassApps.

Design in a modern tool and you get OKLCH. Hand the colour to a developer and you get hex. The gap between the two is usually bridged by a converter website, and pasting work into a random form to move a number from one notation to another is a habit worth breaking - especially when the number is the only thing you sent.

The Colour Studio in OnePassApps has a Picker tab that converts between HEX, RGB(A), HSL(A) and OKLCH inside the tab, and reads the contrast of the same colour while you are there.

Open it here: the Colour Studio

What the page says about itself

The studio headline is "Pick, convert, compare and sample colours on this device. Your values and selected images stay in this browser tab."

Four tabs sit under it: Picker, Contrast, Palettes and Image. The Picker tab is the one that does the converting, and it is laid out as three numbered steps.

01 Colour - one field, four accepted formats. The hint under it reads: "Type or paste HEX, RGB(A), HSL(A) or OKLCH. Arrow keys move a thumb, Shift moves 10."

02 Saved swatches - the panel is labelled "This visit", so a swatch you keep is a short-lived thing rather than a palette you come back to in a week.

03 Export - two ready-to-paste outputs: CSS as --colour: #6458D6; and RGBA as rgb(100, 88, 214). Underneath the panel states "Nothing leaves this tab."

Below the three steps sit four more blocks:

  • CONVERSIONS - the same colour in HEX, RGB, HSL and OKLCH at once.
  • CONTRAST ON THIS COLOUR - white text and black text ratios with a pass or fail against the WCAG levels.
  • TINTS & SHADES - six shades around the colour, with a note on which one reads best with white text.
  • KEYBOARD - "Move a thumb" on "Arrow keys", "Move by 10" on "Shift + arrows", "Apply a swatch" on "Enter".

Four formats, one value

I typed a hex value into the field and pressed Enter. #2F6F4F came back as:

  • HEX: #2F6F4F
  • RGB: rgb(47, 111, 79)
  • HSL: hsl(150 41% 31%)
  • OKLCH: oklch(49% 0.08 159)

The export panel updated with it at the same time, giving --colour: #2F6F4F; and rgb(47, 111, 79).

After the OKLCH run the same export panel read --colour: #4BA3F7; and rgb(75, 163, 247).

Then I switched the format dropdown to OKLCH - it offers HEX, RGB, HSL and OKLCH - and typed a colour in OKLCH instead: oklch(70% 0.15 250). The same field gave back:

  • HEX: #4BA3F7
  • RGB: rgb(75, 163, 247)
  • HSL: hsl(209 91% 63%)
  • OKLCH: oklch(70% 0.15 250)

Because the contrast block reads from the same value, it changed with it. On #4BA3F7 the panel reported white text at "2.66:1 contrast ratio" - failing AA large and AA - and black text at "7.88:1", passing AA and AAA. The tints block changed with it too, to "Reads best with black text (7.88:1)."

The parts that do not work the way you might hope

Being straight about the edges:

  • Saved swatches are labelled "This visit", so do not treat them as a stored palette.
  • There is a "Pick from screen" button next to the export step. I did not exercise it in this pass, so treat that path as untested.
  • The contrast block checks white text against black text only. If your background is a colour, read the ratio against the text colour you are actually using.
  • This tab converts and picks. It does not sample an image - that is a different tab.

The other three tabs

I have written the rest of the studio up separately, because each tab does a different job:

What it costs

Standard is free right now: $0 / month, 100,000 credits every 30 days, no end date set, no card required, and no automatic paid subscription. Existing paid subscriptions keep their terms.

If you want the longer version of the studio, the app guides walk through each tab.