What is the difference between RGB and RGBA?

RGBA adds an alpha channel to RGB. The alpha value controls the opacity of the colour: 0 is fully transparent, 1 is fully opaque, and values in between create semi-transparency. RGBA is used in CSS fo

What are 3-digit HEX codes?

A 3-digit HEX code is shorthand for a 6-digit code where each pair of digits is identical. For example, #FFF is the same as #FFFFFF (white), and #09C is the same as #0099CC. This tool accepts both for

Which colour format should I use in CSS?

All modern browsers support HEX, RGB, RGBA, and HSL equally well. Use HEX for solid colours when you want concise code. Use RGBA when you need transparency. Use HSL when you want to create colour vari

What is HSL and why is it useful?

HSL stands for Hue, Saturation, Lightness. Hue is the colour angle on a colour wheel (0° is red, 120° is green, 240° is blue). Saturation is how vivid or grey the colour is. Lightness controls how bri

HEX to RGB Colour Converter

Enter a HEX code or pick a colour — get RGB, RGBA, HSL, HSV, CMYK, OKLCH and CSS variable values instantly. Click any result to copy it.

hex-rgb.tool

HEX Colour Code

Pick a Colour

RGB Sliders

G212

B255

Common Colour Reference

Quick Colours

Going From Design File to Code

Design tools like Figma and Adobe XD show colour in HEX. CSS accepts HEX, RGB, HSL, OKLCH and named colours. Print requires CMYK. This tool converts any HEX code into all formats simultaneously — paste your colour from the design handoff and copy whatever format your next step needs.

Colour Formats Explained

RGB — Three values 0–255 for Red, Green, Blue. The standard screen colour model.
RGBA — Same as RGB with an alpha channel (0–1) for transparency.
HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Used in CSS. Lightness 100% is always white.
HSV / HSB — Hue, Saturation, Value (Brightness). Used in Photoshop, Figma and design tools. Value 100% is fully saturated colour, not white.
OKLCH — A perceptually uniform colour space supported in modern CSS. L is lightness (0–1), C is chroma (colourfulness), H is hue angle (0–360°). More consistent across different hues than HSL, and the basis for CSS colour-mix().
CMYK — Cyan, Magenta, Yellow, Black percentages. Used in print design.
RGB (0–1) — Fractional RGB for WebGL shaders and graphics programming.

Why OKLCH Matters

HSL has a known problem: colours at the same lightness value look very different in perceived brightness — a yellow at HSL 50% lightness looks far brighter than a blue at HSL 50%. OKLCH is a perceptually uniform space where equal steps in lightness actually look equal to the human eye. CSS now supports oklch() natively in all modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+), making it the recommended format for modern CSS colour design systems.

HSL vs HSV — Which One Do You Need?

CSS uses HSL — white is 100% lightness. Design tools like Photoshop, Figma and Sketch use HSV — a fully saturated, maximum-value colour is pure and vivid. If your design tool shows "H: 195, S: 100, B: 100" that is HSV. If your CSS colour picker shows "H: 195, S: 100%, L: 50%" that is HSL.

Frequently Asked Questions

OKLCH is a perceptually uniform colour space where equal steps in L (lightness) and C (chroma) look equal to the human eye, unlike HSL where the same lightness value looks very different across hues. CSS supports oklch() natively in Chrome 111+, Firefox 113+, and Safari 15.4+. It is the recommended format for modern design systems and is particularly useful for generating accessible colour palettes where consistent perceived lightness matters.

Screens emit light using RGB (additive colour mixing). Printers apply ink using CMYK (subtractive mixing). The range of colours each can produce is different — printers cannot reproduce some highly saturated RGB colours, particularly vivid blues and greens. This is called gamut mismatch. For important print work, always request a physical proof before the full print run.

Both use Hue and Saturation, but differ in the third value. HSL uses Lightness — at 100% lightness the colour is always white regardless of hue. HSV uses Value (also called Brightness) — at 100% value the colour is fully saturated and vivid. HSV is used in Photoshop, Figma and most design tools. HSL is more common in CSS. The difference matters when specifying colours precisely between tools.

It tells you whether to put dark or light text on your colour for readable contrast, based on the W3C WCAG brightness formula: (0.299 × R + 0.587 × G + 0.114 × B). If the result exceeds 128, dark text is more readable. The weights reflect human eye sensitivity — we are most sensitive to green, least to blue.

Yes. Typing FFF or 0AF automatically expands to FFFFFF or 00AAFF. The 3-digit shorthand works when both digits of each colour channel are identical — #FFF is valid shorthand for #FFFFFF, but #F53 cannot be shortened because 5 and 3 are different digits.

Graphics programming. WebGL shaders, OpenGL, Three.js and similar frameworks represent colours as floating-point values between 0 and 1 rather than 0–255. The tool outputs it as a vec3() declaration ready to paste into GLSL shader code. It is also used in some CSS filter functions and in Swift UIColor declarations for iOS.