🎨 Design Tools

Color Converter

Convert between HEX, RGB, and HSL color formats instantly. Edit any field — all others update live.

HEX

#6366f1

RGB

rgb(99, 102, 241)

HSL

hsl(239, 84%, 67%)

Pick a color

Use the native color picker to select any color — all fields update instantly.

Quick colors

How to use this tool

1 Enter a color value in any supported format: HEX, RGB, HSL, or HSB.
2 The tool instantly converts it to all other formats.
3 Copy the format you need for your CSS, design tool, or code.
4 Use the color picker to select a color visually if you do not have a specific value.

Frequently asked questions

What is the difference between RGB and HEX?

They represent the same color space. HEX uses a compact six-character code (e.g., #3B82F6) while RGB spells out each channel as a decimal (e.g., rgb(59, 130, 246)).

What is HSL?

HSL stands for Hue, Saturation, Lightness. It is more intuitive for humans than RGB because you can adjust brightness or saturation without needing to recalculate all three channels.

What is the alpha channel?

Alpha controls transparency. In CSS, rgba(0,0,0,0.5) is 50% transparent black. In HEX, #00000080 appends the alpha as a two-digit hex value.

Which color format should I use in CSS?

Use CSS custom properties with HSL for design tokens because it is easy to create consistent shades by varying the lightness. Use HEX for one-off values for readability.