How do I convert HEX to RGB manually?

Split the 6-digit HEX into three pairs. Convert each pair from hexadecimal to decimal: multiply the first digit by 16 and add the second. Example: #1a2b3c → R=1×16+10=26, G=2×16+11=43, B=3×16+12=60 → rgb(26, 43, 60).

What is the difference between #abc and #aabbcc?

They are the same color written two ways. 3-digit HEX is a shorthand where each digit is doubled: #abc = #aabbcc. This only works when both digits in each pair are identical.

Can I use HEX colors with transparency in CSS?

Yes. CSS supports 8-digit HEX with an alpha channel: #ff634780 is tomato at 50% opacity (80 in hex = 128 in decimal ÷ 255 ≈ 50%). Alternatively use rgba(255, 99, 71, 0.5) which is more readable.

What is the HEX code for white and black?

#ffffff is white (all channels at maximum 255). #000000 is black (all channels at 0). The shorthand forms are #fff and #000.

converters5 min readMay 13, 2026

HEX to RGB Color Conversion – Formula, Examples & CSS Guide

Web designers and developers constantly work with HEX color codes (#ff6347) and RGB values (rgb(255, 99, 71)) — two ways of expressing exactly the same color. Understanding the relationship between them lets you read and modify colors mentally, debug CSS issues faster, and choose the right format for different use cases. This guide covers the conversion formula, examples, and practical CSS context.

How HEX to RGB Conversion Works

A 6-digit HEX color code like #ff6347 is simply three 2-digit hexadecimal numbers concatenated: ff (red), 63 (green), 47 (blue). Hexadecimal (base 16) uses digits 0–9 and letters A–F, where A=10, B=11, ..., F=15. To convert a 2-digit hex value to decimal: multiply the first digit by 16 and add the second. 'ff' = (15 × 16) + 15 = 240 + 15 = 255. '63' = (6 × 16) + 3 = 96 + 3 = 99. '47' = (4 × 16) + 7 = 64 + 7 = 71. So #ff6347 = rgb(255, 99, 71) — which is the CSS color 'tomato'. For 3-digit shorthand HEX (#f63), each digit is doubled: #f63 expands to #ff6633. This only works when each hex pair has identical digits — it is a compression shortcut.

HEX vs RGB vs HSL – When to Use Each in CSS

All three formats produce identical visual output in a browser — the choice is about readability and use case: HEX is the most compact (7 characters including #) and is what every design tool exports by default. Use HEX when you want brevity or are pasting from Figma/Photoshop. RGB is best when you need to manipulate color values in JavaScript. Adding transparency is natural: rgba(255, 99, 71, 0.5) gives 50% opacity. You can also do math on channel values: darken a color by subtracting from each channel. HSL (hsl(hue, saturation%, lightness%)) is most human-readable for building color systems. To create a lighter variant of a color, just increase lightness: hsl(9, 100%, 50%) → hsl(9, 100%, 70%). This makes theming and dark mode palettes much easier to maintain than calculating HEX variants manually.

Common HEX Colors and Their RGB Equivalents

Here are the colors web developers reach for most often: #ffffff = rgb(255, 255, 255) — white #000000 = rgb(0, 0, 0) — black #ff0000 = rgb(255, 0, 0) — red #00ff00 = rgb(0, 255, 0) — green (lime) #0000ff = rgb(0, 0, 255) — blue #ffff00 = rgb(255, 255, 0) — yellow #ff6347 = rgb(255, 99, 71) — tomato #6c63ff = rgb(108, 99, 255) — medium slate blue #1a1a2e = rgb(26, 26, 46) — dark navy For any color not on this list, paste the HEX code into the Color Converter above to get the RGB and HSL values instantly.

Try the tools mentioned in this guide

Color ConverterConvert between HEX, RGB, and HSL color formats with a visual 2D color picker and one-click CSS copy.File Size ConverterConvert between 12 file size units including SI decimal (KB/MB/GB) and IEC binary (KiB/MiB/GiB) side by side.Length ConverterConvert between 12 length units — km to miles, meters to feet, cm to inches — with an all-units comparison table.

Frequently Asked Questions

How do I convert HEX to RGB manually?: Split the 6-digit HEX into three pairs. Convert each pair from hexadecimal to decimal: multiply the first digit by 16 and add the second. Example: #1a2b3c → R=1×16+10=26, G=2×16+11=43, B=3×16+12=60 → rgb(26, 43, 60).
What is the difference between #abc and #aabbcc?: They are the same color written two ways. 3-digit HEX is a shorthand where each digit is doubled: #abc = #aabbcc. This only works when both digits in each pair are identical.
Can I use HEX colors with transparency in CSS?: Yes. CSS supports 8-digit HEX with an alpha channel: #ff634780 is tomato at 50% opacity (80 in hex = 128 in decimal ÷ 255 ≈ 50%). Alternatively use rgba(255, 99, 71, 0.5) which is more readable.
What is the HEX code for white and black?: #ffffff is white (all channels at maximum 255). #000000 is black (all channels at 0). The shorthand forms are #fff and #000.

Related Guides

MB vs MiB – Why Your Hard Drive Shows Less Storage Than Advertised

A 1 TB hard drive showing as 931 GB is not missing storage — your OS and the manufacturer are using different definitions of what 'GB' means.

km to Miles Conversion Chart – Formula, Table & Quick Reference

1 km = 0.621371 miles. That is the only number you need to memorize — everything else follows from multiplying or dividing by it. Here is what that means in practice.

All guides Browse all tools

Text Tools