RGB to HSL conversion formula
Formula
Normalize R,G,B to 0–1, find min/max, derive L and S, compute H from dominant channel.
Variables
- R, G, B
- sRGB channels (0–255 or 0–1 normalized)
- H, S, L
- Hue (degrees), saturation and lightness (0–1) in HSL
- L
- Relative luminance (WCAG) or lightness in HSL/OKLCH
FAQ
- Is RGB to HSL conversion formula accurate for print workflows?
- Screen RGB and print CMYK use different gamuts. Treat conversions as approximate proofs; calibrate with ICC profiles for commercial print.
- Can I use this formula in CSS?
- Modern CSS supports color-mix(), oklch(), and lab() for many operations. For complex pipelines, compute in JavaScript and export CSS variables.
- Does Color DevByte upload my colors?
- No. Formula reference pages are static documentation; interactive tools run 100% client-side in your browser.
Overview
Transform sRGB values to hue, saturation, and lightness for intuitive theme editing.
Color DevByte documents this formula for developers, designers, and accessibility reviewers who need reproducible color math without sending data to a server.
Use the linked color tools to apply this formula interactively with live preview and multi-format export.
When to use this formula
Apply the rgb to hsl conversion formula when building design tokens, validating WCAG contrast, or automating color pipelines in CSS, Tailwind, or design-system JSON.
For production UI, always verify results with a contrast checker or visual preview — edge cases in gamma correction and gamut mapping can shift outcomes.
Implementation notes
Browser-based tools should linearize sRGB before luminance or ΔE calculations.
Prefer OKLCH or LAB interpolation for gradients and themes to avoid grayish midpoints common in RGB blends.