Loading Calculator...
Please wait a moment
Please wait a moment
Convert hexadecimal color codes to RGB values with live preview. Supports both 3-digit and 6-digit hex formats.
CSS Format Examples:
color: #3B82F6;
color: rgb(59, 130, 246);
color: rgba(59, 130, 246, 1);
Hexadecimal (hex) color codes are six-digit codes used in HTML, CSS, and design software to represent colors. The format is #RRGGBB, where RR (red), GG (green), and BB (blue) are hexadecimal values from 00 to FF (0-255 in decimal). For example, #FF0000 is pure red (255 red, 0 green, 0 blue). Hex is base-16, using digits 0-9 and letters A-F.
6-digit hex codes (#RRGGBB) provide 16.7 million color combinations (256³). 3-digit shorthand (#RGB) duplicates each digit: #F00 becomes #FF0000, #3B4 becomes #33BB44. Use 3-digit codes for simplicity when possible, but 6-digit codes offer more precision. Most web colors use 6-digit format for clarity and broader color selection.
To convert manually, split the 6-digit hex into three 2-digit pairs (RR, GG, BB). Convert each pair from hexadecimal to decimal. For example, #3B82F6: 3B (hex) = 59 (decimal), 82 (hex) = 130 (decimal), F6 (hex) = 246 (decimal). Result: RGB(59, 130, 246). Remember: A=10, B=11, C=12, D=13, E=14, F=15 in hexadecimal.
Split the 6-digit hex code into three pairs (RR, GG, BB). Convert each pair from hexadecimal to decimal. For example, #FF5733: FF=255, 57=87, 33=51, giving RGB(255, 87, 51). To convert hex to decimal: multiply the first digit by 16 and add the second. For F6: (15×16) + 6 = 246.
A hex color code like #3B82F6 has three components: 3B (red: 59/255), 82 (green: 130/255), and F6 (blue: 246/255). Each pair can range from 00 (none) to FF (maximum, 255 in decimal). The # symbol indicates it's a hex color. Together, these values mix to create the final color, similar to mixing paint.
In CSS and HTML, the # symbol is required (#3B82F6). However, some contexts accept hex without # (like color pickers or design software). This converter accepts both formats - with or without the # - and will process them correctly. When copying for CSS use, always include the # symbol.
RGB and hex represent the same colors, just in different formats. RGB uses decimal notation (0-255) like rgb(59, 130, 246), while hex uses hexadecimal (#3B82F6). RGB is more human-readable, while hex is more compact. Both are widely supported in CSS. Use whichever format you prefer - they're functionally identical.
Start with a base color, then adjust the hex values. Increase FF values to add more of that color, decrease to remove it. For lighter colors, increase all values equally (toward #FFFFFF). For darker, decrease toward #000000. For pastel colors, use high values with similar proportions. Use a color picker or this converter to experiment and fine-tune your perfect color.