Конвертер цветов из HSL в RGB
Tool guide
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.
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.
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.
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.
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.
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.
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.
Before: H 0, S 100%, L 50%
After: R 255, G 0, B 0
Before: H 210, S 80%, L 60%
After: R 82, G 143, B 235
Your rating and feedback help decide what to improve next.