Convertidor de códigos de color
Introduce un color para ver y copiar valores HEX, RGB y HSL.
#624DE3CC
Acerca de esta herramienta
La herramienta de conversión de códigos de color muestra un mismo color en formato HEX, RGB y HSL a la vez y convierte entre ellos. Puedes elegir un color escribiéndolo, seleccionando un color preestablecido o usando el cuentagotas, y también ajustar la transparencia. Es ideal para convertir un color al formato de código que necesitas para diseño web, trabajo en UI, CSS y edición de imágenes.
Cómo usar
Elegir un color
Escribe un valor en los campos HEX, RGB o HSL, o selecciona un color preestablecido. En entornos compatibles, también puedes usar el cuentagotas para tomar un color directamente de la pantalla.
Ajustar la transparencia
Mueve el control deslizante de transparencia para controlar la opacidad del color. El ajuste se refleja en la vista previa de arriba y en los códigos de color.
Revisar y copiar el resultado
Comprueba el color en la vista previa y pulsa el botón de copiar junto a la casilla HEX, RGB o HSL para copiar el valor que necesitas al portapapeles.
Características
HEX, RGB y HSL en un solo lugar
Ingresa un color en un formato y ve sus valores HEX, RGB y HSL a la vez.
Vista previa en tiempo real y transparencia
La vista previa se actualiza al instante al cambiar el color o la transparencia, y el control deslizante permite crear colores semitransparentes.
Cuentagotas y colores preestablecidos
En navegadores compatibles, usa el cuentagotas para tomar un color de la pantalla o haz clic en un color común preestablecido para aplicarlo rápido.
Copia cada formato por separado
Copia el valor HEX, RGB o HSL por separado para usarlo directamente en CSS, herramientas de diseño y documentos.
Ingresar valores directamente
Si ya conoces el código de color, escríbelo en los campos y mira el resultado de la conversión.
Procesamiento en el navegador
Tus valores de color y resultados de conversión se quedan en tu navegador: nada se envía a un servidor.
Casos de uso
Convertir códigos de color CSS
Convierte un color HEX de una maqueta de diseño a RGB o HSL para usarlo en estilos CSS.
Trasladar colores entre herramientas de diseño
Convierte el mismo color al formato de código que exige cada programa cuando los formatos difieren.
Crear fondos semitransparentes
Ajusta la transparencia para generar colores semitransparentes para superposiciones, fondos, botones y bordes.
Tomar colores de la pantalla
Usa el cuentagotas para seleccionar un color mostrado en una página web, imagen o pantalla de app y verlo como código.
Gestionar colores de marca
Mantén juntos los valores HEX, RGB y HSL de los colores de marca para usarlos de forma consistente en web, impresión y documentos de diseño.
Preguntas frecuentes
¿En qué se diferencian HEX, RGB y HSL?
HEX representa un color en hexadecimal, como #8AD0FF. RGB expresa la intensidad de rojo, verde y azul en números, mientras que HSL describe un color mediante tono, saturación y luminosidad.
¿Qué formato debería usar?
HEX es simple y muy usado en la web y en documentos de diseño. RGB es cómodo para ajustar canales de color directamente, y HSL sirve para cambiar el tono o la luminosidad de forma intuitiva.
¿Cómo se refleja la transparencia en el código de color?
Un valor HEX con transparencia se muestra como un código de 8 dígitos, con el valor alfa añadido después del código habitual de 6 dígitos. Por ejemplo, en #8AD0FFCC los dos últimos dígitos representan la transparencia.
¿En qué se diferencia un HEX de 6 dígitos de uno de 8?
Un HEX de 6 dígitos contiene solo los valores de rojo, verde y azul. Un HEX de 8 dígitos añade al final un valor alfa para representar la transparencia.
¿Qué significan 100 % y 0 % de transparencia?
100 % significa totalmente opaco y 0 % totalmente transparente. Los valores intermedios producen colores semitransparentes donde se ve el fondo.
¿Cuál es el rango de valores RGB?
Los valores RGB van de 0 a 255 para cada uno de los colores rojo, verde y azul. Cuanto más alto el valor, más fuerte es ese componente de color.
¿Qué significan los valores HSL?
H es el tono, normalmente un valor entre 0 y 359 grados. S es la saturación y L la luminosidad, y ambos se expresan como porcentaje.
¿El cuentagotas funciona en todos los navegadores?
El soporte depende del navegador y del entorno. En entornos sin soporte, usa los campos de color o los colores preestablecidos.
¿Puedo editar un color después de elegir un preestablecido?
Sí. Después de elegir un preestablecido, ajusta los valores HEX, RGB o HSL o la transparencia para afinar el color.
¿Qué valor copia el botón de copiar?
Cada botón de copiar copia el valor actual del color en ese formato. Puedes copiar solo el valor HEX, RGB o HSL que necesites.
¿Se envía mi color a un servidor?
No. Todo el procesamiento ocurre localmente en tu navegador. Tus valores de color y resultados de conversión nunca se transmiten a un servidor.
Herramientas relacionadas
