ToolzColor Converter
Convert colors between hex, RGB and HSL notation.
HEX
#7c5cff
RGB
rgb(124, 92, 255)
HSL
hsl(252, 100%, 68%)
Three notations, one color
Hex and RGB describe exactly the same thing — three channels from 0 to 255 — one in hexadecimal, the other in decimal. HSL rearranges those channels into hue (an angle around the color wheel), saturation and lightness. The conversion is lossless in both directions apart from rounding, so nothing about the color changes; only its spelling does.
What the shorthand forms mean
A three-digit hex like #f0c is expanded by doubling each digit, giving #ff00cc — which is why only 4,096 of the 16.7 million colors have a shorthand. A fourth digit, or a seventh and eighth in the long form, sets the alpha channel: #7c5cff80 is the same violet at 50% opacity. Both forms are accepted here.
Why HSL is worth switching to
HSL is the notation you can reason about. Building a palette means holding the hue steady and varying lightness; a hover state is the base color a few points darker; a disabled state is the same color desaturated. None of those moves are obvious in hex, where the three channels have to shift together. Modern CSS also accepts space-separated syntax — hsl(255 100% 68% / 50%) — which is what you will see in newer codebases.
Equal lightness does not mean equal brightness
HSL is a rearrangement of RGB, not a perceptual model: yellow at 50% lightness looks far brighter than blue at 50% lightness, because the eye is much more sensitive to green than to blue. That is why newer spaces such as OKLCH exist — they keep perceived lightness consistent across hues — and why accessibility work checks the WCAG contrast ratio rather than guessing from the L value.