Color Converter · HEX RGB HSL Three-way Conversion

Overview

This converter supports HEX (#rrggbb hexadecimal), RGB (0-255 channels), and HSL (hue/saturation/lightness) — the three most common web color notations — with live bidirectional sync. Change any value in one format and the other two update instantly, with a live swatch preview. Strictly local-only: nothing is sent to any server, no data is logged. Designed for UI designers, front-end engineers, theme tuning, and palette triage.

How to use

Pick which notation you want to enter (HEX / RGB / HSL)
Type the value; the other two sync instantly in the results panel
The preview swatch updates live for visual comparison
Tap any result row to copy its value (native browser copy)

Formula

1) HEX ↔ RGB: every 2 hex chars encode a 0-255 channel.
   e.g. #36A2EB → R=54, G=162, B=235
2) RGB → HSL:
   r = R/255, g = G/255, b = B/255
   L = (max + min) / 2
   S = (max - min) / (1 - |2L - 1|)
   H follows the max-channel branch (see code)
3) HSL → RGB: standard reverse derivation.

Common scenarios

Scenario 1 · Turn a HEX palette into CSS hsl() vars

Design gave you

Scenario 2 · Got RGB from an eyedropper, want HEX

The picker gives RGB(54, 162, 235) but you want a compact HEX for CSS variables. Type the RGB, grab

Scenario 3 · Consolidate a brand palette into a design system

Tagging 30 brand colors into a Figma Token sheet, each needs HEX / RGB / HSL. One tool, rapid-fire input, no tab-hopping.

FAQ

Are my color values uploaded to any server?

No. All conversions run entirely in your browser. We cannot see and do not log any color values you enter.

Does it support 8-digit HEX with alpha (#RRGGBBAA)?

Only 3-digit (#RGB) and 6-digit (#RRGGBB) are supported; alpha is not handled. Use rgba() / hsla() manually if you need transparency.

Why does HSL round-trip sometimes differ by ±1 in RGB?

HSL values are rounded to integers (H°, S%, L%), so HSL→RGB round-trip may differ by ±1. This matches browser DevTools behavior and is visually imperceptible.

Can it generate complementary / analogous colors?

This tool only does format conversion. For complements, add/subtract 180° to H in HSL; analogous colors are H±30°.

Can I paste the CSS string directly into my code?

Yes. `rgb(r, g, b)` / `hsl(h°, s%, l%)` / `#rrggbb` are all valid in modern browsers and mainstream CSS preprocessors — paste as-is.

Is this accessible for colorblind users?

Input is fully number-based (HEX / RGB / HSL text); the swatch is only an auxiliary preview. All essential info is conveyed numerically.