Three notations, one colour
HEX, RGB and HSL are the same colour written three ways. The pixels come out identical, so pick whichever is easiest to work with where you are.
HEX is #RRGGBB, what design tools export and developers paste. Short and easy to copy.
RGB spells out red, green and blue from 0 to 255. You want this shape when code computes a colour or draws straight onto a canvas.
HSL gives hue (0 to 360 degrees), saturation and lightness. It maps onto how people actually think about adjusting a colour.
Where HSL earns its keep
Say you need a hover state for a button. In HEX there is no obvious way to make #3E6FF4 a bit darker, so you nudge digits and squint. In HSL you drop the lightness by 10. Hue and saturation stay put, so the two colours clearly belong together.
The same trick builds palettes. Fix the hue and step the lightness for a tint ramp; rotate the hue by 120 degrees for balanced contrasting colours.
If you keep colours in CSS variables, storing the HSL channels separately lets you shift the whole theme by editing one hue number.
Alpha
An eight-digit HEX such as #RRGGBBAA carries opacity in the last two digits: 80 is roughly 50%, FF is fully opaque. Every current browser understands this form.
Where you need transparency, use rgba() or the eight-digit HEX — but remember that layering a translucent colour is not the same as picking a lighter one outright. Change the background and a translucent colour changes with it.
What this tool reads
It accepts three-, four-, six- and eight-digit HEX, rgb() and rgba(), hsl() and hsla(), in both the comma-separated legacy syntax and the space-separated modern one.
Named colours such as red or rebeccapurple are not parsed, and neither are newer spaces like oklch(). For a named colour, read its HEX value out of browser devtools and paste that.