Colour Converter
Convert colours between HEX, RGB, HSL, and oklch instantly in your browser. See colour preview and all format representations side by side.
Colour Converter
Runs entirely in your browser — no server calls, no tracking.
Enter a colour and click Convert.
🔒 Your data never leaves this tab. This tool has no backend.
About the Colour Converter
Different CSS colour formats are suited to different workflows. HEX is compact and universal — most design tools export it. RGB gives direct control over red, green, and blue channels, useful for colour mixing in code. HSL (Hue, Saturation, Lightness) maps to how humans perceive colour — easier to adjust brightness or desaturate a colour without trial and error. oklch is the modern perceptually-uniform colour space used in the ruxox design system and in CSS Color Level 4.
Why oklch?
HSL is not perceptually uniform — a green and a blue with the same lightness value look different to human vision. oklch (OKLab Chroma and Hue) corrects this: colours at the same L value actually look the same brightness. This makes it ideal for generating colour palettes programmatically — you can adjust chroma or hue without accidentally changing perceived lightness. The ruxox design system uses oklch tokens throughout for this reason.
Color space support in browsers
All modern browsers (Chrome, Safari, Firefox, Edge) support oklch and the full CSS Color Level 4 syntax. oklch(60% 0.15 180) is a valid CSS value. For older browser support, use @supports (color: oklch(0% 0 0)) to check, or provide an HSL fallback. P3 colour gamut (wider than sRGB) is supported on Safari/iOS and Chrome on supported displays — oklch colours with high chroma may exceed the sRGB gamut and appear differently on non-P3 screens.
HEX, RGB, HSL and the newer colour spaces
Every colour format below describes the same visible colour; they differ in how you reason about it.
| Format | Example | Good for |
|---|---|---|
| HEX | #3366CC | Design handoff, CSS, brand guidelines |
| RGB | rgb(51, 102, 204) | Code that manipulates channels |
| HSL | hsl(220, 60%, 50%) | Building tints and shades by hand |
| OKLCH | oklch(52% 0.16 265) | Perceptually even palettes |
How HEX to RGB conversion works
A hex colour is three pairs of hexadecimal digits for red, green and blue, each 00–FF (0–255 in decimal). So #3366CC is red 33 = 51, green 66 = 102, blue CC = 204 — giving rgb(51, 102, 204). Shorthand like #36C expands by doubling each digit to #3366CC. An eight-digit hex adds an alpha channel: #3366CC80 is roughly 50% opaque.
Why HSL is easier to work with
Adjusting a hex value by eye is guesswork. HSL splits colour into hue (the angle on the colour wheel), saturation and lightness, so a lighter version of the same colour is the same hue with higher lightness. That makes generating a consistent tint scale straightforward.
Contrast and accessibility
Converting a colour is only half the job — the pairing has to be readable. WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Lightness in HSL is not a reliable proxy: two colours with the same lightness value can have very different measured contrast, because perceived brightness varies by hue.
Frequently asked questions
Split the hex value into three pairs and convert each from hexadecimal to decimal. #3366CC gives 33 = 51 red, 66 = 102 green, CC = 204 blue, so rgb(51, 102, 204). Three-digit shorthand like #36C expands by doubling each digit first. Paste any value above to convert instantly.
The last two digits are an alpha (opacity) channel, from 00 for fully transparent to FF for fully opaque. So #3366CC80 is the same blue at roughly 50% opacity. It is equivalent to rgba() in CSS and is supported in all current browsers.
When you are building variations of a colour by hand. HSL separates hue, saturation and lightness, so a lighter tint is the same hue with a higher lightness value — predictable in a way that nudging hex digits is not. HEX remains better for brand guidelines and design handoff.
No. HEX, RGB and HSL are three ways of writing the same sRGB colour, and conversion between them is lossless. Newer spaces like OKLCH can express colours outside sRGB, so converting those back to hex may clip to the nearest displayable value.
Measure the contrast ratio rather than judging by eye. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. Do not rely on HSL lightness as a shortcut — two colours with identical lightness values can have very different real contrast, because perceived brightness depends on hue.
@media (color-gamut: p3) query to target P3 screens specifically.Need a custom design system or frontend built?
ruxox builds production-grade web products with systematic design tokens, oklch color systems, and consistent UI.