HEX to RGB Color Conversion: A Complete Guide for Developers

Colors are fundamental to every user interface, and developers work with them constantly. Whether you are styling a button, setting a background or adjusting an overlay, you need to specify colors in your CSS. The challenge is that there are several different color formats, each with its own syntax, strengths and ideal use cases. Understanding how to convert between HEX, RGB, HSL and OKLCH will make you a more effective front-end developer and help you write cleaner, more maintainable stylesheets.

What Are Color Models?

A color model is a mathematical system for describing colors as numbers. Different models represent the same visible color using different coordinate systems. For example, a pure red can be written as #FF0000 in HEX, rgb(255, 0, 0) in RGB, hsl(0, 100%, 50%) in HSL, or oklch(0.628 0.258 29.23) in OKLCH. All four notations describe the exact same color. The choice of which format to use depends on your workflow, your browser support requirements and what kind of color manipulation you need to do.

How HEX Color Codes Work

HEX (hexadecimal) is the most widely recognized color format on the web. A HEX color code starts with a # symbol followed by six hexadecimal digits. Each pair of digits represents one color channel: red, green and blue. The digits use base-16 numbering, where 0 through 9 represent values zero through nine, and A through F represent values ten through fifteen.

For example, in the color #3B82F6, the red channel is 3B (59 in decimal), the green channel is 82 (130 in decimal) and the blue channel is F6 (246 in decimal). This gives you a pleasant blue tone, commonly used in UI design.

Shorthand HEX Notation

When each pair of digits consists of the same character repeated, you can use the three-digit shorthand. For instance, #FF6633 can be shortened to #F63. The browser expands each digit by repeating it, so #F63 becomes #FF6633. Similarly, #000 expands to #000000 (black) and #FFF expands to #FFFFFF (white). This shorthand is widely supported and saves a few bytes in your stylesheets.

HEX with Alpha Transparency

Modern browsers support eight-digit HEX codes where the last two digits represent the alpha (opacity) channel. For example, #3B82F680 is the same blue as before but at 50% opacity (since 80 in hex equals 128 in decimal, which is roughly half of 255). The four-digit shorthand #F638 also works, where the fourth digit is the alpha channel.

How RGB Works

RGB stands for Red, Green, Blue. It is an additive color model, meaning colors are created by combining light. Each channel accepts a value from 0 to 255, where 0 means none of that color and 255 means full intensity. In CSS, you write it as rgb(59, 130, 246) using the modern syntax, or with commas as rgb(59, 130, 246) in the legacy syntax.

The RGB model maps directly to how screens work. Every pixel on your display is made up of tiny red, green and blue sub-pixels. When all three channels are at 255, you get white. When all three are at 0, you get black. When only red is at 255 and the others are 0, you get pure red. Mixing channels at various intensities produces the full spectrum of approximately 16.7 million possible colors (256 x 256 x 256).

For alpha transparency in RGB, use the rgba() function or the modern syntax with a slash: rgb(59 130 246 / 0.5). The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

The HEX to RGB Conversion Formula

Converting from HEX to RGB is straightforward because both formats represent the same underlying data. A HEX color is simply the RGB values written in base-16 instead of base-10. Here is the step-by-step process:

• Take the first two hex digits and convert them to a decimal number. This is the red channel.
• Take the middle two hex digits and convert them to a decimal number. This is the green channel.
• Take the last two hex digits and convert them to a decimal number. This is the blue channel.

For example, #6366F1 converts as follows: 63 in hex equals 6 x 16 + 3 = 99 for red, 66 equals 6 x 16 + 6 = 102 for green, and F1 equals 15 x 16 + 1 = 241 for blue. The result is rgb(99, 102, 241).

RGB to HEX Conversion

The reverse conversion is equally simple. Take each decimal channel value and convert it to a two-digit hexadecimal number. If the hex result is a single digit, pad it with a leading zero. For instance, rgb(16, 185, 129) converts to: 16 becomes 10, 185 becomes B9, 129 becomes 81. The final HEX code is #10B981.

Conversion in JavaScript

In JavaScript, you can convert HEX to RGB using parseInt(hex, 16) on each pair. For the reverse, use value.toString(16).padStart(2, '0') on each channel. You can also use bitwise operations for a compact one-liner: `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`. This shifts and combines the three channels into a single number, then converts to hex and strips the leading 1.

HSL: Hue, Saturation, Lightness

HSL describes colors in a way that is more intuitive for humans. Instead of mixing red, green and blue intensities, you specify three properties. Hue is the angle on the color wheel, from 0 to 360 degrees, where 0 is red, 120 is green and 240 is blue. Saturation is a percentage that controls how vivid the color is, where 0% is completely gray and 100% is fully saturated. Lightness is a percentage that controls brightness, where 0% is black, 50% is the pure color and 100% is white.

The CSS syntax is hsl(230, 94%, 67%) or using the modern space-separated syntax hsl(230 94% 67%). For transparency, add a slash and alpha value: hsl(230 94% 67% / 0.5).

HSL is especially useful when you need to create color variations. Want a darker version of a color? Just reduce the lightness. Want a muted version? Lower the saturation. Need a complementary color? Add 180 to the hue. This predictability makes HSL a popular choice for design systems and CSS custom properties.

Converting RGB to HSL

The RGB to HSL conversion involves normalizing the RGB values to a 0-1 range, finding the min and max channel values, then computing lightness as the average of the min and max. Saturation depends on the lightness value, and hue is calculated based on which channel is the maximum and the differences between channels. The formulas are well-defined but involve several conditional steps, which is why using a conversion tool is often more practical than calculating by hand.

OKLCH: The Modern Perceptually Uniform Color Space

OKLCH is a relatively new color space that has gained strong support in modern CSS. It stands for OK Lightness, Chroma, Hue. Unlike HSL, which is based on the mathematical properties of the RGB model, OKLCH is designed to be perceptually uniform. This means that a 10% change in lightness looks like the same amount of brightness change regardless of the hue. In HSL, a yellow at 50% lightness appears much brighter to the human eye than a blue at 50% lightness. OKLCH corrects this inconsistency.

The CSS syntax is oklch(0.65 0.25 265), where the first value is lightness (0 to 1), the second is chroma (how colorful, typically 0 to 0.4) and the third is hue in degrees (0 to 360). For transparency: oklch(0.65 0.25 265 / 0.5).

OKLCH also provides access to a wider gamut of colors than sRGB. With modern displays supporting P3 and even Rec. 2020 color spaces, OKLCH lets you specify vibrant colors that simply cannot be expressed in HEX or RGB. Browsers that support OKLCH will render the full gamut color, while older browsers can use a fallback.

When to Use Which Format in CSS

Each color format has its strengths, and the best choice depends on your specific use case:

• HEX. Best for quick, static color definitions. It is compact, universally supported and easy to copy from design tools like Figma or Sketch. Use HEX when you just need to set a fixed color and do not need to manipulate it programmatically.
• RGB. Useful when you need to work with individual color channels or when interfacing with JavaScript canvas operations, WebGL or image processing. The rgb() function also supports the modern space-separated syntax with alpha.
• HSL. Ideal for design systems and theming. When you define your primary color in HSL, creating hover states, disabled states and color scales is intuitive. Adjusting lightness and saturation is more predictable than tweaking individual RGB channels.
• OKLCH. The best choice for new projects targeting modern browsers. Its perceptual uniformity makes it superior for generating consistent color palettes, and it supports wide-gamut colors. Tailwind CSS v4 uses OKLCH internally for its color system.

CSS Color Functions in Practice

Modern CSS offers several color functions beyond the basic notations. The rgb() function now accepts space-separated values: rgb(59 130 246) instead of the older comma syntax. The same applies to hsl(), which accepts hsl(230 94% 67%).

The color-mix() function lets you blend two colors in a specified color space. For example, color-mix(in oklch, #6366f1 70%, white) mixes 70% of your indigo with 30% white, producing a lighter variant. This is incredibly useful for creating tint and shade scales without manually calculating each step.

The oklch() function is supported in all major browsers as of 2024. Combined with CSS custom properties, you can build powerful theming systems: define your brand hue as a custom property and derive every color in your palette by adjusting lightness and chroma values.

Alpha and Opacity in Every Format

All modern color formats support alpha transparency. Here is a summary of the syntax for each:

• HEX. Append two hex digits for alpha: #6366F180 (50% opacity). Shorthand: #63F8.
• RGB. Use the slash syntax: rgb(99 102 241 / 0.5) or the legacy rgba(99, 102, 241, 0.5).
• HSL. Same slash pattern: hsl(230 94% 67% / 0.5) or hsla(230, 94%, 67%, 0.5).
• OKLCH. Also uses slash: oklch(0.65 0.25 265 / 0.5).

The modern slash syntax is consistent across all color functions, making it easier to remember. The older rgba() and hsla() functions still work but are considered legacy syntax.

Practical Tips for Choosing Colors

Here are some practical guidelines that will help you work with colors more effectively in your projects:

• Start with HSL or OKLCH for palettes. When building a color scale (like 50 through 950 shades), working in HSL or OKLCH makes it easy to step through lightness values systematically. OKLCH produces more visually consistent results across different hues.
• Use HEX for design handoff. Most design tools export colors as HEX values. When translating a Figma design to CSS, keeping HEX codes reduces the chance of transcription errors.
• Check contrast ratios. Accessibility standards (WCAG 2.1) require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. When converting between formats, verify that the conversion is exact and the contrast ratio has not changed.
• Provide fallbacks for OKLCH. While OKLCH has excellent browser support today, if you need to support older browsers, include a HEX or RGB fallback before the OKLCH declaration. CSS will use the last value it understands.
• Be consistent within a project. Pick one primary format for your design tokens and stick with it. Mixing HEX, RGB and HSL in the same stylesheet makes the code harder to maintain.
• Use a converter tool. Manual hex-to-decimal math is error-prone. A reliable color converter saves time and eliminates mistakes, especially when working with alpha values or unusual colors.

Common Color Values Worth Memorizing

A few HEX values come up so often that it helps to recognize them on sight. #000000 is black and #FFFFFF is white. Grays follow a predictable pattern where all three channels are equal: #808080 is a perfect mid-gray (128, 128, 128 in RGB). The pure primary colors are #FF0000 for red, #00FF00 for green and #0000FF for blue. Secondary colors follow the same logic: #FFFF00 is yellow, #FF00FF is magenta and #00FFFF is cyan. Recognizing these patterns makes it easier to read and estimate colors from their HEX codes without a tool.