How to Convert HEX Colors to RGB and Other Formats
Convert color values between HEX, RGB, HSL, HSV, and CMYK formats with our free Color Converter. Includes a visual color picker.
Steps
Enter your colour value
Type a hex colour code (e.g., #FF6B35), RGB values (e.g., rgb(255, 107, 53)), HSL values, or use the visual colour picker to select a colour. The tool accepts all common CSS colour formats.
View all format conversions
The tool simultaneously displays the colour in all formats: HEX (#FF6B35), RGB (255, 107, 53), HSL (20°, 100%, 60%), HSV/HSB (20°, 79%, 100%), and CMYK (0%, 58%, 79%, 0%). Each format is used in different contexts.
Copy the format you need
Click the copy button next to any format to copy it to your clipboard as a ready-to-use CSS value: color: #FF6B35 or color: rgb(255, 107, 53) or color: hsl(20, 100%, 60%).
Use the colour picker for visual selection
Click anywhere in the colour wheel or spectrum picker to select a colour visually. The saturation/lightness canvas lets you fine-tune while the hue ring lets you change the base colour. All format values update in real time.
Colour Spaces Explained: RGB, HSL, and CMYK
Different colour representations serve different purposes. RGB (Red, Green, Blue) models how screens emit light — each channel value from 0 to 255 represents the intensity of that light colour. Mixing at maximum values (255, 255, 255) produces white; zero values produce black. HSL (Hue, Saturation, Lightness) models colour as humans perceive it: hue is the colour angle on a wheel (0° = red, 120° = green, 240° = blue), saturation is colour intensity from grey to pure colour, and lightness ranges from black through the colour to white. HSL is intuitive for design because creating a darker version of a colour means reducing lightness — not manually adjusting three separate RGB values. HEX is just RGB encoded in base-16 hexadecimal: #FF6B35 is R=FF(255), G=6B(107), B=35(53).
Frequently Asked Questions
HEX is the most concise for static colour values and is universally understood by developers. RGB is preferred when you need to dynamically generate colours in JavaScript or need transparency (use rgba() with a fourth alpha parameter). HSL is most intuitive for designers because hue, saturation, and lightness correspond to how humans perceive colour — adjusting saturation and lightness while keeping the same hue produces natural-looking colour variations. HSL is particularly useful for creating colour schemes: keep hue constant and vary lightness for tints and shades.
The alpha channel controls opacity, ranging from 0 (completely transparent) to 1 (completely opaque). rgba(255, 107, 53, 0.5) renders the colour at 50% transparency. This is used for overlay effects, semi-transparent backgrounds, and fading animations. The CSS opacity property makes the entire element transparent (including children), while rgba/hsla only makes the colour itself transparent without affecting child elements.
CMYK (Cyan, Magenta, Yellow, Key/Black) is the colour model used in print production. Unlike RGB which adds light (additive), CMYK subtracts it from a white background (subtractive). Screen designs use RGB; print designs use CMYK. When designing for print, work in CMYK from the start and use a colour converter to ensure your screen colours translate well to print, as some RGB colours (especially bright blues and greens) cannot be accurately reproduced in CMYK.