🔧

Color Format Converter

Convert colors between HEX, RGB, HSL, HSB formats.

Input

Output

How to Use

Enter or paste a color in any supported format: HEX (#ff5733 or #fff), RGB (rgb(255, 87, 51)), HSL (hsl(12, 100%, 60%)), or HSB/HSV. The tool auto-detects the input format and parses it immediately.
The converter shows your color in all other formats simultaneously — HEX, RGB, RGBA, HSL, HSLA, HSV/HSB, and CMYK — with a live color preview swatch. Tweak individual channel values (R/G/B sliders, hue, saturation) and see all formats update in real time.
Copy any format representation with one click. Paste it directly into CSS, design tools (Figma, Sketch), graphics software (Photoshop, GIMP), or codebases. Also generates CSS variable-friendly formats for modern design systems.

What's the difference between HSL and HSB/HSV?: HSL (Hue, Saturation, Lightness) models color as a double cone — 0% lightness is black, 100% is white, and pure colors sit at 50%. HSB/HSV (Hue, Saturation, Brightness/Value) models it as a cylinder — 0% brightness is always black, and pure colors are at 100% brightness. HSL is more intuitive for CSS, while HSB matches how color pickers work.
Does this tool support alpha/opacity transparency?: Yes — the converter outputs RGBA and HSLA formats with alpha channel support. You can adjust the opacity slider (0–1 or 0–100%) and get the corresponding rgba() or hsla() CSS value. HEX with alpha (#RRGGBBAA) is also supported on output.
How does HEX shorthand work?: HEX shorthand uses 3 or 4 characters instead of 6 or 8. Each character is doubled: #f39 expands to #ff3399, and #f39f expands to #ff3399ff. The converter automatically expands shorthand and can optionally output the shortest possible HEX representation for your color.