What is the format of a hex color code?

A hex color is a # followed by either 3 or 6 hexadecimal digits (0–9, A–F). In the 6-digit form, each pair of digits is one channel — red, green, then blue — ranging from 00 (0) to FF (255). #FF5733 means red=255, green=87, blue=51.

How does 3-digit shorthand hex expand to 6 digits?

Each digit is doubled: #F00 expands to #FF0000, #6AF expands to #66AAFF. This only works when both digits of each channel would be identical, which is why shorthand can only represent 4,096 of the 16.7 million possible colors.

What is HSL and why would I use it over RGB?

HSL stands for Hue (0–360°, a position on the color wheel), Saturation (0–100%, how vivid vs. grey), and Lightness (0–100%, how close to black or white). It maps to how people intuitively adjust color — "make it lighter" or "make it less saturated" is a single-value change in HSL but requires recalculating all three RGB channels proportionally.

Can I use HEX and RGB interchangeably in CSS?

Yes — all modern browsers treat them as equivalent. #FF0000, rgb(255, 0, 0), and hsl(0, 100%, 50%) all render the exact same red because they describe the same point in the same sRGB color space, just with different notation.

Why do RGB values only go up to 255?

Each channel is stored as one byte (8 bits), and 8 bits can represent 256 distinct values, 0 through 255. This is a legacy of how early computer graphics hardware addressed color memory and has stuck as the standard for 24-bit ("true color") displays ever since.

Is hex/RGB the same color space used in print design?

No. Hex and RGB describe additive color mixed from light (used by every screen), while print uses CMYK, a subtractive model mixed from ink. Converting RGB to CMYK is not a simple formula — it depends on the specific printer and paper — so a hex code that looks right on screen can shift when printed.

How do I add transparency to a hex or RGB color?

For RGB, use rgba(99, 102, 241, 0.5) with a fourth alpha value from 0–1. For hex, append two extra digits for 8-digit hex: #6366F180 — the trailing 80 is roughly 50% opacity in hexadecimal.

What is the CSS custom property this tool generates for?

It formats the color as --color: #6366F1; so you can paste it directly inside a :root {} block and reference it everywhere with var(--color), which is the standard modern way to centralize a color palette in a CSS file.

Why would I need RGB percentages instead of 0–255 integers?

Some CSS and SVG contexts, along with certain design and print tools, expect color channels expressed as percentages rather than integers. rgb(100%, 50%, 20%) is functionally identical to rgb(255, 128, 51) — just a different notation for the same value.

All ToolsHEX To RGB

HEX To RGB

Convert hex color codes to RGB, RGB%, and HSL. Includes CSS-ready copy buttons and a live color preview.

ilovedocstools.com

HEX To RGB

Processing…

Processed on your device

FREE

Loading…

Go Pro ↑

HEX Color Code

Your files never leave your device. All processing happens locally in your browser — nothing is uploaded to our servers.Files are never stored on our servers · No tracking of your file contentsPrivacy Policy

What is HEX To RGB?

HEX to RGB converts a hexadecimal color code into RGB (0–255 integers), RGB as percentages, HSL, and a ready-to-paste CSS custom property — with a live swatch so you can visually confirm the color before using it anywhere.

Hex, RGB, and HSL all describe the exact same underlying color model — the RGB additive color space used by every screen — they just express it with different numbers for different purposes. Hex (#6366F1) packs red, green, and blue into two-digit hexadecimal pairs, which is compact and became the default in CSS and design tools because it is easy to copy as one unbroken string. RGB (rgb(99, 102, 241)) spells out the same three channels as base-10 integers from 0–255, which is what most graphics APIs, canvas fillStyle calculations, and image-processing code expect natively — nobody wants to parse hex pairs inside a rendering loop. HSL (hue, saturation, lightness) re-parameterizes the identical color around how humans actually think about color: a position on a color wheel (hue), how vivid or muted it is (saturation), and how close to black or white it is (lightness) — which makes HSL far easier to adjust programmatically. Lightening a brand color by 10% is a one-line change in HSL (bump the L value) but requires recomputing all three RGB channels proportionally to get the same visual result.

This is why the conversion comes up constantly in real work rather than being a novelty. A designer hands over hex values from Figma or Sketch, but your canvas drawing code, WebGL shader uniform, or native mobile color API wants integer RGB channels. A CSS animation needs to interpolate a hover state by lightness, so you convert the brand hex to HSL, adjust the L channel, and convert back. An accessibility check needs the relative luminance of a color, which is computed from linearized RGB channels, not from the hex string directly. All of these are the same one-time lookup this tool exists to remove friction from.

One subtlety worth knowing: hex and RGB as used in CSS and design software describe color in the sRGB color space, which is not the only color space in play. Print workflows use CMYK, a subtractive model built around inks, and professional photography and video often work in wider gamuts like Adobe RGB or DCI-P3 that can represent colors sRGB cannot reproduce at all. A hex code copied from a print-oriented tool may shift slightly on-screen, and colors that look identical in sRGB can diverge once exported to a wide-gamut display pipeline — worth remembering if a color "looks off" after moving between design and print tooling.

How It Works

The tool strips the # prefix and parses the hex string as three (or, for shorthand 3-digit hex, three doubled) hexadecimal byte pairs to extract integer red, green, and blue channel values from 0–255. RGB percentage divides each channel by 255 and formats it as a percentage. HSL is derived using the standard RGB-to-HSL formula: it normalizes each channel to a 0–1 range, finds the maximum and minimum channel values to compute lightness and saturation, then determines hue based on which channel (R, G, or B) is dominant. A CSS custom property string and a live color swatch are generated from the same parsed values. Every calculation runs synchronously in your browser with no network request involved.

How to Use

1
Enter a hex color
Type a hex color code with or without the # (e.g. #FF5733 or FF5733) into the input field, or click the swatch to pick a color visually with your browser's native color picker.
2
Convert
Click Convert and every format is computed and displayed at once — no need to run separate conversions for RGB, RGB%, and HSL.
3
Check the preview swatch
A full-width color block renders the exact parsed color so you can visually confirm it matches what you expected before using it anywhere.
4
Copy the format you need
Click Copy next to any output — RGB integers for canvas or shader code, RGB% for print or design tools, HSL for programmatic lightness/saturation adjustments, or the ready-made CSS variable declaration.
5
Reuse the CSS variable
Paste the generated --color: #RRGGBB; line into a :root {} block in your stylesheet to centralize the value and reference it everywhere with var(--color).

Who Uses This Tool

🎨

CSS Stylesheet Development

Convert a brand hex code to rgb() or hsl() when you need to add opacity using rgba() or adjust lightness in HSL.

🖼️

Canvas & WebGL Graphics

Get the 0–255 integer RGB values from a hex color to pass directly into canvas fillStyle calculations or WebGL shader uniforms.

📐

Design Handoff

Translate hex colors from a Figma or Sketch design file into RGB values that your development framework or CSS preprocessor requires.

🔬

Color Analysis Tools

Extract individual channel values from a hex code to perform luminance calculations or build color-contrast accessibility checks.

🛠️

Cross-Platform Color Sync

Convert a web hex color to RGB percentages for use in PDF authoring tools, print design apps, or spreadsheet chart colors.

♿

Accessibility Checking

Convert hex colors to HSL to inspect the lightness value and determine whether a color combination meets WCAG contrast guidelines.

Why Choose This Tool

Five Output Formats

Shows HEX, RGB (0–255), RGB (%), HSL, and a CSS custom property variable all at once for maximum flexibility.

Supports 3-Digit and 6-Digit Hex

Accepts both shorthand (#FFF) and full-length (#FFFFFF) hex codes, automatically expanding shorthand before converting.

Large Color Preview Swatch

A full-width color swatch previews the exact color so you can visually confirm the input before copying the output.

CSS Variable Output

Generates a CSS custom property declaration like --color: #RRGGBB; so you can paste it directly into a :root block.

Native Color Picker

Click the swatch to open the browser's native color picker and choose a color visually instead of typing a hex code.

Instant Conversion

Results appear immediately on click with no page reload, making it fast to check multiple colors in succession.

Also Try

RGB to Hex Color Converter CSS Beautifier CSS Compressor HTML Beautifier Base64 Encode/Decode

Key Benefits

Instant conversion of any hex code
Shows RGB (0-255), RGB%, and HSL simultaneously
Large color preview swatch
CSS-ready format for each output
Supports both 3-digit and 6-digit hex codes

Frequently Asked Questions

Also Known As

HEX to RGB converter online freeconvert hex color to RGB valueshex to HSL converterhex color code to RGB calculatorCSS hex to rgb() functioncolor code converter hex to rgbhex to RGB percentage converterweb color hex to RGB tool

Related Tools

Binary To Decimal

Convert between binary, decimal, hex and octal number systems

Color Converter

Convert colors between HEX, RGB, and HSL formats

Convert Binary

Convert binary numbers to text and text to binary

Convert Timestamp

Convert Unix epoch timestamp to standard date format and back

Count Words

Count words, characters, sentences and paragraphs in text

Convert Datetime

Convert datetime between different formats and timezones

Trusted Worldwide

Free Online Document Tools for Everyone

iLoveDocsTools is used by students, professionals, and businesses across the United States, Canada, United Kingdom, Australia, India, and more than 100 other countries. All tools are browser-based and process files privately — your files never leave your device. Free to use, with Pro plans for unlimited access.

No Upload Required

All processing happens directly in your browser. Your documents are never sent to any server — complete privacy guaranteed for users in the USA, Canada, UK, and worldwide.

Free to Use — Pro Plans Available

Every tool on iLoveDocsTools is free to use. Need more? Upgrade to Pro for unlimited usage, priority access, and no daily limits. Trusted by students, freelancers, and teams across North America and Europe.

Works on Any Device

Whether you are on a Mac, Windows PC, iPhone, or Android in New York, Toronto, London, or Sydney — our tools work instantly in any modern browser.

Looking for free PDF tools in the USA? Free document converters in Canada? Online PDF editors in the UK or Australia? iLoveDocsTools offers 70+ free tools — merge PDF, split PDF, compress PDF, convert Word to PDF, Excel to PDF, JPG to PDF, and many more — all free, all instant, all private. No watermarks. No file size limits. Just free tools that work.