HEX to RGB Converter

Type or paste a hex color code — #2D56A3, FFF, #3E2608FF, even 0xFF90BE6D — and get RGB, RGBA, HSL, HSV, CMYK and 0–1 values instantly.

Also accepts rgb(), hsl(), 0x… and color names. Press / to focus.

R
G
B
A

How to Convert HEX to RGB

A hex color code is just three numbers — red, green, blue — each written as two hexadecimal (base-16) digits. Converting to RGB means reading each pair as a normal decimal number from 0 to 255.

  1. Remove the #. #2D56A3 → 2D56A3. For 3-digit shorthand, double each digit: #F80 → FF8800.
  2. Split into pairs. Red 2D, green 56, blue A3.
  3. Convert each pair. First digit × 16 + second digit, where A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.
    2D = 2 × 16 + 13 = 45 · 56 = 5 × 16 + 6 = 86 · A3 = 10 × 16 + 3 = 163
  4. Write it as RGB. #2D56A3 = rgb(45, 86, 163).
R = hex[0]×16 + hex[1]  ·  G = hex[2]×16 + hex[3]  ·  B = hex[4]×16 + hex[5]

Going the other way: RGB to HEX

Divide each channel by 16: the quotient is the first hex digit, the remainder the second. rgb(194, 66, 66) → 194 = 12×16 + 2 → C2, 66 = 4×16 + 2 → 42, giving #C24242. The dedicated RGB to HEX converter does this for you.

Alpha, 8-digit hex and other notations

An 8-digit code like #3E2608FF adds a fourth pair for alpha: divide it by 255 to get the RGBA alpha (FF → 1, 80 → 0.502). Programming languages often write hex with a 0x prefix, and Android/.NET put alpha first (0xAARRGGBB). All of these work in the converter. More in the RGBA & transparency guide and the CSS color formats reference.

In code

// JavaScript
const hexToRgb = hex => {
  const n = parseInt(hex.replace('#', ''), 16);
  return [n >> 16 & 255, n >> 8 & 255, n & 255];
};
hexToRgb('#2D56A3'); // [45, 86, 163]

# Python
def hex_to_rgb(h):
    h = h.lstrip('#')
    return tuple(int(h[i:i + 2], 16) for i in (0, 2, 4))

Common HEX to RGB Conversions

HEXRGBHSLRGB 0–1
#000000rgb(0, 0, 0)hsl(0, 0%, 0%)0, 0, 0
#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)1, 1, 1
#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)1, 0, 0
#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%)0, 1, 0
#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)0, 0, 1
#FFFF00rgb(255, 255, 0)hsl(60, 100%, 50%)1, 1, 0
#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)0, 1, 1
#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)1, 0, 1
#808080rgb(128, 128, 128)hsl(0, 0%, 50%)0.502, 0.502, 0.502
#C0C0C0rgb(192, 192, 192)hsl(0, 0%, 75%)0.753, 0.753, 0.753
#800000rgb(128, 0, 0)hsl(0, 100%, 25%)0.502, 0, 0
#008000rgb(0, 128, 0)hsl(120, 100%, 25%)0, 0.502, 0
#000080rgb(0, 0, 128)hsl(240, 100%, 25%)0, 0, 0.502
#800080rgb(128, 0, 128)hsl(300, 100%, 25%)0.502, 0, 0.502
#008080rgb(0, 128, 128)hsl(180, 100%, 25%)0, 0.502, 0.502
#FFA500rgb(255, 165, 0)hsl(39, 100%, 50%)1, 0.647, 0
#6C5CE7rgb(108, 92, 231)hsl(247, 74%, 63%)0.424, 0.361, 0.906
#2D56A3rgb(45, 86, 163)hsl(219, 57%, 41%)0.176, 0.337, 0.639
#304B78rgb(48, 75, 120)hsl(218, 43%, 33%)0.188, 0.294, 0.471
#007AC8rgb(0, 122, 200)hsl(203, 100%, 39%)0, 0.478, 0.784
#36C1D7rgb(54, 193, 215)hsl(188, 67%, 53%)0.212, 0.757, 0.843
#11FFAArgb(17, 255, 170)hsl(159, 100%, 53%)0.067, 1, 0.667
#5E2F26rgb(94, 47, 38)hsl(10, 42%, 26%)0.369, 0.184, 0.149
#8C9099rgb(140, 144, 153)hsl(222, 6%, 57%)0.549, 0.565, 0.6

Color Palette Generator

Click any swatch to copy its HEX value. Pick a scheme or let it surprise you — or build a palette around the color in the converter. New to harmony schemes? Read the color harmony guide.

WCAG Contrast Checker

Enter text and background colors (hex, rgb() or names) to check WCAG 2.x compliance. For thresholds and edge cases, read the WCAG color contrast guide.

Sample Heading
This is what body text looks like at this contrast ratio.

CSS Named Colors

All 140 distinct CSS named colors. Click to load one into the converter; Ctrl/⌘-click (or browse the color index) for shades, tints and contrast data.

AliceBlue#F0F8FF AntiqueWhite#FAEBD7 Aqua#00FFFF Aquamarine#7FFFD4 Azure#F0FFFF Beige#F5F5DC Bisque#FFE4C4 Black#000000 BlanchedAlmond#FFEBCD Blue#0000FF BlueViolet#8A2BE2 Brown#A52A2A BurlyWood#DEB887 CadetBlue#5F9EA0 Chartreuse#7FFF00 Chocolate#D2691E Coral#FF7F50 CornflowerBlue#6495ED Cornsilk#FFF8DC Crimson#DC143C Cyan#00FFFF DarkBlue#00008B DarkCyan#008B8B DarkGoldenrod#B8860B DarkGray#A9A9A9 DarkGreen#006400 DarkKhaki#BDB76B DarkMagenta#8B008B DarkOliveGreen#556B2F DarkOrange#FF8C00 DarkOrchid#9932CC DarkRed#8B0000 DarkSalmon#E9967A DarkSeaGreen#8FBC8F DarkSlateBlue#483D8B DarkSlateGray#2F4F4F DarkTurquoise#00CED1 DarkViolet#9400D3 DeepPink#FF1493 DeepSkyBlue#00BFFF DimGray#696969 DodgerBlue#1E90FF FireBrick#B22222 FloralWhite#FFFAF0 ForestGreen#228B22 Fuchsia#FF00FF Gainsboro#DCDCDC GhostWhite#F8F8FF Gold#FFD700 Goldenrod#DAA520 Gray#808080 Green#008000 GreenYellow#ADFF2F Honeydew#F0FFF0 HotPink#FF69B4 IndianRed#CD5C5C Indigo#4B0082 Ivory#FFFFF0 Khaki#F0E68C Lavender#E6E6FA LavenderBlush#FFF0F5 LawnGreen#7CFC00 LemonChiffon#FFFACD LightBlue#ADD8E6 LightCoral#F08080 LightCyan#E0FFFF LightGoldenrodYellow#FAFAD2 LightGray#D3D3D3 LightGreen#90EE90 LightPink#FFB6C1 LightSalmon#FFA07A LightSeaGreen#20B2AA LightSkyBlue#87CEFA LightSlateGray#778899 LightSteelBlue#B0C4DE LightYellow#FFFFE0 Lime#00FF00 LimeGreen#32CD32 Linen#FAF0E6 Magenta#FF00FF Maroon#800000 MediumAquamarine#66CDAA MediumBlue#0000CD MediumOrchid#BA55D3 MediumPurple#9370DB MediumSeaGreen#3CB371 MediumSlateBlue#7B68EE MediumSpringGreen#00FA9A MediumTurquoise#48D1CC MediumVioletRed#C71585 MidnightBlue#191970 MintCream#F5FFFA MistyRose#FFE4E1 Moccasin#FFE4B5 NavajoWhite#FFDEAD Navy#000080 OldLace#FDF5E6 Olive#808000 OliveDrab#6B8E23 Orange#FFA500 OrangeRed#FF4500 Orchid#DA70D6 PaleGoldenrod#EEE8AA PaleGreen#98FB98 PaleTurquoise#AFEEEE PaleVioletRed#DB7093 PapayaWhip#FFEFD5 PeachPuff#FFDAB9 Peru#CD853F Pink#FFC0CB Plum#DDA0DD PowderBlue#B0E0E6 Purple#800080 RebeccaPurple#663399 Red#FF0000 RosyBrown#BC8F8F RoyalBlue#4169E1 SaddleBrown#8B4513 Salmon#FA8072 SandyBrown#F4A460 SeaGreen#2E8B57 Seashell#FFF5EE Sienna#A0522D Silver#C0C0C0 SkyBlue#87CEEB SlateBlue#6A5ACD SlateGray#708090 Snow#FFFAFA SpringGreen#00FF7F SteelBlue#4682B4 Tan#D2B48C Teal#008080 Thistle#D8BFD8 Tomato#FF6347 Turquoise#40E0D0 Violet#EE82EE Wheat#F5DEB3 White#FFFFFF WhiteSmoke#F5F5F5 Yellow#FFFF00 YellowGreen#9ACD32

Frequently Asked Questions

A hex color code is a color written as hexadecimal (base-16) numbers, usually #RRGGBB: two digits each for red, green and blue, from 00 (0) to FF (255). #FF0000 is pure red. The 3-digit shorthand #F00 expands to #FF0000, and 8-digit codes like #FF000080 add an alpha (transparency) byte.
Split the 6-digit hex code into three pairs (RR, GG, BB) and convert each pair from base-16 to base-10: first digit × 16 + second digit, with A–F meaning 10–15. #FF8800 → FF = 255, 88 = 136, 00 = 0, giving rgb(255, 136, 0). The converter does this instantly as you type — see the step-by-step walkthrough.
They describe exactly the same colors in different notation. HEX writes each channel as two hexadecimal digits (#RRGGBB); RGB writes it as a decimal number from 0 to 255. #6C5CE7 and rgb(108, 92, 231) are the same pixel, and converting between them is lossless. For every other CSS format, see the CSS color formats reference.
The first six digits convert to RGB as usual. The last two digits are alpha: convert them to decimal and divide by 255. #3E2608FF is rgba(62, 38, 8, 1) because FF = 255 and 255 / 255 = 1; #6C5CE780 is rgba(108, 92, 231, 0.502). More in the RGBA & transparency guide.
Convert to 0–255 RGB first, then divide each channel by 255. #2069E8 = rgb(32, 105, 232) = (0.125, 0.412, 0.91). Normalized values are used in shaders, Unity, SwiftUI, Figma plugins and most 3D tools. The converter shows them in the RGB 0–1 chip.
0x is a programming prefix for hexadecimal. In Android and .NET an 8-digit 0x color is ARGB, so 0xFF90BE6D is alpha FF (opaque) followed by #90BE6D = rgb(144, 190, 109). Paste it into the converter and it is read as ARGB automatically.
In JavaScript: const n = parseInt('2D56A3', 16); const rgb = [n >> 16 & 255, n >> 8 & 255, n & 255]; In Python: tuple(int('2D56A3'[i:i+2], 16) for i in (0, 2, 4)) returns (45, 86, 163).
HSL stands for Hue, Saturation and Lightness. Hue is an angle on the color wheel (0–360°), saturation is color intensity (0–100%) and lightness runs from black (0%) through the pure color (50%) to white (100%). HSL makes it easy to build lighter, darker or muted variants of a color. Full detail in the HSL color guide.
WCAG defines minimum contrast ratios between text and background. Level AA requires 4.5:1 for normal text and 3:1 for large text; Level AAA requires 7:1 and 4.5:1. UI components and graphics need 3:1. Use the contrast checker to test any pair, and the WCAG contrast guide for edge cases.
Yes. The input accepts #RGB, #RRGGBB, #RRGGBBAA, 0x codes, rgb() and rgba(), hsl(), plain triplets like 255, 87, 51, and CSS names like tomato. Every format is converted to all the others.

In-Depth Guides

Copied!