中文

Color Converter

Color preview
Enter a color and click "Convert"

Online converter between HEX, RGB, HSL and HSV, with live preview and light/dark shade generation.

How to Use & FAQ5 steps · 8 Q&A

Color Converter

Online converter between HEX, RGB, HSL and HSV, with live preview and light/dark shade generation.

How to Use

  1. Enter a colorSupports #rgb, #rrggbb, rgb(...), hsl(...) and more, or click "Random color" for inspiration.
  2. Click "Convert"Get results in HEX / RGB / HSL / HSV and more, with a live color preview.
  3. View the shadesCopy a shade from the light/dark scale for backgrounds, borders or hover states.
  4. Copy the format you needPick HEX or rgb()/hsl() per your framework and copy with one click.
  5. Verify consistencyPaste the result back into the input to confirm it restores the same color and avoid typos.

Related tools

Base ConverterBase64 Encoder/DecoderURL Encoder/DecoderSymmetric Encryption

Related reading

Number Bases Made Intuitive: Binary, Hex and Color CodesColour Formats 101: HEX, RGB, HSL and Accessible ContrastHow RGB / HEX / HSL Convert

FAQ

Which color formats are supported?

It supports conversion between common formats like #rgb, #rrggbb, rgb(r,g,b) and hsl(h,s%,l%), with a live preview of the color itself.

What is the difference between HEX and RGB?

Both represent the same color: HEX is the hexadecimal form (#rrggbb) and RGB is the decimal triplet (rgb(r,g,b)); they convert losslessly. Which to use usually follows team or framework conventions.

What are HSL and HSV used for?

They align more closely with human intuition: H is hue (red-to-violet around a wheel), S is saturation, L/V is lightness. They are handier than RGB for tweaking colors and building monochrome scales or palettes.

How do I generate light/dark shades?

The tool automatically generates a set of lighter and darker shades from the input color, handy for background layers, hover states or pressed-button states; take any shade value directly.

Why does the color look different from expected?

HEX/RGB are sRGB display values and can look slightly different across screens, brightness and color profiles; also check for an alpha channel — a semi-transparent color looks different over different backgrounds.

Is transparency (alpha) supported?

The tool focuses on opaque colors. If you need transparency, add alpha yourself based on the result, e.g. rgba(r,g,b,a) or 8-digit HEX (#rrggbbaa).

Why does the color differ from my design mockup?

Common causes: ① the mockup uses a wide gamut like Display P3 while the web shows sRGB; ② you forgot alpha; ③ you wrote HSL lightness as 0-255 instead of a percent. Check format and gamut first.

How do I pick a harmonious palette?

A simple approach: fix one hue and vary only lightness/saturation for a monochrome set, or use complementary/triadic hue spacing. After the tool generates shades, nudge the hue to get a coordinated scheme quickly.