How to Convert HEX to RGB Color Codes

HEX and RGB are two ways of writing the exact same colors. Designers and developers switch between them constantly: HEX in CSS stylesheets, RGB in JavaScript animations, HSL in design tools. Understanding how they relate makes color work much easier. A converter handles the mental arithmetic so you can focus on getting the color right, not on base-16 division.

How HEX colors work

A HEX color code like #FF5733 is a 6-digit hexadecimal number that represents red, green, and blue channels:

Each channel ranges from 00 (0, no color) to FF (255, full intensity). So #FF5733 means full red, some green, a little blue, which gives you a warm orange-red.

How to convert HEX to RGB

1. Enter your HEX code: type or paste a color code like #FF5733 or use the color picker.
2. View the RGB values: see the equivalent red, green, and blue values (0-255 each).
3. Copy in any format: grab the values as rgb(255, 87, 51), individual channels, or other formats like HSL.

A brief history of color codes on the Web

Color in early web browsers (Mosaic 1993, Netscape 1994) used named colors only: red, blue, green. The HTML 3.2 spec (1997) introduced hexadecimal color codes via the BGCOLOR attribute, and CSS 1 (1996) made them universal. The choice of HEX over decimal was practical: a 6-character HEX code is shorter than rgb(255, 87, 51) and easier to copy-paste from a color picker.

The RGB color model itself is much older. James Clerk Maxwell demonstrated in 1861 that any color visible to the human eye can be created by mixing red, green, and blue light. Television (1930s) and computer monitors (1970s) used this principle directly: each pixel is three sub-pixels (one red, one green, one blue) at different brightnesses.

Modern CSS (2010 onward) added many more color formats: hsl() (hue, saturation, lightness), hwb() (hue, whiteness, blackness), lab() (perceptually uniform), lch(), oklab(), oklch(), and color() for arbitrary color spaces. All represent the same colors as HEX/RGB but with different mental models. HEX persists because it is dense, copy-pasteable, and easy to share.

Manual conversion: how to do it in your head

You do not need a tool to convert simple HEX values. The trick is knowing the powers of 16:

• 0 = 0
• 5 = 5
• A = 10
• F = 15
• 10 (hex) = 16
• FF (hex) = 255

For a HEX pair like 5A: the first digit times 16 plus the second digit. 5A = 5 × 16 + 10 = 90.

For shortcuts:

• 00 = 0
• 33 = 51 (a common 20% gray step)
• 66 = 102
• 99 = 153
• CC = 204
• FF = 255

The pairs 33, 66, 99, CC (in any combination) produce the classic "web-safe" 216-color palette from the 1990s. They appear constantly in designer mood boards even today.

Common color codes

HEX with alpha (8-digit HEX)

CSS 4 (2017) introduced 8-digit HEX with an alpha channel. #FF5733CC is rgb(255, 87, 51) with 80% opacity (CC in hex = 204, divided by 255 = 0.80).

Browser support is universal in modern browsers (Chrome 62+, Firefox 49+, Safari 9.1+, Edge 79+). For new projects, 8-digit HEX is a clean alternative to rgba(). For older projects, stick with rgba() for backward compatibility.

A short 4-digit HEX also exists: #F80C is the same as #FF8800CC. Same shorthand rules as 3-digit HEX.

Use cases for each format

Use HEX when:

• Writing CSS color values in stylesheets
• Sharing a single color with designers or in documentation
• Storing colors compactly in JSON or data files
• Working with brand palettes (companies usually specify brand colors as HEX)

Use RGB when:

• Animating colors in JavaScript (parse the channels as numbers, interpolate, re-format)
• Computing color contrast ratios (WCAG formulas operate on RGB)
• Needing partial transparency with rgba() for older browsers
• Reading color from canvas or image data (the Canvas API returns RGB)

Use HSL when:

• Generating a hue palette (hold saturation and lightness, vary hue)
• Creating dark mode variants (hold hue, increase lightness)
• Doing color theory work (complementary colors are 180° apart in hue)

Use OKLCH when:

• You care about perceptual uniformity (interpolating in OKLCH avoids the "muddy middle" you get in RGB)
• Building a color system from scratch in 2024+ projects

Common pitfalls

• Forgetting the # prefix: CSS requires the hash. color: FF5733 is invalid; color: #FF5733 is correct.
• Mixing uppercase and lowercase: #FF5733 and #ff5733 are the same color but inconsistent stylistically. Pick one (most code prefers lowercase for HEX) and stick with it.
• Confusing HEX with hexadecimal in general: hex color codes are always 3, 4, 6, or 8 digits. Other lengths (5, 7) are invalid. Programs may silently truncate or pad.
• Wrong byte order in 8-digit HEX: some libraries use ARGB (#CCFF5733, alpha first) instead of RGBA (#FF5733CC, alpha last). CSS uses RGBA. Adobe and some Android APIs use ARGB.
• Assuming RGB is sRGB: most HEX/RGB colors are in the sRGB color space. P3 displays (Apple devices since 2016) can show wider colors, but standard HEX cannot describe them. Use color(display-p3 ...) for those.
• Color rounding when converting back-and-forth: HEX-to-RGB-to-HEX is lossless. HEX-to-HSL-to-HEX can lose 1-2 levels of precision due to floating-point math.

Tips

• Use HEX in CSS: color: #FF5733 is cleaner and more common than color: rgb(255, 87, 51) in stylesheets.
• Use RGB for transparency: when you need semi-transparent colors, use rgba(255, 87, 51, 0.5). There is no way to add alpha in standard HEX (though 8-digit HEX exists, browser support varies).
• 3-digit shorthand: #F00 is the same as #FF0000. Use it when each pair has identical digits to save space.
• Color picker is faster: if you are trying to find the right color, use the visual color picker instead of guessing HEX values. Copy the code once you are happy with the result.
• Save brand colors as CSS custom properties: --brand-primary: #FF5733 lets you change the value once and update everywhere. Easier than search-replacing HEX codes across files.
• Check contrast after picking: a beautiful color is useless if text on it is unreadable. Pair this converter with a contrast checker to verify WCAG AA (4.5:1) or AAA (7:1) ratios.

Privacy

The HEX-to-RGB converter runs entirely in your browser. The colors you enter, your custom palettes, and any saved values stay on your device. This matters less than for file-conversion tools (a color code is not personally sensitive), but it does matter for design-confidentiality reasons: the colors you are experimenting with may reveal unannounced brand directions, client work under NDA, or product theming in development. Browser-only computation has zero exposure.