Color Converter

Q: What HEX formats are supported?

Both shorthand 3-digit (#RGB) and full 6-digit (#RRGGBB) HEX codes are supported, in upper or lower case, with or without the leading #.

Convert HEX/RGB/HSL

HEX

RGB

R G B

HSL

H S% L%

What Is This Tool?

The Color Converter lets you enter a color as HEX, RGB, or HSL, and instantly see it converted into the other two formats, along with a live color picker and preview swatch. It's useful for designers and developers who need to translate a color value between formats used in CSS, design tools, or code. All conversion math runs locally in your browser.

How to Use

Type a HEX code, use the color picker, or edit the RGB/HSL number fields directly.

All other fields and the preview swatch update automatically to match.

Use the Copy buttons to grab the HEX string, rgb() string, or hsl() string.

Click Example to load a sample color.

Features

Live two-way conversion between HEX, RGB, and HSL
Native color picker synced with all fields
Large live preview swatch
Copy buttons for HEX, rgb(), and hsl() strings
Friendly validation for out-of-range or malformed values
100% client-side — nothing leaves your browser

Examples

HEX: #3b82f6

RGB: rgb(59, 130, 246)

HSL: hsl(217, 91%, 60%)

Common Use Cases

Converting a design tool's HEX color into CSS rgb() or hsl() notation
Adjusting lightness or saturation of a brand color using HSL sliders
Checking exactly what color a HEX code or RGB triplet represents
Translating colors between a style guide and code

Frequently Asked Questions

What HEX formats are supported?

Both shorthand 3-digit (#RGB) and full 6-digit (#RRGGBB) HEX codes are supported, in upper or lower case, with or without the leading #.

Why did my RGB value get clamped?

RGB channels must be whole numbers between 0 and 255. Values outside that range are rejected with an error so you can correct them.

What do H, S, and L mean?

Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%) describe a color using the HSL color model, which is often more intuitive for adjusting shade and vividness than RGB.

Does this support alpha/transparency?

Not currently. This tool focuses on opaque HEX/RGB/HSL conversion. Alpha channel support may be added in the future.

Is my color data sent anywhere?

No. All conversion math happens locally in JavaScript in your browser. Nothing is uploaded or logged.

Why do HEX and HSL round-trip slightly differently sometimes?

HSL percentages are rounded to whole numbers for display, so converting HEX to HSL and back to HEX can occasionally shift by one unit due to rounding. This is expected and harmless for most use cases.