HSL is the perceptual format; RGB is what your screen actually renders. Converting HSL to RGB is the standard step before sending color to a canvas, image buffer, or older CSS engine.
Compute chroma C = (1 − |2L − 1|) × S, then derive R, G, B based on which 60° hue sector the value falls in, then add the lightness offset.
Use RGB output when piping color values into image manipulation, WebGL, or any low-level graphics API.
Tap any swatch to see its full breakdown.
Navy
hsl(240, 100%, 25%)
Royal Blue
hsl(225, 73%, 57%)
Sky Blue
hsl(197, 71%, 73%)
Baby Blue
hsl(199, 77%, 74%)
Powder Blue
hsl(187, 52%, 80%)
Cornflower Blue
hsl(219, 79%, 66%)
Steel Blue
hsl(207, 44%, 49%)
Dodger Blue
hsl(210, 100%, 56%)
Cerulean
hsl(196, 100%, 33%)
Teal Blue
hsl(180, 100%, 25%)
Cyan
hsl(180, 100%, 50%)
Cobalt Blue
hsl(215, 100%, 34%)
Azure
hsl(210, 100%, 50%)
Sapphire
hsl(216, 85%, 39%)
Midnight Blue
hsl(240, 64%, 27%)
Indigo
hsl(275, 100%, 25%)
Periwinkle
hsl(240, 100%, 90%)
Slate Blue
hsl(248, 53%, 58%)
Colorframe shows you HSL, RGB, and every other format side-by-side as you pick. Copy any with one click.