Selector de color: HEX, RGB, HSL y CMYK
Elige cualquier color y copia su código en todos los formatos habituales. Toma colores de una foto o directamente de la pantalla, encuentra tonos más claros y oscuros y comprueba que el texto se leerá bien.
----Tonos, de claro a oscuro
Colores combinables: complementario, dividido, análogos, tríada
- Sobre blanco
- -
- Sobre negro
- -
Elige un color para empezar.
Cómo usar el selector de color
Haz clic en la casilla de color para abrir el selector de tu dispositivo, o escribe un código HEX como #1E90FF en la casilla de al lado. La muestra grande se actualiza y todos los códigos de abajo cambian con ella. Pulsa Copiar junto a cualquier formato para copiarlo al portapapeles, listo para pegarlo en CSS, una app de diseño o un documento.
Para sacar un color de una foto o un logotipo, elige Tomar de una imagen, carga el archivo y toca el punto que quieras. La imagen se queda en tu dispositivo. En Chrome y Edge de ordenador también tienes Tomar de la pantalla, un cuentagotas que toma cualquier píxel de la pantalla, incluso fuera del navegador.
HEX, RGB, HSL y CMYK explicados
- HEX es el código de seis dígitos que se usa en la web, como #FF5733. Cada par de dígitos es la cantidad de rojo, verde y azul, de 00 a FF.
- RGB da esas mismas tres cantidades como números de 0 a 255. Las pantallas forman cada color mezclando luz roja, verde y azul.
- HSL describe un color por su tono (la posición en la rueda de color, de 0 a 360°), su saturación (lo vivo que es) y su luminosidad. Es el formato más fácil para aclarar, oscurecer o apagar un color a mano.
- CMYK es la mezcla de tinta cian, magenta, amarilla y negra que se usa en imprenta. Los valores de aquí son una conversión directa; las imprentas usan perfiles de color, así que pide una prueba si el color exacto importa.
Tonos y colores combinables
La fila de Tonos mantiene el matiz y la saturación y cambia la luminosidad de muy claro a muy oscuro, muy útil para estados al pasar el ratón, bordes y fondos de la misma familia. La fila de Colores combinables aplica las reglas de la rueda de color: el complementario opuesto al tuyo, los dos complementarios divididos a sus lados, dos vecinos análogos y dos colores en tríada a un tercio de vuelta. Toca cualquier muestra para convertirla en el color principal.
Contraste y legibilidad
Las casillas de contraste muestran lo legible que es tu color como texto sobre blanco y sobre negro, con la relación de contraste WCAG. Una relación de 4,5:1 cumple AA para texto normal, 3:1 cumple AA para texto grande como títulos y 7:1 cumple el nivel más exigente, AAA. Si el color de tu marca no pasa sobre blanco, usa uno de los tonos más oscuros para el texto y deja el original para botones y detalles.
Los colores en distintas pantallas
El mismo código puede verse algo distinto de una pantalla a otra, porque cambian el brillo, la gama de color y la calibración. Los móviles con pantallas OLED de gama amplia suelen mostrar colores más vivos que un monitor de oficina. Si la fidelidad del color importa, revisa tu diseño en más de un dispositivo.
Selector de color: preguntas frecuentes
¿Cómo encuentro el código HEX de un color?
Elige el color con la casilla de color, o carga una imagen y toca el color que quieras. El código HEX aparece arriba de la lista, listo para copiar.
¿Puedo tomar un color de la pantalla?
Sí, en Chrome y Edge en Windows, Mac y Linux. Pulsa Tomar de la pantalla y haz clic en cualquier píxel. Otros navegadores aún no admiten el cuentagotas; usa Tomar de una imagen.
¿Cómo convierto HEX a RGB?
Escribe o pega el código HEX en la casilla. Los valores RGB, HSL y CMYK se actualizan al instante.
¿La imagen que cargo es privada?
Sí. La imagen se lee en tu navegador y nunca se sube.
¿Qué contraste necesito para el texto?
Al menos 4,5:1 para texto normal y 3:1 para texto grande para cumplir el estándar WCAG AA.
¿Los valores CMYK son exactos para imprimir?
Son una conversión directa. Las imprentas ajustan según el papel y la tinta con perfiles de color, así que pide una prueba cuando el color exacto importe.