How do I convert HEX to RGB?

Enter a HEX color code (e.g. #3b82f6 or #38f) in the HEX tab. The tool instantly shows the equivalent RGB and HSL values. You can also use the native color picker next to the input.

What is the difference between HEX, RGB, and HSL?

HEX is a base-16 representation used in CSS and HTML (e.g. #ff5733). RGB defines a color as Red, Green, Blue channels each 0–255. HSL defines a color as Hue (0–360°), Saturation (0–100%), and Lightness (0–100%), which is more intuitive for creating color palettes.

What does the WCAG contrast ratio mean?

The WCAG (Web Content Accessibility Guidelines) contrast ratio measures how distinguishable text is from its background. A ratio of 4.5:1 or higher (AA) is required for normal text; 3:1 for large text (AA Large); 7:1 for the highest level (AAA). This tool shows the contrast of your color against white and black backgrounds.

Is this color converter private?

Yes. All color conversion happens entirely in your browser using JavaScript math. No data is sent to any server.

Color Converter | HEX to RGB, HSL

Understanding Color Formats in Web Development

Color representation is one of the most fundamental aspects of web and UI development. Browsers, design tools, and CSS all support multiple color formats — and knowing how to convert between them is a daily skill for developers and designers alike. This tool lets you convert between HEX, RGB, and HSL formats instantly in your browser.

HEX Color Codes

HEX (hexadecimal) is the most commonly recognized color format in web development. A HEX code like #3b82f6 consists of three pairs of base-16 digits representing the Red, Green, and Blue channels respectively.

#3b82f6 → Red: 0x3b (59), Green: 0x82 (130), Blue: 0xf6 (246)
Shorthand notation: #RGB is equivalent to #RRGGBB (e.g. #38f = #3388ff)
Valid range per channel: 00 to ff (0–255 decimal)

HEX codes are used in CSS color properties, HTML attributes, design tokens, and SVG files. They are compact and universally supported.

RGB — Red, Green, Blue

RGB defines a color by specifying the intensity of its Red, Green, and Blue channels, each as an integer from 0 to 255. In CSS, RGB colors are written as rgb(59, 130, 246).

RGB is the native model for digital screens. Mixing all three channels at maximum (rgb(255, 255, 255)) produces white; setting all to zero produces black. RGB is additive — adding more light makes colors brighter.

When to use RGB over HEX: when your code needs to manipulate individual channels mathematically, such as creating color variations in JavaScript animations or generating dynamic palettes.

HSL — Hue, Saturation, Lightness

HSL is a human-friendly alternative to RGB that separates the concepts of hue, saturation, and lightness:

Hue (H): The angle on the color wheel (0°–360°). 0° = red, 120° = green, 240° = blue.
Saturation (S): How vivid or gray the color is (0% = grayscale, 100% = fully saturated).
Lightness (L): How light or dark the color is (0% = black, 50% = pure color, 100% = white).

HSL is particularly useful for creating color palettes programmatically. Need a lighter version of a color? Increase the L value. Need a muted tone? Decrease S. This intuitive control makes HSL the preferred format in CSS design systems and component libraries.

How to Convert HEX to RGB

The conversion from HEX to RGB is straightforward:

Remove the # prefix
Split into three pairs: RR, GG, BB
Parse each pair as a base-16 integer

For example: #ff5733 → R: 0xff = 255, G: 0x57 = 87, B: 0x33 = 51 → rgb(255, 87, 51)

How to Convert RGB to HSL

RGB to HSL involves normalizing channel values to the 0–1 range, then computing the lightness (average of max and min channels), saturation (based on the lightness and channel spread), and hue (angle derived from which channel is dominant).

The formula handles edge cases: when all channels are equal (grayscale), saturation is 0 and hue is undefined (set to 0°).

WCAG Contrast Ratio Checker

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors to ensure readability for users with low vision:

Level	Ratio	Usage
AA	≥ 4.5:1	Normal text
AA Large	≥ 3:1	Large text (18pt+ or 14pt bold)
AAA	≥ 7:1	Enhanced accessibility

This tool calculates your color’s contrast ratio against both pure white (#ffffff) and pure black (#000000) using the WCAG relative luminance formula, helping you choose accessible text and background color combinations.

Frequently Asked Questions

What is the hex to rgb formula? Split the HEX code into three 2-character groups and convert each from base-16 to decimal. For example, #ff8800 → R: 255, G: 136, B: 0.

How do I convert RGB to hex in CSS? Use the rgb() function directly in CSS, or convert each channel to a 2-digit hex string and concatenate with a # prefix. This tool does the conversion instantly.

What does HSL stand for? Hue, Saturation, Lightness. It is a cylindrical color model that separates chromatic information (hue and saturation) from luminance (lightness), making it more intuitive for design work than RGB.

Is this color converter accurate? Yes. The conversion algorithms use standard mathematical formulas. HSL values are rounded to the nearest integer, which may introduce rounding differences of ±1 unit, consistent with how CSS engines handle rounding.

Does this tool send my colors to a server? No. All conversions happen entirely in your browser using JavaScript. No data is transmitted to any server.

Color Converter

Converted Values

WCAG Contrast