HEX, RGB, HSL and OKLCH: which colour format should you use?
Choose by the job, then check precision, transparency and the colour space.
Free toolColour ConverterConvert HEX, RGB, HSL, OKLCH and more. Keep opacity, check gamut and export a whole palette.Convert a colourWhich format should you choose?
Use HEX for a compact web colour, RGB for channel values and OKLCH for perceptual adjustments. Printing needs a colour profile.
| Your task | Format | Watch for |
|---|---|---|
| A compact CSS value | HEX | Eight-digit CSS HEX puts alpha last. |
| A channel calculation or canvas colour | RGB | CSS values use sRGB. A bare RGB triplet does not identify every RGB colour space. |
| Adjusting a familiar hue | HSL | Equal lightness numbers do not guarantee equal perceived brightness. |
| A consistent perceptual colour ramp | OKLCH | Some lightness and chroma combinations fall outside your display’s gamut. |
| A wide-gamut CSS colour | Display P3 | Keep an sRGB fallback and test on the screens you support. |
| Preparing print artwork | Profile-managed CMYK | Ask your printer for its ICC profile and proofing requirements. |
Convert HEX to RGB by splitting the pairs
#336699 becomes rgb(51 102 153). The three pairs describe red, green and blue in base 16.
Red: 33
3 × 16 + 3 = 51.
Green: 66
6 × 16 + 6 = 102.
Blue: 99
9 × 16 + 9 = 153.
RGB to HEX reverses this calculation. Each integer channel becomes a two-digit hexadecimal pair. The range is 0 to 255.
Short HEX expands each digit twice. #369 means #336699, not #030609. Decimal RGB channels round when converted to HEX.
HSL lightness and HSV brightness are different
The same blue has HSL lightness of 40% and HSV brightness of 60%. Those numbers measure different properties.
| Representation of #336699 | Why this value |
|---|---|
| HSL: 210°, 50%, 40% | Lightness averages the largest and smallest RGB channels: (0.6 + 0.2) / 2 = 0.4. |
| HSV: 210°, 66.667%, 60% | Value takes the largest channel: 0.6. Saturation is (0.6 − 0.2) / 0.6. |
| OKLCH: 0.499314, 0.098664, 250.43305° | The hue angle belongs to a different colour space. You cannot substitute HSL’s 210°. |
HSV is also called HSB in design software. It is useful for matching those controls, but hsv() is not a CSS function.
Keep alpha when converting transparent colours
CSS HEX stores alpha last. #33669980 contains RGB 51, 102, 153 and alpha 128/255.
The exact alpha is about 50.1961%. It is close to 50%, but differs because a byte has only 256 possible values.
| Input | Converted value | Consequence |
|---|---|---|
| rgb(51 102 153 / 50%) | #33669980 | Alpha rounds to 128. |
| #33669980 | rgb(51 102 153 / 0.501961) | Alpha is read back from the byte. |
| rgb(51 102 153 / 50%) | hsl(210 50% 40% / 0.5) | Fractional alpha stays at exactly 0.5. |
Android’s alpha-first notation uses a different order. Reorder #80336699 to CSS #33669980. The digits alone cannot reveal which convention you meant.
Why OKLCH to HEX can change a colour
HEX represents sRGB. An OKLCH or Display P3 colour can describe something outside that smaller space.
For example, Display P3 green color(display-p3 0 1 0) converts to extended sRGB channels outside 0 to 1. Clipping those channels produces #00ff00.
That HEX value is a fallback, not an exact match. floi flags this conversion and retains the original colour in its perceptual and P3 outputs.
Why RGB to CMYK is only an estimate
A simple formula cannot predict how ink looks on paper. A print match depends on the output profile and printing conditions.
For #336699, floi’s unprofiled estimate is C 66.667%, M 33.333%, Y 0%, K 40%. Nix returned 86%, 60%, 17%, 2% for the same HEX in our test.
Different conversion methods explain different numbers. Neither result proves a match on your printer. For production, use Photoshop, Affinity or another colour-managed application with the profile your printer supplies.
Worked examples and precision checks
These examples were run through floi’s conversion module on 4 October 2026. All inputs were synthetic numerical colours.
| Input | Result checked |
|---|---|
| #336699 | RGB 51 102 153; HSL 210° 50% 40%; CSS Lab D50 41.5208, −4.5731, −33.4942. |
| #33669980 | HEX alpha remained 80. RGB alpha became 0.501961. |
| color(display-p3 0 1 0) | Outside sRGB warning; clipped HEX #00ff00; P3 output remained 0 1 0. |
| 4,096 RGB samples | Converted out and back through nine reversible formats. Largest observed channel error: 0.008018 on the 0–255 scale. |
The sample grid used 0, 17, 34 through 255 on each RGB channel, with alpha 0.37. It checked rounded outputs from RGB, HSL, OKLCH, HWB, HSV, OKLab, Lab, LCH and P3.
HEX and CMYK were excluded from that precision figure. HEX quantises channels and alpha; CMYK is an unprofiled estimate. This grid is not a proof for every possible colour.
Sources and further reading
CSS Color 4 defines the syntax and colour-space conversions. Björn Ottosson’s OKLab reference explains the perceptual model.
MDN’s HEX colour reference covers alpha order. The International Color Consortium explains what ICC profiles describe.