Color Converter

How to use this tool

Enter a HEX, rgb() or hsl() color and convert. Copy any of the three formats from the result.

Example

Input

#2196F3

Output

rgb(33, 150, 243) | hsl(207, 90%, 54%)

What does this tool do?

HEX and RGB describe red, green and blue channel values. HSL describes hue, saturation and lightness, making palette adjustments easier to reason about.

Common mistakes and limitations

This tool handles opaque sRGB colors. HSL values are rounded for display. Use the Flutter converter when you need an alpha channel.

Three ways to describe an sRGB color

HEX writes red, green and blue as hexadecimal byte pairs. RGB writes the same channels as integers from 0 to 255. HSL expresses hue around a color wheel, saturation as a percentage and lightness as a percentage. Hue wraps around 360 degrees. These are alternative notations for a color, not proof that two displays will render identical light. The tool rounds channel values where conversion requires it.

#2196F3
rgb(33, 150, 243)
hsl(207, 90%, 54%)

Use the syntax your stylesheet expects

Three-digit HEX expands each digit, so #09f means #0099ff. The supported RGB input uses comma-separated integer channels, and HSL uses percentage saturation and lightness. This converter does not accept every modern CSS color function, wide-gamut color space or alpha syntax. Use the Flutter Color Converter when you need ARGB output and an opacity byte. Do not silently drop transparency from an existing CSS design.

.link { color: #2196F3; }
.panel { background-color: rgb(33, 150, 243); }

Conversion is not a contrast check

A matching numeric color may still be hard to read against a particular background. Check foreground/background contrast and visible focus states separately. HSL lightness is not perceptual brightness and cannot by itself certify accessible contrast. Rounding can make an RGB → HSL → RGB round-trip differ slightly. Keep the original source value when exact brand-token reproduction matters, and use conversion primarily to move between supported code formats.

Keep alpha and color space explicit

If a design export supplies an RGBA value, record the alpha separately instead of treating it as another RGB channel. This tool’s supported inputs describe ordinary sRGB values and return opaque RGB-derived notations. A wide-gamut design color may need a color-managed conversion elsewhere. Before replacing a design token, compare it in the same display and browser context where the component is expected to appear.

Frequently asked questions