Color Code Converter

Convert HEX, RGB, RGBA, HSL, HSLA color codes to each other and preview the color.

Category: Converters

When to use?

Use it to convert a HEX code from a designer into CSS rgb() form, or to check a transparent RGBA color in another format.

How to use

  • Enter a color code (HEX, RGB, HSL, etc.).
  • See all formats converted plus a color preview.
  • Copy the value in the format you want.

Input Explanation

HEX as #RRGGBB or #RGB, RGB as rgb(R, G, B), HSL as hsl(H, S%, L%).

Calculation Basis

It parses the color string with regex and uses color-space conversion formulas to convert between HEX ↔ RGB ↔ HSL ↔ RGBA, formatting each as a CSS-compatible string.

Usage Examples

  • Convert CSS color formats - Convert a designer's HEX code into CSS rgb() or hsl() form.
  • Check transparent colors - Preview RGBA and 8-digit HEX colors including the alpha value.
  • Unify brand colors - Validate brand colors managed in different formats.

Examples

  • #FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)
  • rgba(0, 128, 255, 0.5) → HEX #0080FF80, also HSLA

Cautions

  • Malformed source data can cause parsing errors or broken output.
  • A mismatched encoding standard or complex nested data may break or drop the structure.

Guides

Color code formats

HEX (#RRGGBB) is most common in web CSS; RGB represents each channel 0–255. HSL (hue, saturation, lightness) is intuitive for humans.

Including alpha

RGBA, HEXA (8-digit), and HSLA express transparency. In CSS, use rgba() or 8-digit HEX to control transparency.

FAQ

Is the 3-digit HEX form (e.g. #FFF) supported?

Yes, #FFF is auto-expanded to #FFFFFF.

What are H, S, L in HSL?

H is hue (0-360°), S is saturation (0-100%), L is lightness (0-100%).

Is the alpha (transparency) channel supported?

Yes, #RRGGBBAA, rgba(), and hsla() formats are supported.

Where can I see the color preview?

The entered color is shown as a color box in the result area.

Related Tools