Conversor de colores
Local only — nothing is uploaded unless you save or share it.
Un conversor de colores: de HEX a RGB, de RGB a HEX y de cualquiera a HSL.
- Escribe o pega un color en cualquier formato
- Míralo convertido al instante a todos los demás formatos
- Copia la notación que necesites
- HEX
- HEX con alfa
- RGB
- HSL
Guardar esta herramienta
Ten Conversor de colores a mano
Usa el menú Compartir de tu navegador y luego «Añadir a pantalla de inicio».
Sobre esta herramienta
Pasar de hex a RGB, de RGB a hex, o cualquiera de los dos a HSL es un pequeño impuesto constante, porque las herramientas de diseño, el CSS y los editores de imagen prefieren notaciones de color distintas. El HEX es compacto y domina el CSS y las entregas de diseño. El RGB se corresponde directamente con la forma en que una pantalla emite luz. El HSL describe un color como lo piensa la gente: un tono con una cantidad de colorido y de luminosidad, lo que hace mucho más fácil construir una paleta a mano — mantén el tono, cambia la luminosidad y ya tienes un conjunto coherente de matices. Este conversor acepta cualquiera de esos formatos además de los nombres de color habituales, y es deliberadamente indulgente con la sintaxis. Puedes pegar un hex suelto con almohadilla o sin ella, usar tres o seis dígitos, incluir un canal alfa y escribir tanto el estilo con comas como la sintaxis CSS más reciente separada por espacios. Todo se convierte mientras escribes, con una muestra en vivo para que veas el resultado en lugar de imaginártelo.
Preguntas frecuentes
¿Qué formato debería usar en CSS?
Cualquiera sirve. El HEX es el más común y el más compacto. El HSL merece la pena cuando construyes variaciones de un color a mano, porque ajustar la luminosidad manteniendo el tono y la saturación te da un conjunto coherente de matices mucho más fácilmente que editar dígitos hexadecimales.
¿Además de la conversión hay un selector de color?
Sí — la muestra abre el selector de color de tu sistema, así que un valor se puede elegir a ojo en lugar de teclearlo, y las formas HEX, RGB y HSL se actualizan a la vez. Eso es en la práctica el trabajo de un selector de color HTML: elegir algo que se vea bien y llevarte el código que una hoja de estilos aceptará.
¿Qué significan los dígitos de más en un hex de ocho caracteres?
Los dos últimos son el canal alfa, desde 00 para totalmente transparente hasta ff para totalmente opaco. Está admitido en todos los navegadores actuales y a menudo es más sencillo que cambiar a rgba solo para añadir transparencia.
¿Por qué convertir a HSL y volver cambia a veces un poco el valor?
Porque las componentes HSL se redondean a números enteros para que se lean bien, y ese redondeo no es perfectamente reversible. La diferencia es como mucho de uno o dos pasos por canal y no se ve, pero sí significa que la ida y vuelta no siempre es idéntica byte a byte.
¿Puedo pegar un color sin la almohadilla?
Sí. Se aceptan los valores hex sueltos, igual que la abreviatura de tres dígitos, la sintaxis CSS separada por espacios como rgb(59 130 246) y los nombres de color habituales como teal o crimson.
¿Cómo sé si el texto se leerá bien sobre un color?
La vista previa muestra texto negro y blanco sobre tu color para que lo juzgues de inmediato. Para un aprobado o suspenso real frente a las pautas de accesibilidad, usa el comprobador de contraste, que calcula la relación WCAG como es debido.
Ayuda a mejorar esta herramienta
¿Has encontrado un fallo, quieres un cambio o te falta alguna herramienta?
Tienes un mensaje sin enviar.
Gracias — nos ha llegado. Encontrarás la respuesta en tu bandeja.Go to my messages