HEX to RGB Color Converter

Convert 6-digit hex colors to RGB and HSL, or enter RGB/HSL values to get the matching hex code. Preview the color and copy CSS-ready values instantly.

HEX to RGB Converter: Enter a 6-digit hex color like #2563eb to get rgb(37, 99, 235), hsl(217, 83%, 53%), rgba(), hsla(), and a CSS variable line. You can also enter RGB or HSL values to convert back to hex.

Loading Tool...

This tool requires JavaScript to run.

Please enable JavaScript in your browser to use this free online tool. All processing happens locally in your browser for maximum privacy and speed.

Key Takeaways

Converts 6-digit #RRGGBB hex colors to RGB and HSL.
RGB inputs accept channel values from 0 to 255.
HSL inputs accept hue 0-360 and saturation/lightness 0-100.
Alpha is handled separately for rgba() and hsla() output.
The current tool does not parse named colors, 3-digit shorthand, 8-digit alpha hex, HSV, CMYK, LAB, or OKLCH.

What is HEX to RGB Converter?

HEX to RGB Converter — A HEX to RGB converter turns a hexadecimal CSS color such as #2563eb into red, green, and blue channel values such as rgb(37, 99, 235), while also showing related HSL values.

Use this color converter when you need to move between design handoff values and CSS code. Paste a 6-digit hex value, pick one of the sample colors, or enter RGB/HSL numbers manually. The preview updates with the current color, and the output section gives copy buttons for common CSS formats including hex, rgb(), rgba(), hsl(), hsla(), and a CSS custom property.

How to Use HEX to RGB Converter

1
Choose the Hex, RGB, or HSL tab.
2
Enter a 6-digit hex code or the numeric RGB/HSL channel values.
3
Adjust the alpha value if you need rgba() or hsla() output.
4
Check the live swatch to confirm the color.
5
Copy the format you need for CSS, JavaScript, or a design token file.

Key Features

HEX, RGB, and HSL InputsConvert from a hex color field, three RGB channel fields, or three HSL channel fields and keep the other formats in sync.

RGBA and HSLA OutputSet opacity from 0 to 1 and copy rgba() or hsla() values without changing the base color conversion.

Live Swatch PreviewSee the selected color and opacity as you type, with quick sample colors for common UI states.

Copy CSS ValuesCopy individual HEX, RGB, RGBA, HSL, HSLA, or CSS custom property output values with one click.

Use Cases

Convert a Figma or design-system hex token into rgb() for CSS-in-JS.

Turn RGB values from browser DevTools into a reusable hex token.

Create rgba() or hsla() values for translucent overlays.

Check HSL hue, saturation, and lightness before building hover colors.

Copy a CSS custom property line for a theme file.

About HEX to RGB Converter

This converter focuses on the formats used most often in everyday frontend work: 6-digit hex, RGB, HSL, RGBA, HSLA, and CSS variables. It intentionally avoids claiming broader color-space support that the current component does not parse, such as OKLCH, LAB, CMYK, HSV, named CSS colors, or palette matching.

Frequently Asked Questions

How do I convert hex to RGB?: Enter a 6-digit hex color such as #ff5733 in the Hex tab. The RGB output updates immediately, for example rgb(255, 87, 51).
Can I convert RGB back to hex?: Yes. Open the RGB tab, enter red, green, and blue values from 0 to 255, and the tool calculates the matching hex and HSL values.
Does this support 3-digit hex shorthand?: No. The current input expects 6-digit hex values like #ff0000. Expand shorthand colors before entering them.
How is alpha handled?: Alpha is set with a separate 0-1 opacity control and is included in the rgba() and hsla() outputs. The base hex output remains a 6-digit color.
Does this convert OKLCH, HSV, or named CSS colors?: No. This page currently converts between HEX, RGB, and HSL families only.

From Our Blog

Why Google Doesn't Use Third-Party SEO Tools (And What to Use Instead)Google published new guidance confirming it never uses third-party SEO tool scores for ranking. Here is what Google actually said, why it matters, and what to rely on instead.How to Hide Text in an Image Online with PNG SteganographyA practical guide to hiding short text inside PNG images with browser-based steganography, password protection, and safe sharing rules.

Read all guides

Loading your tools...

Use Cases

Convert a Figma or design-system hex token into rgb() for CSS-in-JS.

Turn RGB values from browser DevTools into a reusable hex token.

Create rgba() or hsla() values for translucent overlays.

Check HSL hue, saturation, and lightness before building hover colors.

Copy a CSS custom property line for a theme file.

Frequently Asked Questions

How do I convert hex to RGB?

Enter a 6-digit hex color such as #ff5733 in the Hex tab. The RGB output updates immediately, for example rgb(255, 87, 51).

Can I convert RGB back to hex?

Yes. Open the RGB tab, enter red, green, and blue values from 0 to 255, and the tool calculates the matching hex and HSL values.

Does this support 3-digit hex shorthand?

No. The current input expects 6-digit hex values like #ff0000. Expand shorthand colors before entering them.

How is alpha handled?

Alpha is set with a separate 0-1 opacity control and is included in the rgba() and hsla() outputs. The base hex output remains a 6-digit color.

Does this convert OKLCH, HSV, or named CSS colors?

No. This page currently converts between HEX, RGB, and HSL families only.

HEX to RGB Color Converter

Key Takeaways

What is HEX to RGB Converter?

How to Use HEX to RGB Converter

Key Features

Use Cases

About HEX to RGB Converter

Frequently Asked Questions

From Our Blog

HEX to RGB Color Converter

Color Preview

All Color Formats

Key Takeaways

What is HEX to RGB Converter?

How to Use HEX to RGB Converter

Key Features

Use Cases

About HEX to RGB Converter

Frequently Asked Questions

From Our Blog

Color Preview

All Color Formats

Tools

Finance

AI

Media

Marketing

More

HEX to RGB Color Converter

Key Takeaways

What is HEX to RGB Converter?

How to Use HEX to RGB Converter

Key Features

Use Cases

About HEX to RGB Converter

Frequently Asked Questions

From Our Blog

HEX to RGB Color Converter

Color Preview

All Color Formats

Key Takeaways

What is HEX to RGB Converter?

How to Use HEX to RGB Converter

Key Features

Use Cases

About HEX to RGB Converter

Frequently Asked Questions

From Our Blog

Color Preview

All Color Formats