Color
Selector de color y conversor
Mueve la rueda o escribe en cualquiera de los campos: los demás se ponen al día solos. HEX, RGB, HSL, HSV, CMYK y el nombre CSS más parecido, cada uno con su botón de copiar. Y si el color está en una foto, arrástrala y cógelo con la lupa.
Tus imágenes y tus colores no salen de esta página.
Por qué importa que esto no se suba
Dos de estas cuatro herramientas trabajan con imágenes, y lo que se arrastra aquí casi nunca es una foto cualquiera: es el logotipo de un cliente antes del lanzamiento, una captura de un panel interno o una foto de producto sin publicar. Mandarla al servidor de un desconocido para sacarle un color es un intercambio malo, y encima innecesario: leer los píxeles de una imagen no necesita ningún servidor, lo hace el propio navegador con el lienzo que ya trae. Aquí no hay a dónde enviarla.
Para qué la usa la gente
- Pasar un color de diseño a códigoEl diseñador manda un HSL y el CSS quiere un HEX. Se pega en un campo y sale en el otro.
- Coger el color de una capturaEl azul exacto de un botón que ves en una imagen, sin instalar nada.
- Aclarar u oscurecer con criterioEn HSL se sube o se baja la L y el matiz no se mueve. En HEX eso es a ojo.
- Preparar algo para imprentaVer el CMYK aproximado antes de mandarlo, sabiendo que la imprenta ajustará.
-
Encontrar el nombre de un colorSaber que ese verde tuyo es casi un
seagreeny poder escribirlo así. -
Comprobar qué es un color raroPegar el
rgb(…)que aparece en un archivo antiguo y ver de qué color se trata.
Qué es cada formato, y cuándo usar cada uno
Son la misma cosa escrita de maneras distintas, y cada una se inventó para un trabajo:
HEX es lo que se escribe en CSS: seis cifras hexadecimales, dos por cada canal de rojo, verde y azul. #0f62fe son 15 de rojo, 98 de verde y 254 de azul. No es más que RGB escrito en base 16, así que convertir HEX a RGB no pierde nada: es la misma información con otra notación.
RGB son esos mismos tres números en base 10, del 0 al 255. Es como piensa una pantalla: tres luces que se suman.
HSL es como pensamos las personas: qué color (matiz), cuánto color (saturación) y cuánta luz. Es el formato para trabajar: para aclarar un botón al pasar el ratón se sube la L y ya está, mientras que en HEX habría que recalcular los tres canales a mano.
HSV se parece a HSL pero su tercer número es el valor, no la luminosidad. La diferencia práctica: en HSL, subir la L al máximo da blanco; en HSV, subir la V al máximo da el color puro y saturado. Es lo que usan casi todos los programas de dibujo.
CMYK es para imprimir: cian, magenta, amarillo y negro. Aquí es la conversión directa, sin perfil de color, y conviene tratarla como referencia. Una imprenta trabaja con perfiles que dependen del papel y de la tinta, y ese mismo #0f62fe saldrá distinto en un papel satinado que en uno reciclado.
El nombre CSS más cercano
CSS trae 148 colores con nombre —crimson, rebeccapurple, tomato— y la herramienta te dice cuál se parece más al tuyo. La comparación no se hace en RGB, que es lo fácil, sino en un espacio donde «cerca» quiere decir «se parece a la vista». En RGB salen sugerencias que no se parecen en nada, porque dos colores con números próximos pueden verse completamente distintos.
El lector de color desde una foto
Arrastra una imagen y pasa el cursor por encima: la lupa amplía la zona nueve veces, con el píxel exacto marcado en el centro, y al hacer clic ese color se queda en todos los campos. Es lo que hace falta cuando el color que buscas está en una captura de pantalla, en el logotipo que te ha mandado un cliente en JPG, o en una foto cuya paleta te gusta.
La imagen no se sube. Se lee con el lienzo del navegador y se queda ahí.
Los seis formatos, de un vistazo
| Formato | Ejemplo | Qué son sus números | Para qué sirve |
|---|---|---|---|
| HEX | #0f62fe | Rojo, verde y azul en base 16, dos cifras cada uno | Escribir color en CSS y en casi cualquier herramienta de diseño. |
| RGB | rgb(15, 98, 254) | Los mismos tres canales, del 0 al 255 | Lo mismo que el HEX, pero legible y con transparencia si se usa rgba. |
| HSL | hsl(219, 99%, 53%) | Matiz en grados, saturación y luminosidad en porcentaje | Trabajar: aclarar, oscurecer o desaturar sin recalcular nada. |
| HSV | hsv(219, 94%, 100%) | Matiz, saturación y valor | Programas de dibujo: se parece más a mezclar pintura. |
| CMYK | cmyk(94%, 61%, 0%, 0%) | Cian, magenta, amarillo y negro, en porcentaje de tinta | Imprenta, como referencia: el valor final depende del perfil. |
| Nombre CSS | royalblue | Uno de los 148 nombres que trae CSS | Prototipos y ejemplos, donde un nombre se lee mejor que un número. |
Preguntas frecuentes
¿Convertir de HEX a RGB pierde calidad?
No, ninguna. Son la misma información escrita de dos maneras: el HEX es RGB en base 16. #0f62fe y rgb(15, 98, 254) son exactamente el mismo color, sin ninguna aproximación de por medio.
Lo mismo pasa con HSL y HSV: la conversión da la vuelta exacta. Está comprobado sobre miles de colores: pasar un HEX a HSL y de vuelta devuelve siempre el mismo HEX.
¿Por qué el CMYK no coincide con el de mi programa de diseño?
Porque el CMYK depende del perfil de color, y aquí no hay ninguno. Un programa de diseño convierte usando el perfil de la imprenta, que sabe cómo se comporta esa tinta en ese papel; la conversión directa que se hace aquí no puede saber eso.
Sirve como referencia y para hacerse una idea, no como el valor final que se manda a imprimir. Para eso, el perfil lo pone la imprenta.
¿Cuál es la diferencia entre HSL y HSV?
El tercer número. En HSL, la L va de negro (0) a blanco (100) pasando por el color puro a la mitad. En HSV, la V va de negro (0) al color puro (100), y para llegar al blanco hay que bajar además la saturación.
En la práctica: HSL es más cómodo para hacer variantes claras y oscuras de un mismo color, que es lo que se hace en una web. HSV es lo que usan los programas de dibujo, porque se parece más a mezclar pintura.
¿Puedo escribir un nombre de color en vez de un número?
Sí. Escribe crimson, rebeccapurple o cualquiera de los 148 nombres de CSS en cualquiera de los campos y el resto se pone al día. También se admite grey a la inglesa, no solo gray.
Y al revés: la herramienta siempre te dice qué nombre se parece más a tu color, marcándolo como aproximado cuando no es exacto.
¿Se sube la foto de la que cojo el color?
No. La imagen se lee con el lienzo del propio navegador y no sale de la página: no hay cuentas, no hay base de datos y no hay ninguna petición que la lleve a ningún sitio.
Importa porque lo que se arrastra aquí suele ser el logotipo de un cliente o una captura de algo interno. Con la página cargada, desconecta internet y compruébalo.
Las otras herramientas de color
Generador de paletas
La escala del 50 al 900 y las cinco combinaciones clásicas, listas para copiar como CSS, Tailwind, JSON o imagen.
Comprobador de contraste
La razón de contraste, los niveles AA y AAA, y el color más parecido que sí cumple cuando el tuyo no llega.
Extraer de una imagen
Los colores dominantes de una foto con el porcentaje que ocupa cada uno. La imagen no sale del navegador.