RGB to HSL Converter

How RGB Represents Color on Screens

Every color you see on a digital display comes from three light sources: red, green, and blue. The RGB model is additive—starting from black (no light), each channel adds intensity to produce a final color. The sRGB standard, used by almost all screens and web browsers, assigns each channel a value from 0 to 255. That’s 256 discrete levels per channel, giving a total of 16,777,216 possible colors.

In the RGB system, (0, 0, 0) is black, (255, 255, 255) is white, and (255, 0, 0) is full red. But this numerical representation has little to do with how humans perceive color. If you want to make a color lighter, you must increase all three channels proportionally—but the exact proportions depend on the hue, so the result can feel unintuitive. A designer trying to create a tint of a deep blue might guess at higher values and end up with a washed-out gray instead.

The page accepts RGB input as three integers between 0 and 255, separated by commas or spaces—for example, 79, 70, 229. If you enter anything outside that format, you see: “Enter RGB as three numbers 0–255, like 79, 70, 229.” The conversion runs entirely in your browser; no data leaves your machine.

How HSL Models Human Perception of Color

HSL stands for hue, saturation, lightness. It rearranges RGB’s three raw intensities into parameters that match how people describe color. Hue is an angle on a circle: 0° is red, 120° is green, 240° is blue, and 360° wraps back to red. Saturation is a percentage from 0% (gray) to 100% (full purity). Lightness is also a percentage from 0% (black) to 100% (white), with 50% being the “pure” hue at maximum saturation.

The key insight: in HSL, changing the lightness alone does not shift the perceived hue. If you take a brand’s blue at hsl(243°, 75%, 59%) and lower the lightness to 40%, you get a darker version of that exact blue—not a different color. This makes HSL the natural choice for generating themed color families, such as light and dark variants of a primary color.

HSL does have limitations. It is not perceptually uniform: yellow at 50% lightness looks brighter than blue at 50% lightness, because our eyes are more sensitive to some wavelengths. Models like LAB correct for that, but for most UI work HSL’s simplicity outweighs that drawback.

Converting Between RGB and HSL

The conversion math is straightforward. First, normalize the three RGB channels to the range 0–1 by dividing each by 255. Then find the minimum and maximum among the three normalized values. Let max = max(r, g, b), min = min(r, g, b), and delta = max - min.

• Lightness (L) is (max + min) / 2.

• Saturation (S) depends on L. If delta is 0, the color is a shade of gray and S = 0. Otherwise:

  • If L ≤ 0.5, S = delta / (max + min).
  • If L > 0.5, S = delta / (2 - max - min).

• Hue (H) is an angle computed from the channel with the maximum value:

  • If max == r, then H = 60 × ((g - b) / delta + (g < b? 6: 0)).
  • If max == g, then H = 60 × ((b - r) / delta + 2).
  • If max == b, then H = 60 × ((r - g) / delta + 4).

The result is then normalized to the standard HSL ranges: H 0–360, S and L as percentages (multiply the 0–1 values by 100).

Working through the example from the tool: RGB 79, 70, 229. Normalizing gives r = 0.31, g = 0.275, b = 0.898. Max = 0.898 (blue channel), min = 0.275, delta = 0.623. Lightness = (0.898 + 0.275) / 2 = 0.5865 → 59%. Since L > 0.5, saturation = 0.623 / (2 – 0.898 – 0.275) = 0.623 / 0.827 ≈ 0.753 → 75%. Hue: max is blue, so H = 60 × ((0.31 – 0.275) / 0.623 + 4) = 60 × (0.0562 + 4) ≈ 60 × 4.0562 ≈ 243.37°. Hence HSL = (243°, 75%, 59%).

Why HSL Is Essential for Palettes and Themes

Designers and developers building color systems rely on HSL’s ability to separate hue from lightness. A typical workflow:

1. Choose a primary hue (e.g., 243°).
2. Define a saturation that gives the desired vibrancy (e.g., 75%).
3. Generate a scale by varying lightness in steps (e.g., 10%, 30%, 50%, 70%, 90%).

This produces a coherent palette where every color shares the same hue and saturation—only perceived brightness changes. In RGB, replicating that would require recalculating all three channels for each step, and small mistakes would shift the hue inadvertently.

The tool supports this workflow by showing the HSL value prominently. You can also type an HSL directly into its input field (e.g., 243, 75%, 59%) and get the corresponding RGB. Invalid HSL entries trigger the message: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.” All conversions are instant and reversible within the sRGB gamut.

Theme builders often need light and dark modes. In HSL, a dark theme uses the same hue and saturation but a lower lightness (e.g., 20% for background, 80% for foreground text). The visual relationship between colors stays stable, which improves consistency across the UI.

Using HSL for Accessible Color Design

WCAG 2.1 contrast ratios are calculated using relative luminance, not HSL directly. But HSL’s lightness channel maps closely to perceived brightness, making it a practical tool for meeting accessibility requirements. To ensure 4.5:1 contrast between a foreground and a background, designers can adjust the lightness of the foreground while holding hue and saturation constant.

For example, a brand blue at hsl(243°, 75%, 59%) against a white background (hsl(0°, 0%, 100%)) might have insufficient contrast for small text. Lowering the lightness to 40% increases contrast without changing the brand identity. The tool lets you experiment: edit the lightness field and watch the HEX and RGB update instantly. You can also copy the resulting HSL value straight into a CSS hsl() function.

The tool does not compute WCAG ratios directly, but it provides the raw values you need for that calculation. Because HSL is bounded (lightness 0–100%), you can quickly see the limits: a hue at 50% lightness and 100% saturation is its most vivid form, and only at extremes (0% or 100%) does lightness collapse to black or white regardless of hue.

Practical Use in Web Development

CSS natively supports hsl() and hsla() functions. This direct compatibility means you can copy the HSL numbers from the tool and paste them into your stylesheet without conversion. For example:

.button {
  background-color: hsl(243deg 75% 59%);
}

JavaScript also benefits. Manipulating a color by its HSL components is less error-prone than arithmetic on RGB integers. A common pattern is to store a theme’s hue as a CSS custom property (--primary-hue: 243;) and then compute variations like hsl(var(--primary-hue), 75%, 90%) for a light background. The tool helps you decide those variations by showing what the resulting color looks like.

The other output formats—HEX, HSV, CMYK, LAB—cover additional needs. HEX is ubiquitous in design tools and email. CMYK is an on-screen estimate, useful only for rough previews; the tool warns it should not be used for professional print without verification. LAB is valuable when you need a perceptually uniform space, though entering an out-of-gamut LAB value will be adjusted to the nearest displayable color, which may cause a slight shift when converting back.

Understanding the Tool’s Outputs and Edge Cases

The table below summarises the four additional outputs always shown alongside the primary HSL result.

Edge case: out-of-gamut adjustments. If you enter a LAB or CMYK value that maps outside the visible sRGB rectangle, the tool clips the RGB channels to 0–255. When you then convert that adjusted color back to LAB, the result will differ from your original input. This is expected—the display cannot show colors outside its gamut, so the tool gives you the closest reproducible approximation.

RGB input validation. The tool expects exactly three integers between 0 and 255. Extra spaces, missing commas, or non-numeric entries trigger the error message. The same strictness applies to the HSL input field.

Instantaneity. Because all processing happens client-side, there is no network latency. Editing any field—RGB, HSL, HEX, HSV, CMYK, or LAB—recalculates all others in real time. This is especially useful for incremental adjustments, such as fine-tuning a brand color while watching its HSL representation change.

FAQ

Q: Can I use the HSL output directly in CSS?
Yes. The tool outputs hue, saturation, and lightness in the exact format expected by the CSS hsl() function. For example, hsl(243deg 75% 59%) is valid modern CSS and supported in all current browsers.

Q: Why does the CMYK output look different when printed?
The CMYK display is an estimate based on a generic sRGB-to-CMYK conversion profile. Professional print workflows require calibrated ICC profiles and often use separate black channels (e.g., GCR or UCR). Always verify with your printer’s proofing software.

Q: What happens if I enter an LAB value with a negative a or b?**
Negative a* and b* are valid in LAB — they represent green (negative a*) and blue (negative b*). The tool accepts them, but if the resulting Lab color falls outside the sRGB gamut, the RGB will be clamped to the nearest reproducible value. The converted LAB shown after that will reflect the clipped version, not your original.

Q: Is there a maximum lightness or saturation I should avoid for web use?
Lightness at 0% or 100% produces pure black or white regardless of hue or saturation. Saturation at 0% yields gray. For most text and backgrounds, keep saturation between 10% and 90%, and lightness between 10% and 90% for readability. Extremely high saturation can cause visual stress.

Q: Does the tool support alpha transparency?
No. The RGB-to-HSL conversion ignores alpha. For RGBA or HSLA, you can add the alpha value manually to your CSS after copying the HSL numbers.

Q: Why does the HEX value sometimes change when I enter a LAB that seems close?
LAB is a larger color space than sRGB. When you enter a LAB value that sRGB cannot reproduce exactly, the tool clips the RGB values, which changes the HEX. The visible color on your screen will match the clipped RGB, not the theoretical LAB. This is a fundamental limitation of all monitors.