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

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

Tool guide

RGB to HSL Converter Online — Free

Three channel numbers say very little about the shade itself: rgb(255, 0, 0) and rgb(200, 30, 30) clearly belong together, yet the digits never explain how. Enter values into the R, G and B fields, press convert, and the color splits into a hue in degrees plus saturation and lightness percentages. The arithmetic happens locally in your browser and the values are not transmitted anywhere. See also: the reverse HSL to RGB conversion, a compact HEX form of the colour for CSS, build a palette straight from a photo.

How to use it

  1. Enter the red channel in the R (0-255) box, taken from a mockup, an eyedropper or the browser console.
  2. Add the green and blue channels in the G (0-255) and B (0-255) fields.
  3. Press convert and read the hue in degrees along with saturation and lightness percentages.
  4. Adjust lightness alone to derive a lighter or darker variant of the very same shade.
  5. Use the copy button to move the result into CSS custom properties or your palette notes.

FAQ

Why break a color into hue, saturation and lightness at all?

Because edits become describable and repeatable. "Ten percent lighter" is a single change to L, whereas in channel space you would juggle three numbers at once and risk drifting to a different part of the color wheel.

Why does grey come back with a hue of zero?

Grey, black and white have three equal channels, so there is no hue to report and saturation is zero. The degree is written as 0 by convention, which does not mean red. As soon as the channels differ by even one step, a meaningful hue appears.

How do I find the complementary color?

Add 180 to the hue and take the remainder modulo 360, leaving saturation and lightness untouched. A triadic scheme uses steps of 120 degrees instead. Convert the resulting values back into channels or a hex code when you are ready to write styles.

Can HSL lightness be used to check WCAG contrast?

Not directly. The standard computes relative luminance with per-channel weights and gamma correction, while L is a simplified figure. Two colors with identical lightness can score differently against white text, so verify with a dedicated contrast calculator.

What if my channels are fractions between zero and one?

That form shows up in OpenGL, shaders and some 3D exports. Multiply each number by 255 and round: 0.2 becomes 51 and 0.75 becomes 191. The fields on this page accept whole numbers in the 0 to 255 range only.

Can anyone else see the color I enter?

No. A script on the open page performs the conversion and makes no network request with your numbers. Keep it open in a spare tab while you work: it needs no sign-in and behaves the same on a laptop and on a phone.

Examples

Checking how pure a brand red really is
Before: R 255, G 0, B 0
After: H 0deg, S 100%, L 50% - a pure hue with no grey in it
Muted blue taken from a competitor site
Before: R 52, G 89, B 148
After: H 218deg, S 48%, L 39%