Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion Se ejecuta localmente en su navegador
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
Color Converter traduce un solo color entre HEX, RGB, HSL y HSV, y muestra la relación de contraste WCAG frente al blanco y negro para que pueda ver inmediatamente si el texto en ese color es legible. HEX y RGB son los formatos que se copian entre herramientas, pero HSL es el que realmente resulta útil para el trabajo de diseño: separa el tono de la luminosidad, por lo que puede producir un tinte o una sombra que mantenga el mismo tono en lugar de desviarse hacia el gris como lo hacen las ingenuas matemáticas RGB. Los valores hexadecimales y rgba de ocho dígitos llevan un canal alfa, y el convertidor también los maneja.
Where people use the
- Convertir un valor hexadecimal de marca en la sintaxis rgb que espera una herramienta de diseño.
- Producir un conjunto consistente de tonos a partir de un tono de marca usando HSL.
- Comprobar si el color de un enlace es legible sobre un fondo oscuro.
- Hacer coincidir un color elegido de una captura de pantalla con el valor hexadecimal más cercano.
How to use the
- 1
Introduce el color en cualquier formato.
Pegue un valor hexadecimal como 2f6fed, o una función rgb o hsl, o utilice el selector. Los otros formatos se actualizan a medida que escribe.
- 2
Leer todas las representaciones a la vez.
Hex, RGB, HSL y HSV se muestran junto con el canal alfa separado.
- 3
Comprueba las relaciones de contraste.
Las proporciones respecto al blanco y negro le indican si el color se puede utilizar como color de texto o como fondo. El texto del cuerpo necesita 4,5 a 1, el texto grande y los bordes de la interfaz necesitan 3 a 1.
- 4
Copia el formulario que tu código necesita
Cada campo tiene su propio botón de copia, por lo que obtienes exactamente la sintaxis que espera tu hoja de estilo en lugar de formatearla manualmente.
Consejos y mejores prácticas
- Ajuste la luminosidad en HSL en lugar de agregar blanco o negro en RGB; el tono permanece intacto.
- Pruebe el contraste en el tamaño más pequeño en el que se utilizará el texto, no en el tamaño del título.
- Mantenga una paleta documentada de cinco o seis valores en lugar de inventar una nueva por componente.
Preguntas frecuentes
¿Cómo se convierte un color hexadecimal a RGB?
Cada par de dígitos hexadecimales es un canal, leído como base 16. En 2f6fed, 2f es 47 rojo, 6f es 111 verde y ed es 237 azul. La taquigrafía de tres dígitos como f0a duplica cada dígito, por lo que se convierte en ff00aa.
¿Por qué la luminosidad HSL no es lo mismo que el brillo percibido?
Porque el ojo es mucho más sensible al verde que al azul. El azul puro y el amarillo puro pueden compartir un valor de luminosidad, mientras que el amarillo parece mucho más brillante. Es por eso que el contraste debe medirse con una fórmula de luminancia en lugar de juzgarse a partir del número HSL.
¿Qué significa el cuarto par de dígitos en un color hexadecimal?
Alfa, de 00 totalmente transparente a ff totalmente opaco. El hexadecimal de ocho dígitos es compatible con todos los navegadores actuales y es el equivalente hexadecimal de rgba.
¿La conversión CMYK es precisa para imprimir?
No, y ninguna herramienta de navegador puede serlo. CMYK depende de la tinta, el papel y el perfil de la impresora. Utilice este valor como punto de partida y convierta a través del perfil ICC de su proveedor de impresión para cualquier cosa que importe.
¿Cómo selecciono texto legible para un fondo de color?
Compare la relación de contraste entre el color del texto y el fondo. Si ni el blanco ni el negro alcanzan una relación de 4,5 a 1, el fondo está demasiado saturado para el cuerpo del texto y es necesario oscurecerlo o aclararlo antes de utilizarlo detrás del texto.
¿Por qué el mismo hexágono se ve diferente en dos pantallas?
Porque las pantallas difieren en gama, calibración y brillo. Una pantalla de amplia gama muestra colores saturados que un panel sRGB estándar no puede reproducir. Trabaja en sRGB a menos que tengas un motivo específico para no hacerlo.