HEX to RGB Color Converter
Translate Hexadecimal color codes to RGB/RGBA formats instantly. Features shorthand support, copy-to-clipboard, and brightness analysis for UI/UX designers.
About
Consistency in design systems requires strict adherence to color formats. While design tools like Figma or Sketch often export Hexadecimal codes (Base 16), CSS implementation frequently benefits from RGB or RGBA (Base 10) values, particularly when JavaScript manipulation or opacity adjustments are required. This tool parses raw Hex strings, validates the 16-base structure, and outputs the precise Red, Green, and Blue channels used by digital displays.
Beyond simple conversion, understanding perceived brightness is critical for accessibility. Text placed over a background color must maintain sufficient contrast to be readable. This converter calculates the luminance of the input color to suggest whether black or white text is the mathematically superior choice for overlay content.
Formulas
The conversion splits a 6-digit Hex string into three pairs. Each pair represents a color channel in Base 16, which is converted to Base 10 integers.
G = parseInt(hex[2,3], 16)
B = parseInt(hex[4,5], 16)
Brightness (YIQ contrast) is calculated to determine text readability:
Reference Data
| Color Name | HEX | RGB Output | Luminance Estimate |
|---|---|---|---|
| Pure Black | #000000 | rgb(0, 0, 0) | 0% (Dark) |
| Pure White | #FFFFFF | rgb(255, 255, 255) | 100% (Light) |
| Red | #FF0000 | rgb(255, 0, 0) | ~30% (Dark) |
| Green | #00FF00 | rgb(0, 255, 0) | ~59% (Light) |
| Blue | #0000FF | rgb(0, 0, 255) | ~11% (Dark) |
| Mid Grey | #808080 | rgb(128, 128, 128) | 50% (Neutral) |
| Cyan | #00FFFF | rgb(0, 255, 255) | High Brightness |
| Magenta | #FF00FF | rgb(255, 0, 255) | Medium Brightness |