Converters

Color Converter

Convert colors between HEX, RGB, and HSL formats with a live visual preview. Free tool for designers and developers.

Browser-based

Use it instantly with no installation.

Local processing

Your input stays in your browser.

No sign-up

Open the tool and get results.

View all Converters

HEX

RGB

HSL

Continue Workflow

Related tools to try next

CSS Unit Converter

Convert between CSS units: px, em, rem, vw, vh, and percentage. With live preview.

CSS Minifier

Minify CSS by removing comments, collapsing whitespace, and compacting declarations.

Lorem Image Placeholder

Generate placeholder image URLs with custom dimensions for your designs and mockups.

Browser Local No sign-up

Example

Convert HEX to RGB and HSL

HSL is often easier to adjust when creating lighter or darker UI states.

Input


                        #2991ff

Output


                        rgb(41, 145, 255)
hsl(211, 100%, 58%)

Practical Notes

HEX and RGB describe the same red, green, and blue channels in different notation.
HSL is useful for design systems because hue can stay fixed while saturation and lightness change.
For print work, use CMYK-aware design software because screen colors do not always translate directly to ink.

How to Use

1. Enter a HEX, RGB, or HSL color value in its field.
2. Review the live preview to confirm the color.
3. Copy the HEX value or use the converted RGB and HSL values in CSS.
4. Adjust the source color until the converted formats match your design.

Features

Converts between HEX, RGB, and HSL color formats
Shows a live preview of the current color
Supports short and full HEX values
Updates related color values as you type
Copies the HEX value with one click
Useful for CSS, design systems, and UI color checks

Use Cases

Converting a design color into CSS-ready formats
Switching HEX brand colors into RGB or HSL values
Creating HSL variants for light, dark, hover, and muted states
Checking whether copied color values match visually

Frequently Asked Questions

What is the difference between HEX and RGB?

HEX writes red, green, and blue channels in hexadecimal. RGB writes the same channel values as decimal numbers from 0 to 255.

When should I use HSL?

Use HSL when you want to adjust lightness or saturation while keeping the same hue, such as creating hover or dark mode variants.

Can I use these values directly in CSS?

Yes. HEX, RGB, and HSL values are all valid CSS color formats.

Is my color data stored?

No. Conversion happens locally in your browser.