Color Converter

Why convert between color formats?

Colors can be written several different ways in CSS: HEX (#2f6bff) is compact and common in design tools, RGB (rgb(47, 107, 255)) is easier to reason about programmatically, and HSL (hsl(220, 100%, 59%)) makes it simple to adjust lightness or saturation without changing the hue. This tool converts freely between all three.

How to use this tool

Paste a HEX, RGB, or HSL color value into the input field (or use the color picker), then click Convert. All three equivalent formats appear below with a live preview swatch, and each can be copied individually with its clipboard icon.

Common use cases

• Converting a HEX value from a design tool into RGB or HSL for a CSS variable.
• Adjusting a color's lightness or saturation in HSL without losing track of its hue.
• Translating a brand color between the format a designer supplied and the format your codebase expects.
• Picking a color visually and grabbing its exact value in three different formats at once.

Frequently asked questions

Why would I use HSL instead of RGB or HEX?

HSL (hue, saturation, lightness) separates a color's tone from how vivid and how light or dark it is, which makes it much easier to create consistent color variations. Darkening a color in HSL just means lowering the lightness value, with no need to recalculate three separate RGB channels.

Does this tool support transparency (alpha)?

This converter works with opaque HEX, RGB, and HSL values. For transparency, add an alpha channel to the RGB or HSL output yourself, for example rgba(47, 107, 255, 0.5) for 50% opacity.

Why do HEX and RGB sometimes look like completely different numbers for the same color?

HEX packs the same red, green, and blue values into base-16 pairs instead of base-10 numbers, so #2f6bff and rgb(47, 107, 255) describe the exact same color; only the number format is different.