HEX to RGB Converter – Color Codes, HSL & CSS

How to Convert HEX to RGB

HEX and RGB are two common ways to represent digital colors. A six-digit HEX color uses the format #RRGGBB, where each pair of hexadecimal digits represents the red, green and blue channels. RGB expresses those same channels as decimal values from 0 through 255.

To use this HEX to RGB converter, enter a six-digit HEX value such as #6366F1 or choose a color with the color picker. The tool immediately displays the equivalent RGB value, HSL value, CSS color declaration and the individual red, green and blue channel numbers.

HEX to RGB conversion formula

Each two-character HEX pair is converted from base 16 to base 10. For example, a color written as #FF5733 is split into FF, 57 and 33. FF in hexadecimal equals 255 in decimal, 57 equals 87, and 33 equals 51. The RGB result is therefore rgb(255, 87, 51).

The same process works for every six-digit HEX color. Values range from 00 to FF in hexadecimal, which correspond to 0 through 255 for each RGB channel.

HEX vs. RGB vs. HSL

HEX and RGB describe the same underlying red, green and blue color channels using different notation. HEX is compact and common in CSS and design systems, while RGB is useful when software or code needs separate numeric channel values.

HSL represents color using hue, saturation and lightness. It can be easier to work with when creating lighter, darker or less-saturated versions of a base color because those properties are separated into more intuitive controls.

Using HEX colors in CSS

CSS supports HEX colors directly, so a value such as #6366F1 can be assigned to properties like color, background-color or border-color. This tool also shows a ready-to-use CSS declaration so you can copy the selected HEX value into a stylesheet quickly.

Why convert HEX to RGB?

• Translate a design-system or Figma HEX value into RGB channel numbers.
• Compare colors reported in different formats by design and development tools.
• Inspect the exact red, green and blue values that make up a web color.
• Generate HSL values for hue, saturation and lightness adjustments.
• Prepare color values for CSS, JavaScript, canvas or graphics workflows.
• Document consistent brand colors across design and development teams.

Common HEX to RGB Conversions

These examples show popular six-digit HEX color codes and their RGB equivalents. They use the same base-16 to base-10 conversion performed by the tool above.

How to convert a HEX color code to RGB

A six-digit HEX color has three two-character pairs: #RRGGBB. Convert the first pair to red, the second to green, and the third to blue. Each pair ranges from 00 to FF, which corresponds to decimal values from 0 to 255.

HEX, RGB, and CSS color values

HEX and RGB describe the same red, green, and blue channels using different notation. CSS accepts both forms directly. For example, #6366F1 and rgb(99, 102, 241) represent the same digital color value.

HEX to HSL conversion

The converter also derives HSL from the RGB channels. HSL separates hue, saturation, and lightness, which can be useful when adjusting a color family while keeping its overall hue recognizable.

Six-digit HEX only

This converter intentionally accepts standard six-digit HEX values such as #FF5733. Three-digit shorthand such as #F53 and alpha-enabled values such as #FF573380 remain unsupported so the tool stays focused on direct opaque HEX-to-RGB conversion.

Conversion Methodology and Limitations

The converter validates a six-digit #RRGGBB value, parses the hexadecimal number into separate red, green and blue 8-bit channels, then derives HSL from the normalized RGB values. The CSS output uses the original six-digit HEX value directly.

Worked example: #6366F1

Why HSL may look slightly rounded

The converter rounds HSL hue, saturation and lightness to whole numbers for readability. If another color tool shows decimal HSL values, both outputs can still describe effectively the same color even though the text is not identical.

HEX and RGB do not define exact physical appearance

HEX and RGB specify digital channel values, not a guaranteed physical light output. The same numerical color can look different across monitors, phones and browsers because of display gamut, brightness, white point, color profiles, HDR behavior, calibration and surrounding colors.

Common input mistakes

• Entering a three-digit shorthand such as #F53 instead of a six-digit value such as #FF5533.
• Omitting the leading #.
• Entering alpha transparency such as #6366F180, which this version does not accept.
• Assuming two screens will render the same RGB triplet identically.

Related Utiliverse Tools

Last reviewed: October 1, 2026 · HEX validation, RGB channel parsing, HSL conversion, copy behavior and display limitations reviewed against the current implementation.

Working With Web and Brand Colors

Design systems often store brand colors as HEX codes because they are compact and familiar. Other development tools may expose RGB or HSL instead. Converting between formats helps teams confirm that two differently written values represent the same color and reduces errors during design handoff.

A live swatch is useful for visually confirming that the entered code is the color you expected. Keep in mind that the same numerical color can still appear different across displays because of brightness, calibration, color profiles and surrounding colors.

Using RGB channel values

An RGB color contains three channels: red, green and blue. Each channel ranges from 0 to 255. A value of 0 means that channel contributes none of its color, while 255 means full intensity. For example, rgb(255, 0, 0) is pure red, rgb(0, 255, 0) is pure green, and rgb(0, 0, 255) is pure blue.

Using HSL for color adjustments

HSL can be useful when creating related interface states. Hue identifies the base color family, saturation controls color intensity, and lightness controls how light or dark the color appears. Starting with a HEX code and checking the HSL conversion can make it easier to reason about lighter or darker variations.

HEX to RGB Converter FAQ