HEX to RGB Converter
Convert web colors between HEX, RGB, and HSL formats instantly - with alpha channel support.
The Ultimate Guide to Web Color Formats: HEX, RGB, and HSL
Everything a web designer or front-end developer needs to know about CSS color systems - explained from first principles.
Every color you see on a screen is produced by mixing red, green, and blue light at various intensities - a system called the RGB (Red, Green, Blue) color model. Web browsers understand several text-based notations for describing those intensities, and choosing the right one depends on your workflow and what you are trying to communicate in your CSS. The three dominant formats are HEX (Hexadecimal), RGB, and HSL (Hue, Saturation, Lightness). Each is mathematically identical under the hood - they all describe the same underlying color space - but they differ dramatically in readability, editability, and how well they map to a designer's mental model.
What is a HEX color code? A HEX code like #FF6B35 is a six-character string (sometimes three, for shorthand) written in base-16 (hexadecimal) notation. The characters 0-9 and A-F represent the values 0 through 15 in a single digit. The full six characters split into three two-character pairs, one pair for each of the red, green, and blue channels. The pair FF means the channel is at full brightness (255 in decimal), while 00 means the channel is completely off. HEX is the most common format in design tools, style guides, and brand kits because it is compact and copy-pasteable as a single word. An 8-digit HEX like #FF6B35CC adds a fourth pair representing the Alpha Channel - the opacity of the color.
What is RGB and how is it different from HEX? The CSS function rgb(255, 107, 53) expresses the exact same color as #FF6B35 - but in base-10 (decimal) numbers that are easier for humans to reason about intuitively. Each channel value ranges from 0 to 255. The RGBA variant adds a fourth argument: rgba(255, 107, 53, 0.8) where the last value is a decimal between 0 (fully transparent) and 1 (fully opaque). RGB shines in JavaScript animations and CSS custom property arithmetic, because you can manipulate individual channels with simple addition or subtraction. The conversion between HEX and RGB is pure arithmetic: each two-character HEX pair converts to decimal as follows:
For example, the red component FF converts as: $16 \times 15 + 15 = 240 + 15 = 255$. The green component 6B converts as: $16 \times 6 + 11 = 96 + 11 = 107$. So #FF6B35 becomes rgb(255, 107, 53). The inverse (RGB to HEX) divides each decimal value by 16, takes the quotient as the first digit and the remainder as the second, then maps both to hexadecimal characters:
HSL (Hue, Saturation, Lightness) separates color into three dimensions that mirror the way humans naturally think about color. The Hue is a degree value on the color wheel from 0 to 360: 0 is red, 120 is green, 240 is blue. Saturation is the intensity of the color expressed as a percentage - 100% is vivid and pure, 0% is a grey. Lightness controls brightness: 0% is black, 100% is white, and 50% is the "true" color.
This structure makes design tasks dramatically easier. Want a lighter tint of your brand color? Just increase the Lightness. Want a muted, desaturated version? Reduce the Saturation. Want an analogous color (one step around the wheel)? Add or subtract from the Hue. In contrast, doing the same operations in HEX or RGB requires you to manually recalculate all three channels every time, which is opaque and error-prone. CSS custom properties and HSL together have become the go-to pattern for building design systems and theme-aware components.
HSLA extends HSL with a fourth Alpha value, identical in behavior to RGBA: hsla(16, 100%, 60%, 0.8) renders the same orange at 80% opacity.
The Alpha Channel is a fourth value added to any color format that controls how transparent or opaque the color appears. Think of it as the "see-through" level of a glass window - 0 is completely invisible, 1 (or 100%) is completely solid.
In RGBA, it is written as a decimal: rgba(255, 107, 53, 0.5) is 50% transparent orange. In HSLA, it works identically: hsla(16, 100%, 60%, 0.5). In 8-digit HEX, the Alpha is the last two characters - #FF6B3580 represents approximately 50% opacity, because 80 in hexadecimal equals 128, which divided by 255 is roughly 0.502. The checkerboard pattern visible in the preview above this guide is a standard visual convention used by image editors like Photoshop and Figma to indicate transparent areas - the "checker" shows through wherever the color has less than 100% opacity.
Web Safe Colors are a palette of 216 colors that were guaranteed to display consistently on monitors in the 1990s, when many screens could only render 256 total colors. These colors are produced by HEX values built from only the values 00, 33, 66, 99, CC, and FF - giving $6 \times 6 \times 6 = 216$ combinations. Examples include #FF0000 (red), #00CC66 (green), and #3366CC (blue-violet).
In 2025, web safe colors are essentially a historical footnote. Every modern device - phones, laptops, and desktop monitors - supports at least 16.7 million colors (24-bit true color), and most now support wide-gamut display profiles like P3. You are free to use any HEX, RGB, or HSL value you choose without worrying about compatibility. That said, some designers still prefer web safe values when building tools that must match legacy print or accessibility specifications.
The short answer: use HSL for design systems and component libraries, HEX for static design assets and brand palettes, and RGBA when you need fine-grained opacity control in animations or overlays.
A practical pattern used by major design systems (including Tailwind CSS and Radix UI) is to store all colors as HSL values inside CSS custom properties: --color-brand: 16 100% 60%;. You then consume them with hsl(var(--color-brand)) or hsla(var(--color-brand) / 0.5) for transparent variants - no separate "opacity" variables needed. This single pattern makes theming, dark mode, and tint scales trivial to maintain.
If you are handing off colors to a developer from a Figma or Sketch file, HEX is universal and unambiguous. If you are writing utility CSS by hand or building a theme engine, HSL is the smarter choice. And if you are working with Canvas API, WebGL, or CSS filters in JavaScript, RGB's numeric channels are the easiest to interpolate and animate.
HEX to RGB is the simpler operation. Split the six HEX characters into three pairs, then convert each pair from base-16 to base-10. For #4A90E2: Red = $16 \times 4 + 10 = 74$, Green = $16 \times 9 + 0 = 144$, Blue = $16 \times 14 + 2 = 226$. Result: rgb(74, 144, 226).
RGB to HSL requires normalizing the channel values to the range [0, 1] by dividing by 255, then applying the following algorithm. Let $R' = R/255$, $G' = G/255$, $B' = B/255$. Define $C_{max}$ and $C_{min}$ as the maximum and minimum of the three primed values, and $\Delta = C_{max} - C_{min}$.
Multiply $S$ and $L$ by 100 to express as percentages. This is exactly the math running inside this converter's JavaScript engine - every keypress triggers these formulas live in your browser without any server round-trip.