HEX to RGB Converter

Convert HEX to RGB, RGBA, HSL, HSV, CMYK and decimal with live preview

100% free. Runs entirely in your browser - your files and data never leave your device and nothing is uploaded to any server.

editColour

Alpha100%

visibilityPreview

#6366f1

data_objectAll Formats

codeReady to Paste

About this tool

A HEX code is just RGB written in base 16. #6366f1 splits into three pairs - 63, 66, f1 - which are 99, 102 and 241 in decimal, the red, green and blue channel values. Same colour, different notation, and the conversion between them is arithmetic rather than interpretation. The reason several formats exist is that each suits a different job. HEX is compact and dominates CSS and design tools. RGB exposes the individual channels, which is what you need when code has to calculate or animate a colour. HSL - hue, saturation, lightness - is the one most people underuse and should reach for more: building a lighter variant of a colour means changing one number instead of guessing three, which is why design systems are usually defined in HSL. CMYK belongs to print and is the one format where a mathematical conversion is only a starting point, because ink behaviour depends on paper and profile. Everything converts live in your browser.

How to use this tool

  1. Enter a HEX codeWith or without the hash, in 3, 4, 6 or 8 digits. The 8-digit form includes alpha.
  2. Read every format at onceRGB, RGBA, HSL, HSV, CMYK and decimal all update live, so no second conversion step is needed.
  3. Copy the one you needHEX for CSS, RGB for code that manipulates channels, HSL for building variants.
  4. Use HSL to create variationsAdjust lightness alone to produce hover, disabled and background shades that stay in the same colour family.

How to convert hex to RGB by hand

Split the six-digit hex code into three pairs - red, green and blue - and convert each pair from base 16 to decimal: multiply the first digit by 16 and add the second, where A to F stand for 10 to 15. For #FF8800, FF is 15 x 16 + 15 = 255, 88 is 8 x 16 + 8 = 136 and 00 is 0, so the colour is rgb(255, 136, 0).

The converter does the same arithmetic instantly and shows the RGB, RGBA, HSL, HSV, CMYK and decimal values side by side with a live preview.

Key features

  • Six formats from one input, so you never need a second converter.
  • Handles 3, 4, 6 and 8 digit HEX including alpha, which many converters do not.
  • Live preview, so you see the colour rather than trusting the numbers.
  • Runs in your browser with recent colours kept locally.
  • No account and no limit.

Common uses

  • Converting a brand HEX code into RGB for code that animates or calculates colour.
  • Getting HSL values to build a consistent palette of lighter and darker variants.
  • Producing CMYK starting values for a print supplier.
  • Translating a colour from a design tool into the format your framework expects.
  • Adding transparency to an existing colour by converting HEX to RGBA.

Tips for better results

  • Use HSL when you need variants. Changing lightness alone keeps the hue consistent, which manual RGB adjustment rarely achieves.
  • For transparency in CSS, either 8-digit HEX or RGBA works - pick one and use it consistently across the codebase.
  • Treat CMYK output as a starting point and confirm with your printer, who works to a specific colour profile.
  • Once you have a colour, check it against its background with the Colour Contrast Checker before using it for text.
  • Define design tokens in HSL where your tooling allows. It makes generating a full scale from one base colour straightforward.

Mistakes to avoid

  • Sending mathematically converted CMYK to a printer as final values without confirming against their profile.
  • Building lighter and darker shades by adjusting RGB channels by eye, which shifts the hue as well as the brightness.
  • Assuming 8-digit HEX works everywhere. Support is broad in modern browsers but older environments and some tools still expect RGBA.
  • Mixing HEX with alpha and RGBA arbitrarily across a codebase, which makes colours hard to search and maintain.
  • Picking a colour on the numbers alone without checking contrast against the background it will sit on.

Frequently asked questions

An 8-digit HEX code adds two characters for alpha (opacity) on the end - #ff000080 is red at 50% opacity. The 4-digit form is its shorthand, exactly as #f00 is shorthand for #ff0000. All four lengths are supported here.

CMYK conversion depends on the specific inks, paper and colour profile being used. The values here use the standard mathematical conversion, which is correct as a starting point, but a print shop working to a specific ICC profile will produce slightly different numbers.

It is the colour packed into a single 24-bit integer, which some APIs, game engines and design tools use instead of a HEX string. It is the same colour expressed differently.

Recent colours and favourites are stored in your own browser's local storage. Nothing is sent to a server, and clearing your browser data clears the history.

Whenever you need variants of a colour. Lighter, darker or less saturated versions come from changing a single HSL number, whereas adjusting RGB channels by eye tends to shift the hue as well. This is why most design systems define their palettes in HSL.

Either append two hex digits for alpha - #6366f180 is 50% opacity - or use the RGBA value shown here. Both are valid in modern CSS; pick one convention and apply it consistently.

WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text against its background. Convert both colours, then test them in a contrast checker before using them for text.

Screens differ in calibration, brightness and colour gamut, and some apps manage colour profiles while others do not. HEX values are identical; what each display does with them is not.

Shorthand where each digit is doubled: #F60 means #FF6600. It only works when each channel's two digits are the same, so most brand colours need the full six digits.

Related guides