Conversor de colores
Convierte colores entre HEX, RGB y HSL con vista previa en directo.
Herramientas relacionadas
Cómo usar Conversor de colores
- 01
Introduce un color en HEX, por ejemplo #ff8800.
- 02
Míralo convertido a RGB y HSL al instante.
- 03
Copia el formato que necesites.
Qué hace
Es un conversor de color para trabajo web y de diseño que traduce un color entre los tres formatos que más usas: HEX, RGB y HSL, con una muestra en vivo para que veas exactamente con qué estás trabajando.
Es el pegamento cotidiano entre el diseño y el código: hacer coincidir un color de marca de una maqueta con una variable CSS, convertir un valor que un diseñador te dio en un formato al que quiere tu framework, o encontrar un tono un poco más claro para un estado hover.
Todo se ejecuta en tu navegador, así que es instantáneo y nada de lo que introduces se envía a ningún sitio.
En qué se diferencian los formatos
Cada formato describe el mismo color de forma distinta. HEX (como #ff8800) es la forma compacta que se usa en todo CSS y HTML. RGB indica directamente los canales de rojo, verde y azul, que es como las pantallas y el código como canvas piensan en el color. HSL describe el tono, la saturación y la luminosidad, lo que resulta mucho más intuitivo cuando quieres ajustar un color: cambia el tono para moverlo por la rueda, o la luminosidad para oscurecerlo sin elegir a mano un código nuevo.
Cómo funciona la conversión
Introduce un valor HEX y los equivalentes en RGB y HSL se actualizan al instante, así que puedes tomar el formato que espera la herramienta o el código que tengas delante.
Qué no se cubre todavía
Por ahora la herramienta se centra en colores opacos en HEX, RGB y HSL; la compatibilidad con alfa (opacidad) aún no está incluida.
Preguntas frecuentes
¿Qué formatos se admiten?
HEX (#rgb o #rrggbb), RGB y HSL. Introduce un valor HEX y los demás se actualizan en vivo.
¿Admites alfa / opacidad?
Todavía no. Esta herramienta se centra en HEX, RGB y HSL opacos. El soporte de alfa se puede añadir más adelante.
¿Cuál es la diferencia entre RGB y HSL?
RGB establece directamente los canales rojo, verde y azul, tal como una pantalla renderiza el color. HSL describe matiz, saturación y luminosidad, lo que facilita ajustar un color de forma intuitiva, por ejemplo para aclararlo o desplazar su matiz.
¿Qué es un código de color HEX?
Un código HEX como #ff8800 es una forma compacta de escribir un color RGB usando hexadecimal: dos dígitos para cada uno de rojo, verde y azul. Es el formato más usado en CSS y HTML.
¿La conversión ocurre de forma privada?
Sí. La conversión se ejecuta por completo en tu navegador, así que los colores que introduces nunca se envían a un servidor.