Convert HEX ↔ RGB Instantly

HEX (hexadecimal) is a 6-digit color code used in web design and CSS. It represents colors using base-16 values for red, green, and blue channels. For example, #FF0000 is pure red. HEX codes always start with a hash (#) symbol followed by exactly 6 characters (0-9 and A-F). Shorthand 3-digit hex codes like #F00 expand to their 6-digit equivalent.

Split the 6-digit hex code into 3 pairs (RR, GG, BB), then convert each pair from base-16 to base-10. For example, #FF8800 → R: FF = 255, G: 88 = 136, B: 00 = 0, giving rgb(255, 136, 0). Our converter does this instantly as you type, also outputting HSL and RGBA formats. For the alpha channel and 8-digit hex, see the RGBA & transparency guide.

They represent the same colors in different formats. HEX uses a compact 6-character hexadecimal code (#RRGGBB), while RGB uses three decimal numbers from 0-255. HEX is commonly used in CSS and design tools, while RGB is standard in programming and image processing. Both produce identical visual results — it's purely a notation difference. For a survey of every modern CSS color format (hsl, hwb, lab, lch, oklch, color()), see the CSS color formats reference.

HSL stands for Hue, Saturation, and Lightness. Hue is the color angle on the color wheel (0-360°), saturation is the color intensity (0-100%), and lightness controls brightness (0-100%). HSL is often more intuitive for designers because adjusting lightness or saturation is straightforward, unlike HEX where changing brightness requires modifying all three channels. For practical use cases — building color scales, hover states, and theme variants — see the in-depth HSL color guide.

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background for readability. Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Meeting these ensures your content is accessible to people with visual impairments. Use our contrast checker above to verify your color combinations, and read the full WCAG contrast guide for edge cases like transparent text and disabled controls.

The converter shows HEX, RGB, HSL, and RGBA for any color you enter — copy any of them with one click. CSS now supports several other formats including HWB, Lab, LCH, and OKLCH for perceptually uniform color systems. The CSS color formats reference covers when each format is the right call.

Pick a base hue, then choose a harmony scheme — analogous for cohesion, complementary for impact, triadic for balance, split-complementary for drama with a softer landing. The home palette generator rotates around the wheel using these schemes. The color harmony guide walks through what each scheme looks like and when to use it.

Yes! Click the eyedropper icon next to the HEX input field to open your browser's native color picker. Pick any color and it will automatically populate both the HEX and RGB fields. You can also paste a HEX code directly, type RGB values manually, or click any color from the CSS Named Colors section below.