OKLCH to HSB Converter
OKLCH in, HSB (HSV) out — with the working shown.
To convert OKLCH to HSB, normalise the input, convert OKLCH back to RGB, find max, min and delta, compute the components, then check the gamut. For example, oklch(61.82% 0.1935 258.33) in OKLCH is hsb(215.4 81% 96.9%) in HSB.
This is a free OKLCH to HSB converter. Type or paste any OKLCH into the field above and the HSB value updates as you type, along with every other notation the web understands. HSB is hue, saturation and brightness — the model most native color pickers use internally, also written HSV.
Conversions run entirely in your browser using the same color engine as the rest of the site: values round-trip through linear sRGB and CIE XYZ rather than through an approximation, so what you copy is accurate to the last digit the format can carry.
How to convert OKLCH to HSB
- Normalise the input. Read the OKLCH value and scale each component into the 0–1 range the maths expects.
- Convert OKLCH back to RGB. OKLCH is not the display's native model, so the first move is always back to red, green and blue.
- Find max, min and delta. Take the largest and smallest of the three channels. Their difference drives saturation; which one is largest determines the hue sector.
- Compute the components. Brightness is simply max, saturation is delta / max, and hue comes from the dominant channel.
- Check the gamut. Clamp anything that falls outside what an sRGB display can show, so the value you copy is the value you get.
Worked example: oklch(61.82% 0.1935 258.33) converts to hsb(215.4 81% 96.9%). That color is Dodger Blue, and the tool above shows each intermediate step for whatever value you enter.
Common OKLCH to HSB values
The twenty colors people look up most often, converted from OKLCH to HSB. Every row is computed by the same engine as the tool above.
| Color | OKLCH | HSB |
|---|---|---|
| White | oklch(100% 0 0) | hsb(0 0% 100%) |
| Black | oklch(0% 0 0) | hsb(0 0% 0%) |
| Red | oklch(62.8% 0.2577 29.23) | hsb(0 100% 100%) |
| Lime | oklch(86.64% 0.2948 142.5) | hsb(120 100% 100%) |
| Blue | oklch(45.2% 0.3132 264.05) | hsb(240 100% 100%) |
| Yellow | oklch(96.8% 0.211 109.77) | hsb(60 100% 100%) |
| Cyan | oklch(90.54% 0.1546 194.77) | hsb(180 100% 100%) |
| Magenta | oklch(70.17% 0.3225 328.36) | hsb(300 100% 100%) |
| Silver | oklch(80.78% 0 0) | hsb(0 0% 75.3%) |
| Gray | oklch(59.99% 0 0) | hsb(0 0% 50.2%) |
| Maroon | oklch(37.67% 0.1546 29.23) | hsb(0 100% 50.2%) |
| Olive | oklch(58.07% 0.1266 109.77) | hsb(60 100% 50.2%) |
| Green | oklch(51.98% 0.1769 142.5) | hsb(120 100% 50.2%) |
| Purple | oklch(42.09% 0.1935 328.36) | hsb(300 100% 50.2%) |
| Teal | oklch(54.31% 0.0927 194.77) | hsb(180 100% 50.2%) |
| Navy | oklch(27.11% 0.1879 264.05) | hsb(240 100% 50.2%) |
| Orange | oklch(79.27% 0.171 70.67) | hsb(38.8 100% 100%) |
| Pink | oklch(86.77% 0.0735 7.09) | hsb(349.5 24.7% 100%) |
| Gold | oklch(88.68% 0.1822 95.33) | hsb(50.6 100% 100%) |
| Crimson | oklch(57.12% 0.2219 20.09) | hsb(348 90.9% 86.3%) |
OKLCH and HSB, briefly
OKLCH is OKLab in polar form — perceptual lightness, absolute chroma and a hue angle. Valid range: L 0–100%, C 0–0.37 in sRGB, H 0–360°.
HSB is hue, saturation and brightness — the model most native color pickers use internally, also written HSV. Valid range: H 0–360°, S and B 0–100%.
Frequently asked questions
How do you convert OKLCH to HSB?
1. Read the OKLCH value and scale each component into the 0–1 range the maths expects. 2. OKLCH is not the display's native model, so the first move is always back to red, green and blue. 3. Take the largest and smallest of the three channels. Their difference drives saturation; which one is largest determines the hue sector. 4. Brightness is simply max, saturation is delta / max, and hue comes from the dominant channel. 5. Clamp anything that falls outside what an sRGB display can show, so the value you copy is the value you get. The converter on this page does all of it as you type, and shows the working underneath.
What is oklch(62.8% 0.2577 29.23) in HSB?
Pure red, oklch(62.8% 0.2577 29.23), is hsb(0 100% 100%) in HSB. There is a table of twenty common colors converted to HSB further up this page.
What is oklch(61.82% 0.1935 258.33) in HSB?
oklch(61.82% 0.1935 258.33) converts to hsb(215.4 81% 96.9%). It is a dodger blue, and you can paste any other value into the field at the top of the page to convert it.
Is OKLCH to HSB conversion lossless?
Within sRGB, yes — converting to HSB and back returns the value you started with. The only rounding happens when a component is written out to a fixed number of decimal places.
Can I use HSB directly in CSS?
Not directly — CSS has no HSB function. Convert to HEX, RGB or OKLCH for the stylesheet and keep the HSB value for your design tool.
Does this OKLCH to HSB converter support transparency?
Alpha is preserved wherever the target notation can carry it — eight-digit hex, rgb() / a, hsl() / a and the modern CSS spaces all round-trip an alpha channel. CMYK has no alpha, so it is dropped there.
Is my color data sent anywhere?
No. Every conversion on this site runs in your browser with no network request, no account and no analytics. You can disconnect and it keeps working.