converters

Color Converter

Convert HEX, RGB, HSL, alpha, and a limited set of CSS color names in the browser.

Tool workspace

The interactive tool requires JavaScript.

Instructions

Enter a color value in #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(), rgba(), hsl(), hsla(), or a small basic CSS name set.
Choose the source format, or leave auto detection on, then choose the target format you want to emphasize.
Review HEX, RGB/RGBA, HSL/HSLA, alpha, and exact name-match output before copying.

Use this browser-local color converter for frontend debugging, design handoff notes, CSS cleanup, and documentation. Enter #336699, rgb(51, 102, 153), hsl(210, 50%, 40%), or a basic CSS color name to get HEX, RGB/RGBA, HSL/HSLA, alpha, and exact name-match output.

Direct answer

Color Converter parses HEX, RGB, HSL, and a limited set of basic CSS color names locally in your browser. It validates RGB channels, HSL percentages, and alpha boundaries. It does not upload input, approximate color names, identify brand colors, check contrast, or audit design systems.

How to use this tool

  1. Enter a color value in #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(), rgba(), hsl(), hsla(), or a small basic CSS name set.
  2. Choose the source format, or leave auto detection on, then choose the target format you want to emphasize.
  3. Review HEX, RGB/RGBA, HSL/HSLA, alpha, and exact name-match output before copying.

Supported color formats

The tool supports common CSS color formats: short and full HEX, RGB/RGBA, HSL/HSLA, and a small set of basic names such as black, white, red, blue, transparent, and rebeccapurple. It does not parse gradients, image sampling, lab/lch/oklch, or design-tool palettes.

How alpha is handled

The final two HEX digits can represent alpha. RGB and HSL can use an alpha value from 0 to 1 or 0% to 100%. Output keeps alpha in RGBA, HSLA, or 8-digit HEX; colors without alpha are treated as alpha 1.

Color-name boundaries

Color names are exact matches from a limited basic CSS list. The tool does not guess the nearest name, identify brand colors, evaluate design tokens, check accessibility contrast, or model print color differences.

Frequently asked questions

Are #369 and #336699 the same color?

Yes. Three-digit HEX repeats each digit, so #369 expands to #336699.

What does the 80 mean in #33669980?

The final two digits are the alpha channel. 80 in hex is about 0.502 alpha.

Can HSL saturation and lightness omit the percent sign?

No. This tool requires saturation and lightness to use percentages, such as 50%.

Can the tool tell me the nearest color name?

No. It only checks exact matches in a limited basic CSS color-name list.

Last updated: