IT Market
Tools/Design/Colors/HSL to RGB Converter Online — Free
HSL → RGB

Конвертер цветов из HSL в RGB

Tool guide

HSL to RGB Converter Online — Free

HSL is the comfortable place to build a palette: rotate the hue and the shade changes, drag lightness and you get hover and active variants of one button. Graphics libraries, image generators and light controllers, however, ask for channels. Fill in H (0-360), S (0-100%) and L (0-100%), press convert and copy the three numbers. The trigonometry-free formula runs right inside the browser tab. See also: the reverse RGB to HSL calculation, the same colour as a short HEX string, spin hue and saturation in the picker.

How to use it

  1. Set the hue in the H (0-360) field: 0 is red, 120 green, 240 blue, and 360 wraps back to red.
  2. Enter saturation in the S (0-100%) field; at zero any hue collapses to grey.
  3. Set lightness in L (0-100%): 0 yields black and 100 yields white whatever the other values are.
  4. Press the convert button to obtain the red, green and blue channel values.
  5. Copy the result and paste the numbers into your code or into a device configuration screen.

FAQ

What do the H, S and L numbers mean in plain terms?

H is a position on the color wheel in degrees, which is the hue itself. S says how far the color sits from grey: 100% is a pure tone, 0% is a neutral grey. L controls the amount of black and white mixed in, and 50% holds the most saturated version of the hue.

Why do all three channels come out equal at 100% lightness?

That is how the model works: at L 100 the color is fully washed out and at L 0 fully darkened, so hue and saturation no longer matter. For a range of pale tints keep lightness somewhere between 85 and 95 percent and vary saturation instead.

Is HSL the same as the HSB wheel in Photoshop and Figma?

No, they are different models with similar names. In HSB, brightness 100% gives a vivid color, while in HSL the vivid point sits at 50% lightness. Copying numbers from an editor panel straight into these fields produces a noticeably lighter shade than you expect.

How do I build a whole palette from one hue?

Freeze H and S and move only L: about 92% for a section background, 50% for the main button, 35% for its pressed state and 25% for text on a light surface. Convert each variant to channels and store the set as project variables.

Are the channel values rounded, and does it show?

Converting from degrees and percentages nearly always yields fractions, so channels are rounded to whole numbers between 0 and 255. The error stays under half a step and is invisible, though converting back to HSL can return values that differ by one.

Is anything processed on a server?

No, the formula is evaluated by the page's own code inside your tab and nothing is sent out when you press the button. It opens on a phone as well, where typing three short numeric fields is usually quicker than entering a hexadecimal code by hand.

Examples

Base accent color of an interface
Before: H 0, S 100%, L 50%
After: R 255, G 0, B 0
Hover state: the same button, lighter
Before: H 210, S 80%, L 60%
After: R 82, G 143, B 235