Conversor de color
Pasa un color entre HEX, RGB, HSL, HSB y CMYK, comprueba si el texto se leerá encima y saca la escala de diez tonos.
Se entiende el HEX con almohadilla y sin ella, de tres o de seis cifras, el rgb() con comas o con espacios, el hsl() y los 148 nombres de CSS. También con transparencia.
#6d28d9rgb(109, 40, 217)hsl(263.4, 70%, 50.4%)263°, 82%, 85%50%, 82%, 0%, 15%La norma de accesibilidad pide 4,5:1 para el texto normal y 3:1 para el grande. Es la misma cuenta que usan las herramientas de auditoría, así que si aquí pasa, allí pasa.
Pulsa una para cargarla. Son el mismo matiz y la misma saturación con la luminosidad movida, que es como se monta una escala de marca sin que los tonos se peleen.
- Tus archivos no salen de tu dispositivo
- Gratis y sin registro
- Sin instalar nada
- Sin marcas de agua
Un color es siempre el mismo color, pero cada programa te lo pide de una forma. El CSS quiere #6D28D9, la aplicación de diseño enseña un HSB, el de imprenta pregunta por el CMYK y el desarrollador de al lado te pasa un rgb(). Traducir entre ellos a mano es tedioso y, en un par de casos, engañoso.
HEX, RGB y HSL son el mismo sitio por tres caminos
Los tres describen la misma pantalla, y por eso la conversión entre ellos es exacta y de ida y vuelta: si entras con un HEX y sales por HSL, al volver tienes el HEX de partida.
El HEX son tres parejas en hexadecimal: rojo, verde y azul, cada una de 0 a 255 escrita con dos cifras. El RGB es lo mismo en decimal, que se lee mejor pero se escribe más largo. El HSL cambia el punto de vista: en vez de decir cuánta luz roja, verde y azul hay, dice qué matiz es —un ángulo de 0 a 360 en la rueda—, cuánta saturación tiene y cuánta luminosidad.
Esa tercera forma es la útil cuando hay que tocar un color, no solo copiarlo. Aclarar un HEX a ojo es probar y fallar; en HSL es subir un número y el matiz se queda donde estaba.
Por qué el HSL lleva decimales
Es la diferencia entre un conversor que sirve y uno que engaña. El HSL de #6D28D9 redondeado a enteros es hsl(263, 70%, 50%), y ese valor, devuelto a HEX, da #6B26D9. Dos puntos de desvío en dos canales.
Parece despreciable y no lo es: en un fondo grande se nota, y sobre todo se nota que el color del CSS no es el del manual de marca sin que nadie sepa por qué. Así que aquí se prueba primero con enteros y el decimal solo aparece cuando hace falta para volver exactamente al color de partida. Pasa en torno a nueve de cada diez veces, porque los enteros rara vez caen justos.
La trampa del HSB
Es el error que más veces rompe una paleta. HSL y HSB no son lo mismo, y como los dos empiezan por «matiz, saturación» y terminan en un porcentaje, se copian valores de uno en otro sin mirar.
La diferencia está en la última letra. En HSL, la luminosidad al 100 % es blanco y el color puro está en el 50 %. En HSB, el brillo al 100 % es el color puro y no se llega al blanco por ahí. Figma, Photoshop e Illustrator hablan HSB; el CSS habla HSL. Si pasas un «70 %, 50 %» de uno al otro te sale un color parecido pero distinto, y el parecido es lo peligroso: nadie revisa lo que parece correcto.
Aquí salen los dos a la vez y con su nombre, precisamente para que no haya que adivinar cuál te está pidiendo el programa que tienes delante.
El CMYK es una aproximación, y conviene saberlo
Los tres primeros espacios describen luz que sale de una pantalla. El CMYK describe tinta sobre papel, y son cosas físicamente distintas: hay colores de pantalla que ninguna tinta reproduce, empezando por los verdes y los azules más vivos.
La conversión que ves es la aritmética estándar, la que rellena un campo y te sitúa. La buena depende del perfil, del papel y de la máquina, y esa te la da la imprenta. Decirlo es más honesto que dar cuatro números con aire de exactitud.
Y si va a llevar texto encima, míralo antes
Elegir un color de marca y descubrir tres meses después que su botón no se lee es un clásico. Por eso debajo de cada color sale su contraste con texto blanco y con texto negro, con la proporción y el nivel que alcanza.
La cuenta es la de las pautas de accesibilidad: 4,5:1 para el texto normal, 3:1 para el grande y 7:1 para el nivel más exigente. No es una opinión de diseño ni una manía: es el mismo número que va a sacar cualquier auditoría, y en España es además lo que pide la normativa de accesibilidad a las webs de las administraciones y a las de quien trabaja para ellas.
Si ninguno de los dos textos llega, el color no está mal: está mal para texto. Sirve igual como fondo de una ilustración o como borde.
La escala, para no elegir diez veces
Una marca no necesita un color: necesita ese color en diez intensidades, para fondos suaves, para bordes, para el texto sobre el claro. La tira de abajo los saca moviendo solo la luminosidad y dejando quietos el matiz y la saturación, que es como se consigue que una escala parezca de la misma familia.
Cada paso se puede pulsar para cargarlo y ver todos sus valores, así que sacar la paleta completa en formato CSS son diez clics y diez copiados.
Todo ocurre en tu navegador mientras escribes. Nada de esto se envía a ningún servidor, que con la paleta de una marca todavía sin presentar no es un detalle menor.
Cómo usarlo en 3 pasos
- 1Elige tu herramientaBusca lo que necesitas hacer. Cada herramienta va directa al grano.
- 2Suelta el archivoArrástralo o búscalo en tu equipo. El trabajo lo hace tu propio navegador.
- 3Descarga el resultadoListo en segundos, sin marcas de agua y sin dejar rastro en ningún servidor.
Preguntas frecuentes
¿Qué diferencia hay entre HSL y HSB?
Que no son lo mismo aunque empiecen igual. En HSL el 50 % de luminosidad es el color puro y el 100 % es blanco; en HSB el 100 % de brillo es el color puro y no hay blanco por ese lado. Figma, Photoshop e Illustrator usan HSB; el CSS usa HSL. Copiar un número de uno en el otro da un color distinto, y es un error que se cuela con facilidad porque el resultado sigue pareciendo un color razonable.
¿Por qué el CMYK que sale aquí no coincide con el de mi imprenta?
Porque la conversión exacta depende del perfil de color, del papel y de la máquina, y eso no es una fórmula: es una tabla que da el fabricante. Lo que ves aquí es la conversión aritmética estándar, que sirve para hacerte una idea y para rellenar un campo. Para un trabajo que va a imprenta de verdad, el valor bueno te lo tiene que dar quien imprime.
¿Qué significa el 4,5:1 del contraste?
Es la proporción entre la luminosidad del texto y la del fondo que exige el nivel AA de las pautas de accesibilidad para texto normal. Para texto grande —a partir de 24 px, o de 19 px en negrita— basta con 3:1. El nivel AAA pide 7:1. Por debajo de 4,5 el texto se lee mal con luz de día, en una pantalla vieja o si tienes la vista cansada, que es casi todo el mundo a las siete de la tarde.
¿Puedo pegar un color con transparencia?
Sí. Se entienden el HEX de ocho cifras, el de cuatro, el rgba() y el hsla(). La transparencia se conserva en las salidas que la admiten y el tablero de cuadros de detrás te deja verla: sin él, un color medio transparente se vería igual que el mismo color opaco.
¿Por qué el HSL sale con un decimal?
Porque sin él no sería el mismo color. El HSL de #6D28D9 redondeado a enteros es hsl(263, 70%, 50%), y ese valor devuelto a HEX da #6B26D9: dos puntos de desvío en dos canales. Parece poco y en un fondo grande se ve. Así que se prueba primero con enteros y solo se añade el decimal cuando hace falta para volver exactamente al color de partida, que es en torno a nueve de cada diez colores. Los decimales son CSS válido y los admite cualquier navegador.
¿De dónde salen los diez tonos de la escala?
Del mismo matiz y la misma saturación que tu color, moviendo solo la luminosidad del 95 % al 10 %. Es la forma habitual de montar la escala de una marca, porque los tonos se parecen entre sí en vez de pelearse. Pulsa cualquiera para cargarlo y ver sus valores.
¿Se envía el color a algún sitio?
No. Todo se calcula en tu navegador según escribes. La paleta de una marca que aún no se ha presentado es información sensible más veces de lo que parece.