Convert RGB to HSL
Convert RGB values to HSL format (hue, saturation, lightness). Better for creating palettes and color variations. Free tool.
Formula: R,G,B (0-255) → H (0-360°), S (0-100%), L (0-100%)
Quick example: rgb(37, 99, 235) → hsl(217, 82%, 53%)
Color Preview
#2563EB
Color Values
#
HEXR
RGBH
HSLC
CMYK84%, 58%, 0%, 8%A
Alpha100%
T
Tailwindblue-600#2563ebclose matchWCAG Contrast Checker
Foreground
#2563ebBackground
#ffffffContrast Ratio
5.17:1
Sample Text Preview
AA Large: PassAA Normal: PassAAA: Fail
Analogous Palette
About This Conversion
Converting RGB to HSL unlocks intuitive color manipulation. While RGB describes how screens display colors (mixing light channels), HSL describes how humans perceive them. Once in HSL, you can easily create color variations: adjust hue for complementary colors, reduce saturation for muted tones, or modify lightness for tints and shades. This conversion is fundamental for building design tokens, generating accessible color palettes, and creating consistent hover/active states in UI components.
Frequently Asked Questions
How is hue calculated from RGB?
Hue is the angle on the color wheel (0-360°). It's derived from which RGB channel dominates and the ratio between channels. Red=0°, Green=120°, Blue=240°.
What does 50% lightness mean in HSL?
50% lightness is the 'pure' color with no white or black mixed in. Below 50% adds black (darker), above 50% adds white (lighter). 0% is black, 100% is white.
How do I create a color palette with HSL?
Start with a base hue. Complementary: add 180° to hue. Analogous: ±30°. Then vary saturation (60-90%) and lightness (40-60%) for different roles (primary, secondary, accent).
Related Color Conversions
Convert HSL to RGB
H (0-360°), S (0-100%), L (0-100%) → R, G, B (0-255)
Convert RGB to HEX
HEX = # + R.toString(16) + G.toString(16) + B.toString(16)
Convert HEX to HSL
HEX → RGB → HSL (hue 0-360°, saturation 0-100%, lightness 0-100%)
Convert HEX to RGB
R = hex[1-2], G = hex[3-4], B = hex[5-6] (as decimal)