Convert HEX color codes to RGB and RGBA values with opacity support and visual preview.
HEX to RGB / RGBA Converter translates a hexadecimal color such as #336699 into separate red, green, and blue channel values, then adds a selected opacity for RGBA output and previewing. Each two-character HEX pair becomes one decimal channel from 0 to 255. The common surprise is that opacity does not change those three channels. It adds an alpha value, so the visible result can differ depending on the color behind it.
A concrete input and expected output from the current implementation.
Input
HEX: #336699 Opacity: 50%
Expected output
RGB: rgb(51, 102, 153) RGBA: rgba(51, 102, 153, 0.5)
The pairs 33, 66, and 99 equal 51, 102, and 153 in decimal. An opacity of 50% becomes an alpha value of 0.5, while the RGB channels remain unchanged.
A six-digit HEX color has the form #RRGGBB. The converter reads RR as red, GG as green, and BB as blue. Each pair ranges from 00 to FF in base 16, corresponding to 0 through 255 in decimal. For example, FF becomes 255, 80 becomes 128, and 00 becomes 0.
For RGBA output, the converter appends the chosen opacity as an alpha value. Alpha ranges from 0 for fully transparent to 1 for fully opaque, with fractional values between them. The preview shows the resulting color, but transparency is a compositing instruction rather than a new RGB color and therefore depends on the preview background.
RGB identifies the base red, green, and blue components. Opacity is stored separately as alpha, so reducing it does not make those channel numbers lighter or darker. Instead, more of the background shows through when the color is rendered. The same RGBA value can consequently appear different over white, black, or another color.
Yes, for ordinary CSS color rendering they specify the same fully opaque sRGB color. The RGBA form states an alpha value of 1 explicitly, while the six-digit HEX form is opaque by definition. They are not textually interchangeable in every data format, however, because a field may require one particular notation.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.