Colour converter
Convert between HEX, RGB, HSL and OKLCH.
FreeRuns in your browserNo signupUpdated 2026-10-29
OKLCH colours outside the sRGB gamut are clipped to the nearest displayable value.
Preview
#2f6bff
Relative luminance 0.183. White text reads best on it.
--brand: #2f6bff; --brand-rgb: rgb(47 107 255); --brand-hsl: hsl(222.7 100% 59.2%); --brand-oklch: oklch(58.1% 0.229 263.9);
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This hex to rgb converter takes one colour in any common CSS syntax and shows it in HEX, RGB, HSL and OKLCH at once. Paste a value from a design file, a brand guide or a stylesheet and copy the format your code needs. It also reports relative luminance, which tells you whether white or dark text will read better on that colour. Nothing is sent anywhere; the conversion runs in your browser.
How to use it
- Paste a colour into the box.
#2f6bff,rgb(47 107 255),hsl(223 100% 59%)andoklch(58% 0.23 264)all work, as do short hex codes like#f60. - Or use the picker if you would rather choose by eye.
- Read the five rows on the right and press Copy beside the one you want.
- The CSS block at the bottom bundles every format as custom properties for a design tokens file.
How to read the result
Take #2f6bff. The converter reports rgb(47 107 255), meaning a little red, a moderate amount of green and full blue. The HSL line reads hsl(222.7 100% 59.2%): a hue of about 223 degrees puts it in the blue band, 100% saturation means it is as vivid as that hue can be, and 59% lightness means it sits just above the midpoint between black and white. The OKLCH line, oklch(58.1% 0.229 263.9), says the perceived lightness is 58%, chroma is high at 0.229, and the hue angle is 264. Note that OKLCH hue angles do not line up with HSL ones; the same blue is 223 in one and 264 in the other.
The luminance figure under the preview is 0.183. Anything below about 0.4 is dark enough for white text; above that, dark text reads better. For an exact contrast ratio, run the two colours through the contrast checker.
Modern CSS accepts the space-separated syntax shown here. If you support older browsers, the "RGB (legacy)" row uses commas instead.
If you are choosing a palette for a new site, our website design and development team starts every project with a small set of tokens in this form.
Questions
Frequently asked.
What is the difference between RGB and HSL?
Both describe the same colour. RGB gives the amount of red, green and blue light, which is how screens work. HSL gives hue, saturation and lightness, which is how people think about colour, so it is easier to make a slightly darker or less vivid version by hand.
Why would I use OKLCH?
OKLCH spaces colours by how they look to the eye, not by how a screen mixes light. Two OKLCH colours with the same lightness value really do look equally light, which HSL cannot promise. It also reaches colours outside sRGB on modern displays, and Tailwind v4 uses it for its whole palette.
Does the converter handle transparency?
It reads an eight-digit hex or an alpha value in rgb() and hsl() but reports the opaque colour only. Alpha is a separate channel that every format expresses the same way, so there is nothing to convert; add it back as a fourth value where you use the colour.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide