Color Converter

About this Color Converter

The Color Converter takes a HEX color code and shows the equivalent RGB and HSL values, along with a preview swatch. It is useful for designers and developers who need the same color in different formats.

HEX, RGB and HSL each describe the exact same color information differently: HEX and RGB describe a color by its red, green and blue light components, while HSL describes the same color by hue, saturation and lightness, which is often more intuitive when you want to adjust how vivid or how light or dark a color looks.

For related tasks, try Color Picker, Number Base Converter or HTML Minifier.

How the calculation works

RGB channels are read directly from the HEX pairs. HSL is derived from RGB using the standard formula based on the minimum and maximum channel values.

How to use it

1. Enter a HEX color code, such as #3157d5.
2. Select Convert.
3. Review the RGB and HSL equivalents and the color preview.

Practical example

The HEX color #3157d5 converts to RGB(49, 87, 213) and approximately HSL(228°, 68%, 51%).

The HEX code #3157D5 converts to RGB(49, 87, 213) and to approximately HSL(227deg, 66%, 51%), showing the same shade of blue described through three completely different but equivalent numeric systems.

Things to double-check

Converting a color between formats never changes the actual color, only how it is represented in code or design software; if a converted value looks visually different on screen, that is almost always due to a display's color calibration rather than an error in the conversion itself.

The three formats

HEX, RGB and HSL describe the same colour. HEX writes the red, green and blue amounts as three pairs of hexadecimal digits, so #FF5733 means red 255, green 87 and blue 51, which is rgb(255, 87, 51). In HSL the same colour is about hue 11 degrees, saturation 100 percent and lightness 60 percent. HEX is compact for CSS, RGB matches how screens mix light, and HSL is easier for people to adjust because hue, vividness and brightness are separate.

Adjusting colours with HSL

Because lightness and saturation are separate in HSL, you can make a lighter or darker variant by changing only one number. Keep the hue at 11 degrees and raise the lightness from 60 to 75 percent to get a softer tint of the same orange-red, or lower it to 40 percent for a darker shade. This is a convenient way to build a palette of hover, active and background colours from a single brand colour while keeping them visually related.

Shorthand, transparency and accessibility

Three-digit HEX codes are shorthand where each digit is doubled, so #F53 equals #FF5533. Eight-digit HEX or RGBA adds an alpha value for transparency. Check contrast when you pick text and background colours: accessibility guidelines recommend a contrast ratio of at least 4.5 to 1 for normal text. A conversion does not change contrast, but picking colours in HSL can help you see how lightness differences affect readability.

Why colours can look different

A converted colour is numerically identical, but it may not look the same everywhere. Screens differ in brightness, colour accuracy and colour profile, and printers use a different system, CMYK, which cannot reproduce every screen colour. Colours may also appear different next to other colours. For brand work that must match in print, ask your printer for a proof and use the colour codes supplied in the brand guidelines instead of eyeballing a screen.

Mixing and opacity

A colour at partial opacity blends with what is behind it. Placing #3157D5, which is rgb(49, 87, 213), at 50 percent opacity on white gives the average of each channel with 255: (49 plus 255) over 2 is 152, (87 plus 255) over 2 is 171 and (213 plus 255) over 2 is 234, so rgb(152, 171, 234). On a dark background the result is darker. When you need a solid colour that looks like a transparent one, calculate it this way and convert the result to HEX with the converter.

Worked example: HEX to RGB to HSL

Take the colour #1E90FF, often called dodger blue. Split the HEX code into 1E, 90 and FF, which are 30, 144 and 255 in decimal, so the RGB value is 30, 144, 255. For HSL, the lightness is the average of the largest and smallest channel divided by 255, which is (255 plus 30) over 2 over 255, about 56 percent. The saturation is 100 percent, since the colour is fully vivid at that lightness, and the hue is about 210 degrees, in the blue range. So #1E90FF equals hsl(210, 100%, 56%). Working through one example shows what the converter does, and why the three formats are consistent.

Colour formats on the web

Web pages accept several formats. HEX codes come in three, six or eight digits, where the eight-digit form adds transparency. The rgb function takes three numbers from 0 to 255, and hsl takes a hue angle and two percentages. There are also about 140 named colours, such as tomato and steelblue, and newer functions that describe wider colour ranges on modern screens. Designers often prefer HSL while building a palette and HEX when they hand over the final values. Whatever the format, it is wise to define each colour once in a variable and reuse it across the stylesheet.

Contrast, accessibility and colour vision

Colour choices affect readability. The contrast ratio between two colours is based on their relative luminance, and accessibility guidelines ask for at least 4.5 to 1 for normal text. Black on white has a ratio of 21 to 1, and the grey #767676 on white is about 4.5 to 1, which is the lightest grey that passes for normal text. About 1 in 12 men and a smaller share of women have some form of colour vision deficiency, so never rely on colour alone to show meaning. Use labels, icons and patterns together with colour, and test your design with a contrast checker.

Screen colour versus print colour

Screens create colour with red, green and blue light, while printers use cyan, magenta, yellow and black ink, so a conversion between them can shift the appearance. Some bright screen colours, especially vivid blues and greens, are outside the range that ink can reproduce, which makes them look duller in print. Professional printers use colour profiles and proofs to control the result, and brands often specify spot colours with a reference system. If a colour must match across media, give the printer both the digital value and a physical reference, and view samples in daylight.

Key terms explained

HEX is a way of writing colour as three pairs of hexadecimal digits for red, green and blue. RGB gives the three amounts from 0 to 255. HSL gives hue as an angle on the colour wheel, saturation as the intensity and lightness as how light or dark the colour is. Alpha is transparency. The sRGB colour space is the standard for most screens, and CMYK is the ink system for printing. Contrast ratio measures the difference in brightness between two colours, which affects how readable text is.

Rules of thumb and quick checks

Each HEX pair is a number from 00 to FF, which is 0 to 255, so FF0000 is pure red, 00FF00 pure green and 0000FF pure blue. Equal values give grey: 808080 is mid-grey. In HSL, hue 0 is red, 120 green and 240 blue. Lower the lightness to darken and raise it to lighten. A shorthand code such as F80 stands for FF8800. Check text and background colours for a contrast ratio of at least 4.5 to 1.

Frequently asked questions