Tres notaciones, un color
HEX, RGB y HSL son el mismo color escrito de tres maneras. Los píxeles salen idénticos, así que usa la que resulte más cómoda donde estés.
HEX es #RRGGBB, lo que exportan las herramientas de diseño y pegan los desarrolladores. Corto y fácil de copiar.
RGB deletrea rojo, verde y azul de 0 a 255. Es la forma que quieres cuando el código calcula un color o dibuja directamente sobre un lienzo.
HSL da tono (de 0 a 360 grados), saturación y luminosidad. Encaja con la manera en que la gente piensa realmente al ajustar un color.
Dónde gana HSL
Imagina que necesitas el estado hover de un botón. En HEX no hay modo evidente de oscurecer un poco #3E6FF4: mueves dígitos y comparas a ojo. En HSL bajas la luminosidad 10 puntos. El tono y la saturación siguen ahí, así que los dos colores se ven claramente de la misma familia.
El mismo truco construye paletas. Fija el tono y escalona la luminosidad para una rampa de matices; gira el tono 120 grados para colores contrastados equilibrados.
Si guardas los colores en variables CSS, tener los canales HSL por separado te permite mover todo el tema editando un único número de tono.
Alfa
Un HEX de ocho dígitos como #RRGGBBAA lleva la opacidad en los dos últimos: 80 es aproximadamente el 50% y FF es opaco del todo. Cualquier navegador actual entiende esta forma.
Cuando necesites transparencia usa rgba() o el HEX de ocho dígitos, pero recuerda que superponer un color translúcido no es lo mismo que elegir directamente uno más claro. Si cambia el fondo, el color translúcido cambia con él.
Qué lee esta herramienta
Acepta HEX de tres, cuatro, seis y ocho dígitos, rgb() y rgba(), hsl() y hsla(), tanto en la sintaxis antigua con comas como en la moderna con espacios.
Los colores con nombre como red o rebeccapurple no se interpretan, y tampoco espacios más nuevos como oklch(). Para un color con nombre, lee su valor HEX en las herramientas del navegador y pega ese.