Guide · Color codes

HEX to RGB — Color Code Converter & Guide

HEX stores a color as a hash plus six hexadecimal digits (two each for red, green, and blue). RGB spells out the same channels as three numbers from 0–255. To convert HEX → RGB, split the pairs and turn each pair from base-16 to base-10; to go back, turn each channel into two hex digits and join them. Do it instantly—plus live HSL—with ConvertPal’s free Color Code Converter.

What Is a HEX Color Code?

Web HEX colors usually look like #RRGGBB: a pound sign followed by six characters 0–9 or A–F. Each pair encodes one channel—first red, then green, then blue—so the string is compact enough for CSS, Figma, and design tokens.

Reading left to right, higher values for a pair mean “more of that light.” #000000 is all channels off (black), #ffffff is all channels full (white). Shorthand #RGB duplicates each digit to make #RRGGBB—for example #f0a expands to #ff00aa.

HEX	Color name	RGB equivalent
#ff0000	Red	rgb(255, 0, 0)
#00ff00	Green	rgb(0, 255, 0)
#0000ff	Blue	rgb(0, 0, 255)
#ffffff	White	rgb(255, 255, 255)
#000000	Black	rgb(0, 0, 0)

What Is RGB?

RGB stands for Red, Green, and Blue—the additive primaries your screen blends to make every hue. Each channel is typically an integer from 0 (channel off) to 255 (channel full). You will see RGB in CSS (rgb() and rgba()), design tools, APIs, and image editors because it maps directly to how pixels are lit.

How to Convert HEX to RGB

Drop the leading # if present.
Split the six characters into three pairs: RR, GG, BB.
Convert each pair from hexadecimal (base 16) to decimal (base 10).
Label the results R, G, B and plug into rgb().

Example: #3b82f6

3b → 3×16 + 11 = 59 = R
82 → 8×16 + 2 = 130 = G
f6 → 15×16 + 6 = 246 = B

Result: rgb(59, 130, 246)

How to Convert RGB to HEX

Clamp each channel to 0–255 if needed.
Convert R, G, and B separately to hexadecimal (two digits each).
Pad with a leading 0 when a channel is only one hex digit (e.g., 9 → 09).
Concatenate as #RRGGBB (lowercase or uppercase is style only).

Example: 59, 130, 246

59 → 3b
130 → 82
246 → f6

Result: #3b82f6

What Is HSL and When Should I Use It?

HSL describes the same color as Hue (a position on the color wheel), Saturation (how vivid it is), and Lightness (how close to white or black). CSS can express it as hsl() with degrees and percentages.

HSL shines when you are theming: nudge lightness to build hover states, generate palettes by rotating hue, or store one base color and derive borders and shadows without hand-converting every HEX. For asset handoff, HEX and RGB stay universal—but for design systems and CSS variables, HSL often feels more human to tweak.

Convert Any Color Code Instantly

Use ConvertPal’s Color Code Converter to edit HEX, RGB, or HSL in one place: the native color picker, live preview, lighten/darken nudges, CMYK readout, and copy-ready CSS snippets—all in your browser with validation so a typo does not silently break your stylesheet.

Open Color Code Converter Browse all tools

Frequently Asked Questions

How do I convert HEX to RGB?: Remove the #, split the remaining six characters into three pairs, and convert each pair from hexadecimal to decimal—those three numbers are your R, G, and B. For example, #1a2b3c becomes rgb(26, 43, 60). If you would rather not do mental math, paste the value into the Color Code Converter and all formats update together while you type.
What is the difference between HEX and RGB?: They describe the same screen color with different notation. HEX packs the three channels into one compact string with base-16 digits—great for sharing brand tokens. RGB spells each channel as a familiar 0–255 integer—handy in spreadsheets, Canvas APIs, and some design panels. Converting is lossless when values fit the 8-bit range; pick whichever format your tool expects and convert as needed.
How do I convert RGB to HSL?: Mathematically, normalize each RGB channel to 0–1, find min and max brightness, derive hue from which channel dominates the spread, then compute saturation from the range. Most people skip the algebra and use a converter: enter rgb(…) in the Color Code Converter and read the matching hsl(…) line in the CSS snippet block—fast for prototyping hover colors.
What does # mean in a hex color?: The hash is just a prefix borrowed from Unix-style “number literals”—it signals “this is a hexadecimal color” to parsers in CSS, design tools, and docs. It is not part of the math itself; algorithms strip it before splitting into pairs. Some APIs omit the # internally but add it back when emitting CSS—behavior varies, so keep the # when writing stylesheets.
Can I use HEX colors in CSS?: Yes—color: #3b82f6; and background-color: #fff; are standard. Modern CSS also adds longer forms (eight-digit HEX with alpha), but six-digit remains the default for opaque UI colors. Pair HEX with variables when you want one place to retheme an entire component tree.