← All tools
// Design

Color Converter online

Convert colors between HEX, RGB, and HSL — with live preview

Color Converter logo
by
CHUNKY
MUNSTER
Preview

How to Use color-converter

  1. Enter a colour value in any supported format: HEX, RGB, HSL, or HSV.
  2. All other representations update instantly.
  3. Use the visual colour picker to select a colour and read all formats simultaneously.
  4. Click any format label to copy its value to the clipboard.

Colour values appear in different formats depending on the context: CSS uses HEX and RGB; design tools like Figma and Photoshop work in HSL and HSV; WebGL shaders use normalised 0–1 floats. This converter keeps all representations in sync so you never need to look up a colour conversion formula again.

Colour Format Reference

HEX (#rrggbb): 6 hex digits, 2 per channel. The # shorthand #rgb doubles each digit — #f0c = #ff00cc. RGB: three integers 0–255. HSL: Hue (0–360°), Saturation (0–100%), Lightness (0–100%). HSV/HSB: Hue, Saturation, Value — used by Photoshop's colour picker. CMYK: Cyan, Magenta, Yellow, Key — print format. Named CSS colours: 140 keywords like cornflowerblue and rebeccapurple.

Frequently Asked Questions

What is the difference between HSL and HSV?

HSL (Hue, Saturation, Lightness): Lightness 0 is black, 100% is white, 50% is the pure colour. HSV (Hue, Saturation, Value): Value 0 is black, 100% is the full colour (not white). Photoshop uses HSB (identical to HSV). CSS uses HSL.

Why does CSS use hexadecimal for colours?

Because one hex digit maps to exactly 4 bits. Two hex digits represent one byte (0–255), giving compact 6-character strings for the 3-byte RGB triplet. #FF8800 is 6 characters vs "rgb(255, 136, 0)" at 18 characters.

What is the alpha channel?

Alpha controls opacity — 0 is fully transparent, 1 (or 255 in RGBA) is fully opaque. In CSS, rgba(255, 0, 0, 0.5) is a semi-transparent red. HEX also supports an 8-digit form: #rrggbbaa.

What is the difference between 3-digit and 6-digit hex colours?

3-digit shorthand (#rgb) is valid when both digits of each pair are identical. #ff8800 can be shortened to #f80 because each pair (ff, 88, 00) has matching digits. It is purely cosmetic — both mean the same colour.

See also the Colour Name Finder, Color Contrast Checker, and HSL to RGB tools.

📖 Reference: CSS Color Module Level 4 — W3C