Colour converter

Colour converter is a free tool that converts a colour supplied as HEX, HEX alpha, RGB, RGBA, HSV, HSL or HSLA into multiple equivalent colour formats.

What colour formats can I convert?

You can enter HEX, HEX alpha, RGB, RGBA, HSV, HSL or HSLA and read the corresponding values in each supported format. This is useful when a design specification, stylesheet or third-party API represents the same colour differently.

• HEX represents red, green and blue channels with hexadecimal pairs, usually in the form #RRGGBB.
• HEX Alpha adds an opacity channel. In modern CSS notation this commonly appears as #RRGGBBAA.
• RGB uses red, green and blue channel values, commonly ranging from 0 to 255.
• RGBA adds alpha transparency to RGB.
• HSV describes hue, saturation and value. It is common in colour pickers but is not a standard CSS colour function.
• HSL describes hue, saturation and lightness. CSS supports HSL directly.
• HSLA is HSL with an alpha value.

RGB and HSL are different mathematical descriptions of a colour rather than different colours. Conversion lets you change the representation while retaining the intended colour as closely as the destination format permits.

How do I use the colour converter?

Enter one complete colour value in the Color field, using one of the accepted formats, then read or copy the generated values from the output fields.

1. Copy the source value exactly, including its leading hash, commas, brackets, percentage signs or alpha component where applicable.
2. Place it in the Color field.
3. Read the equivalent values shown under HEX, HEX Alpha, RGB, RGBA, HSV, HSL and HSLA.
4. Choose among the supported colour formats that your destination accepts. For a CSS rule, HEX, RGB, RGBA, HSL and HSLA are common choices. HSV is more often used in editing interfaces and colour calculations.

The conversion runs on the server. Your input travels to the server over HTTPS and is not stored. Although an individual colour is rarely sensitive, consider whether an unreleased palette or set of design tokens is confidential before submitting it to any online service.

Spaces and punctuation form part of RGB, HSL and related syntax, while percentage signs distinguish percentage values. A bare number, an empty value or arbitrary text does not identify a colour. Accented and non-Latin text also has no defined meaning in these numeric formats.

How should I read the converted values?

Read each result as another notation for the same colour, paying particular attention to channel ranges, percentages and alpha transparency. The field you should copy depends on the colour notation supported by the receiving system.

In six-digit HEX, the first pair represents red, the second green and the third blue. For example, #336699 contains hexadecimal channel values 33, 66 and 99, which correspond to decimal RGB values 51, 102 and 153.

Hue is normally expressed as an angle around a colour wheel. Saturation and lightness or value are usually percentages. HSL lightness and HSV value are different calculations, so their percentages should not be compared as if they measured the same property.

Alpha describes opacity. A fully opaque colour does not need an alpha-aware format, but a semi-transparent colour does. If you copy an RGBA or HSLA colour into plain RGB, HSL or six-digit HEX, that destination notation has nowhere to record the alpha channel.

This converter is not documented as a syntax validator with detailed diagnostic messages. Do not rely on it to identify the precise character in malformed input. Common colour-syntax errors include a missing hash in HEX, unmatched brackets, omitted percentage signs, an alpha value outside the expected range, or mixing HSL and RGB channel conventions.

Worked colour conversions

A small example shows how HEX, RGB, HSL and HSV relate. Pure red can be written in the following equivalent forms.

• HEX input #ff0000
• RGB equivalent rgb(255, 0, 0)
• HSL equivalent hsl(0, 100%, 50%)
• HSV equivalent hsv(0, 100%, 100%)

For a less saturated colour, #336699 is equivalent to rgb(51, 102, 153). Its HSL representation is hsl(210, 50%, 40%), while its HSV representation has a hue of 210 degrees, saturation of about 66.7% and value of 60%. An interface may round decimal values or vary spacing without changing the practical meaning.

Transparency provides another straightforward example. rgba(255, 0, 0, 0.5) and hsla(0, 100%, 50%, 0.5) both describe red at half opacity. Under the common eight-digit CSS HEX convention, the corresponding value is #ff000080, where 80 is the quantised alpha byte.

When is converting a colour worth doing?

Colour conversion is worth doing when the receiving application requires a different notation, or when another representation makes debugging easier. Typical cases include translating a Figma value into a CSS custom property, checking an RGBA value found in Chrome DevTools, preparing colour fields for an API payload, or reviewing third-party theme data before deployment.

Conversion is usually unnecessary when the existing colour notation is already supported by the destination. There is little benefit in changing six-digit HEX to RGB solely for machine-readable CSS, and converting backwards and forwards can introduce rounding in HSL or HSV values. Likewise, do not add an alpha channel when every colour is known to be fully opaque.

If you need to choose a colour visually rather than translate a known value, Colour picker is the more direct tool. Conversion also does not replace contrast testing, colour-blindness simulation or colour-profile management. Equivalent numeric values do not prove that foreground text meets WCAG contrast requirements.

Frequently asked questions

Does the converter accept CSS named colours?

No. The documented accepted formats are HEX, HEX alpha, RGB, RGBA, HSV, HSL and HSLA, so names such as red, rebeccapurple or transparent are not listed as supported input. Resolve a named colour to a numeric CSS value before entering it.

Can I enter three-digit HEX values?

The accepted input includes HEX, but the supported HEX lengths are not documented. For predictable input, expand shorthand such as #369 to #336699. The same principle applies to four-digit shorthand containing alpha.

Can I paste a CSS declaration instead of a colour value?

Enter the colour value rather than an entire declaration. For example, use #336699 instead of color: #336699; because the property name and semicolon are not part of the colour itself. Remove surrounding quotation marks when copying a value from JSON or a configuration file.

Will the result preserve wide-gamut or colour-profile information?

No wide-gamut formats or embedded colour profiles are listed as supported. Display P3, Lab, LCH and ICC profile data contain information that the available HEX, RGB, HSL and HSV fields do not express. Use a colour-managed application when profile-aware conversion is required.

Why do converted values sometimes contain decimals?

HSL and HSV calculations can produce fractional percentages even when the source RGB channels are whole numbers. Rounding those figures may slightly alter a later conversion back to RGB. Keep the available precision when storing design tokens, then round only if the target format or coding standard requires it.