HEX, RGB, and HSL are different ways to describe colors used on the web. Converting between them does not necessarily change the displayed color; it changes the notation and the way humans edit the values.

Use the QuickToolsBox Color Converter to compare representations and preview a color in your browser.

HEX colors

A six-digit HEX color stores red, green, and blue channel values as hexadecimal numbers from 00 to FF:

#2563EB

The pairs are red 25, green 63, and blue EB. A three-digit shorthand such as #3AF expands to #33AAFF.

Modern CSS also supports four- and eight-digit HEX notation with alpha transparency, although six digits remain the most familiar form in design handoffs and style guides.

RGB colors

RGB expresses the same three channels using decimal values from 0 to 255:

rgb(37, 99, 235)

Alpha can be included using modern CSS syntax or rgba() notation. An alpha value of 0 is transparent, 1 is opaque, and values between them are partially transparent.

RGB is useful when values come directly from image or display data and when code needs to manipulate individual channels.

HSL colors

HSL describes hue, saturation, and lightness:

hsl(221, 83%, 53%)

Hue is an angle around the color wheel. Saturation describes color intensity, and lightness moves from black through the selected hue toward white.

HSL can be easier for designing related states. Keeping the hue stable while adjusting lightness can produce hover, border, and background variants. However, equal numeric lightness does not guarantee equal perceived brightness across different hues.

Choosing a format

Choose the notation that makes the design system easier to understand and maintain:

  • Use HEX for compact, familiar opaque color tokens.
  • Use RGB when channel calculations or existing data use decimal channels.
  • Use HSL when designers frequently adjust hue, saturation, or lightness.
  • Use a format with alpha when transparency is part of the intended color.

A project can use more than one format, but consistency within design tokens and components reduces confusion.

Transparency and compositing

A partly transparent color does not have one final visible appearance. The browser blends it with the content behind it. The same RGBA or HSLA value can therefore look different on white, gray, a photograph, or a dark theme.

When accessibility matters, evaluate the final composited foreground and background rather than only the source color values.

Color conversion and rounding

Converting from one representation to another may introduce rounded decimal values. Converting back can produce a channel that differs by one unit while remaining visually indistinguishable.

If exact round trips matter for generated code, keep a canonical source format and derive the others from it rather than repeatedly converting back and forth.

Accessibility considerations

Color choice should account for contrast, not just visual appeal. Check text against its actual background in normal, hover, focus, disabled, light-theme, and dark-theme states. Do not use color as the only way to communicate errors, selection, or status.

A converter helps describe a color, but a dedicated contrast checker is needed to evaluate foreground and background combinations against accessibility targets.

Common mistakes

  • Omitting # from a HEX value in CSS
  • Using a percentage where an RGB channel expects 0–255
  • Treating HSL lightness as perceived brightness
  • Checking contrast before alpha blending
  • Mixing up the order of red, green, and blue channels
  • Copying an eight-digit HEX value into software that supports only six digits

Frequently asked questions

Are HEX and RGB colors different?

Six-digit HEX and ordinary RGB can represent the same sRGB channel values. They are usually different notations for the same color.

Which format is best for CSS variables?

Any supported format can work. Choose one that fits how the variables will be adjusted and combined in the project.

Why does the same color look different on two screens?

Display calibration, brightness, color profiles, browser handling, and surrounding colors can all affect perception. A numeric color value alone cannot guarantee identical physical appearance.