Color Converter (HEX, RGB, HSL)

Written byOleh Soloninupdated 5 October 2026

Mode

HEX color

Result

HEX#7b3ff2
RGBrgb(123, 63, 242)
HSLhsl(260, 87%, 60%)

The same colour in the three formats CSS understands

Convert a hex colour to RGB and HSL, or build one from RGB values. HSL is the format that makes lighter and darker variants trivial.

Hex is compact, RGB matches how screens actually emit light, and HSL matches how people think about colour — this hue, that saturated, this bright.

HSL is the one worth learning. Building a hover state or a disabled variant means changing the lightness number and leaving hue and saturation alone, which keeps a palette coherent.

How to use

Pick the direction: hex to RGB and HSL, or three RGB numbers to hex and HSL.
Enter the colour — as a hex code or as channel values from 0 to 255.
Copy whichever notation you need: hex and RGB describe the colour exactly, while HSL is rounded to whole numbers here, so take hex or RGB when the exact colour matters.

Why HSL lightness misleads

Pure red, green and blue all have the same HSL lightness: 50 per cent. To the eye they are nothing alike — green looks nearly white and blue nearly black. HSL describes how a colour is mixed, not how much light it gives off.

The reason is the eye's sensitivity, which is many times higher for green than for blue. So for text on a coloured background, HSL lightness is the wrong guide; the measure that works is contrast computed from luminance.

Every row comes from the converter on this page. The three middle colours sit at the same 50 per cent lightness, yet their contrast against white differs by more than a factor of two — 4 to 1 for red, 8.59 to 1 for blue.
Hex	RGB	HSL
#7B3FF2	rgb(123, 63, 242)	hsl(260, 87%, 60%)
#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
#00FF00	rgb(0, 255, 0)	hsl(120, 100%, 50%)
#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)
#767676	rgb(118, 118, 118)	hsl(0, 0%, 46%)

What this calculator shows

The colour in HEX, RGB and HSL simultaneously
Conversion in both directions
Support for three-digit shorthand hex like #f00

What to keep in mind

Works in the sRGB space, the web standard.
Alpha transparency is not covered; these are opaque colour values.

FAQs

What does #f00 mean?

Shorthand for #ff0000. Each digit is doubled, so it only works when both digits of every channel match — which leaves 4,096 short forms against 16.7 million full ones.

Why would I use HSL over hex?

Because it is editable by hand. Lightening a colour means raising one number, whereas in hex you would be recalculating three separate channels without knowing in advance what you would get.

What is the hue number in HSL?

A position on the colour wheel in degrees: 0 red, 120 green, 240 blue. The wheel is circular, so 360 lands back on red.

Is 255 the maximum for a channel?

Yes. Each channel is one byte, giving 0 to 255 and 16.7 million combinations in total.

Are colours with the same HSL lightness equally bright?

No. Pure red, green and blue share an HSL lightness of 50 per cent, yet green has about 9.9 times the WCAG relative luminance of blue, because the eye is far more sensitive to green. Readability decisions need WCAG relative luminance, not HSL lightness.

Is anything lost in conversion?

Between hex and RGB, nothing — they are the same three numbers written differently. HSL is rounded to whole degrees and percentages, so the trip back can change a channel by a unit or two; keep HEX or RGB for the exact colour.

Worked example

Pure red in three notations

Input: #ff0000

Output: rgb(255, 0, 0) · hsl(0, 100%, 50%)

Note: In HSL, dropping lightness to 40% gives a darker red of the same hue — the kind of edit that is guesswork in hex.

Useful links

All tools in Dev Tools

Color Converter (HEX, RGB, HSL)

Result

Related tools

Colour Contrast Checker

CSS Gradient Generator

HTML Entities Encoder

Markdown to HTML Converter

Useful links