Color Converter

Type a color in any common format and see it converted to HEX, RGB, and HSL instantly, with a live swatch preview.

Enter a color (hex, rgb(), or hsl())

HEX:

RGB:

HSL:

Walkthrough

How to use it

Type a color into the field using any common format: #hex, rgb(r, g, b), or hsl(h, s%, l%).
The swatch on the right updates live to preview the color.
All three equivalent formats — HEX, RGB, and HSL — are shown below the field so you can copy whichever you need.
If the input isn't a recognizable color, the status line will say so.

Use cases

When you'd use this

Matching a color across two codebases. One team's design tokens use HSL, another's CSS uses HEX — convert between them without doing the math by hand.

Reading a color from a design tool. Paste an RGB value copied from a design app and get the HEX code your CSS actually needs.

Adjusting lightness precisely. HSL makes it easy to reason about lightness/darkness — convert to HSL, tweak the L value, convert back.

FAQ

Common questions

Does it support alpha/transparency?

Not currently — this converts solid RGB/HSL/HEX values. Alpha channel support (rgba, hsla, 8-digit hex) may be added later.

What color formats are accepted as input?

3- or 6-digit hex (#fff or #ffffff), rgb(r, g, b), and hsl(h, s%, l%).

Is my input processed locally?

Yes, entirely with JavaScript math in your browser — nothing is sent anywhere.