Home/Color Converter
Color

Color Converter

Convert between HEX / RGB / HSL / RGBA

Input color
Conversion results
HEX#00e5ff
RGBrgb(0, 229, 255)
RGBArgba(0, 229, 255, 1)
HSLhsl(186, 100%, 50%)
HSLAhsla(186, 100%, 50%, 1)

Overview: Color Converter converts between the four color formats front-end developers use most often: HEX, RGB, RGBA and HSL. Designers and front-end engineers often switch between design tools (Figma, Sketch, Photoshop) and CSS code, and this tool lets you make all the conversions in one click.

How to use: Step 1 — type a colour value in any format: HEX such as #00e5ff or 00e5ff (the # is optional), also supporting the 3-digit form #0cf; RGB such as rgb(0, 229, 255); HSL such as hsl(187, 100%, 50%). Step 2 — a preview swatch appears below the input in real time. Step 3 — the "Conversion results" panel lists all four formats, each with a "Copy" button. Step 4 — the tool detects the input type automatically and safely ignores invalid values.

Typical scenarios: Designers pick colours in HSL inside Sketch or Figma and hand the developer the HEX; front-end developers convert HEX from a design spec to RGBA to add transparency; adjust brand colours with HSL for easier control over brightness and saturation; debug theme switching and dark-mode palettes; document colours you picked from screenshots in multiple formats.

Technical notes: HEX → RGB uses bitwise splitting into 8-bit channels. RGB → HSL uses the standard algorithm (normalise to [0,1] then compute hue, saturation, lightness). HSL → RGB is the inverse using six linear hue segments. 3-digit HEX is expanded automatically (#0cf → #00ccff). Four-channel HEX (with alpha) is not supported here — use the dedicated CSS Color Generator.

Privacy: All colour conversion runs locally in your browser and the input is never uploaded.

Frequently Asked Questions

How do I use Color Converter?
Step 2 — a preview swatch appears below the input in real time. Step 3 — the "Conversion results" panel lists all four formats, each with a "Copy" button.
What can Color Converter do?
Typical scenarios: Designers pick colours in HSL inside Sketch or Figma and hand the developer the HEX; front-end developers convert HEX from a design spec to RGBA to add transparency; adjust brand colours with HSL for easier control over…
Is my data private when I use Color Converter?
Privacy: All colour conversion runs locally in your browser and the input is never uploaded. Privacy: All colour conversion runs locally in your browser and the input is never uploaded.
What technical details should I know about Color Converter?
RGB → HSL uses the standard algorithm (normalise to [0,1] then compute hue, saturation, lightness). HSL → RGB is the inverse using six linear hue segments. 3-digit HEX is expanded automatically ( #0cf → #00ccff ).