Paste any 3- or 6-digit hex color and get instant RGB, RGBA, and HSL values with a live swatch preview. Everything runs in your browser — no uploads, no tracking.
A hex color is just three bytes written in base 16. The string #58a6ff packs the red, green, and blue channels into pairs of hexadecimal digits: 58 for red, a6 for green, and ff for blue. Each pair encodes a value from 00 to ff, which is 0 to 255 in decimal — exactly the range an RGB channel uses.
The conversion is pure arithmetic. For each channel you take the two-digit hex pair and read it as base 16: the first digit is the sixteens place and the second is the ones place. So a6 becomes (10 × 16) + 6 = 166. In JavaScript this is a one-liner per channel: parseInt(pair, 16). The tool above splits the cleaned hex string into R = parseInt(hex.slice(0,2),16), G = parseInt(hex.slice(2,4),16), and B = parseInt(hex.slice(4,6),16).
Shorthand three-digit hex like #0bf is expanded first by doubling every digit — 0bf becomes 00bbff — because each nibble represents both digits of its byte. The reverse trip back to hex pads each channel with toString(16) and a leading zero so values under 16 stay two digits. HSL is then derived by normalizing the channels to 0–1, finding the max and min to get lightness and saturation, and computing hue from whichever channel dominates. Because the math is exact and lossless, you can round-trip hex to RGB and back without ever drifting a single value.
Use the picker to choose visually, drag the alpha slider for translucent rgba() values, and copy any line straight into your CSS.