Hex to RGB Converter

Developer guide

Hex, RGB, and HSL: how color codes work

Every color you see on a screen is produced by mixing three channels of light: red, green, and blue. The specific values of those three channels determine the final color. The same color can be written in several different notations, and knowing how to convert between them is a fundamental skill for any frontend developer or designer.

What is a hex color code?

A hex color code is a six-digit (or three-digit shorthand) hexadecimal number, usually prefixed with a hash symbol. Each pair of digits represents one color channel: red, green, and blue in that order. Hexadecimal uses base-16, so digits run from 0 to 9 and then A to F, giving 256 possible values per channel (00 to FF).

The three-character shorthand works by doubling each digit. So #fff expands to #ffffff, #369 expands to #336699, and so on. This shorthand only works when both digits in each pair are identical.

What is RGB?

RGB (Red, Green, Blue) expresses each channel as a decimal integer from 0 to 255. It is the direct numeric representation of what the hardware renders. A value of 0 means none of that channel and 255 means full intensity. You can mix any combination:

CSS also supports an alpha channel through rgba(), where the fourth argument is a number from 0 (fully transparent) to 1 (fully opaque). rgba(59, 130, 246, 0.5) is the same blue at 50% opacity.

How to convert hex to RGB

Each two-character hex pair is converted to a decimal number by interpreting it as a base-16 integer.

How to convert RGB to hex

Divide the decimal value by 16 to get the first hex digit, and take the remainder as the second hex digit. Then concatenate both into a two-character string.

In code, the simplest implementation in JavaScript is (n).toString(16).padStart(2, "0") for each channel, then concatenating with a leading hash.

What is HSL?

HSL stands for Hue, Saturation, and Lightness. It describes color in a way that is more intuitive for humans than raw RGB values.

• Hue (0-360 degrees) is the position on the color wheel. 0/360 is red, 120 is green, 240 is blue.
• Saturation (0-100%) is how vivid or washed-out the color is. 0% is gray, 100% is fully vivid.
• Lightness (0-100%) is how bright the color is. 0% is black, 100% is white, 50% is the pure hue.

HSL is particularly useful in CSS when you want to create color variations. Changing the lightness by a fixed percentage gives you a consistent hover or active state without manually calculating a new hex code.

When to use each format in CSS

• Hex (#rrggbb): The most common format. Compact, widely supported, and accepted everywhere CSS is valid. Use this as your default for solid colors without transparency.
• rgb() / rgba(): Use when you need to dynamically calculate or interpolate colors in JavaScript, or when you need alpha transparency in older code. Modern CSS supports hex with alpha (#rrggbbaa) which is often cleaner.
• hsl() / hsla(): Use when building design systems or theming. Being able to say "darken this color by 10% lightness" is much easier with HSL than with hex or RGB. CSS custom properties and color-mix() work naturally with HSL.

Text contrast and accessibility

WCAG 2.1 defines a contrast ratio formula based on relative luminance, which is a weighted combination of the three channels that approximates human perception of brightness. The converter above shows whether white or black text gives better contrast on your chosen background color. For accessible UIs, aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

A luminance below about 0.18 means the background is dark enough that white text will have sufficient contrast. Above that threshold, use dark (near-black) text.

Disclaimer

All conversions are performed with integer rounding. HSL values are rounded to the nearest whole degree or percent. There may be rounding differences of 1 unit when converting back and forth repeatedly.