Selector de color y verificador de contraste
Elige un color en la rueda de color, en tu pantalla o en una imagen, y copia su código HEX, RGB, HSL, CMYK u OKLCH. Después comprueba si un texto en ese color se lee bien y obtén tonos más claros, más oscuros y colores combinables.
Gratis · Sin registro
Cómo usarla
- Elige un color con el selector, escribe o pega un código, o abre una imagen y toca el color que quieras.
- Ajústalo con los controles de tono, saturación, luminosidad y opacidad.
- Copia el código que necesites: HEX, RGB, HSL, HSV, CMYK u OKLCH.
- Elige un fondo para comprobar el contraste WCAG y usa el color sugerido si el texto se lee mal.
Por qué usar esta herramienta
Desde la pantalla o una imagen
Usa el cuentagotas del navegador si está disponible, o abre una foto o captura y toca un píxel.
Todos los formatos habituales
HEX, RGB, HSL, HSV, CMYK y OKLCH, cada uno con botón de copiar, y el nombre CSS más cercano.
Contraste WCAG
Relación de contraste con resultados AA y AAA para texto normal, texto grande, iconos y bordes.
Corrección sugerida
Si el texto no cumple, la herramienta busca la versión más clara u oscura más parecida que sí cumple.
Tonos y armonías
Nueve tonos claros y nueve oscuros, y esquemas complementario, análogo, tríada y cuadrado.
Privado y gratis
Las imágenes se leen en tu navegador y nunca se suben. Sin registro y sin límites.
Los códigos de color, explicados
Un mismo color se puede escribir de varias formas. Este es #3366CC, el azul de ejemplo de esta página, en todos los formatos que muestra la herramienta:
| Formato | Ejemplo | Se usa en |
|---|---|---|
| HEX | #3366CC | Diseño web y CSS, manuales de marca |
| RGB | rgb(51 102 204) | Pantallas, CSS y la mayoría de apps de diseño |
| HSL | hsl(220 60% 50%) | CSS, para ajustar luminosidad o saturación a mano |
| HSV (HSB) | hsv(220, 75%, 80%) | Selectores de color de Photoshop, Figma y similares |
| CMYK | cmyk(75%, 50%, 0%, 20%) | Punto de partida aproximado para imprenta |
| OKLCH | oklch(53.2% 0.168 262.3) | CSS moderno, paletas con pasos de luminosidad uniformes |
Cómo convertir HEX a RGB
Un código HEX son tres pares de dígitos hexadecimales para el rojo, el verde y el azul. Cada par es un número de 00 a FF, es decir, de 0 a 255 en decimal. Para convertir un par, multiplica el primer dígito por 16 y suma el segundo; las letras A a F valen de 10 a 15:
- Rojo: 33 es 3 × 16 + 3 = 51.
- Verde: 66 es 6 × 16 + 6 = 102.
- Azul: CC es 12 × 16 + 12 = 204.
- Por tanto, #3366CC es rgb(51 102 204). Un código corto como #36C duplica cada dígito, así que es el mismo color. Un código de ocho dígitos como #3366CC80 añade opacidad: rgb(51 102 204 / 0.5).
Requisitos de contraste WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG) miden el contraste como una relación entre 1:1 (sin contraste) y 21:1 (negro sobre blanco). Se calcula como (L1 + 0,05) ÷ (L2 + 0,05), donde L1 y L2 son la luminancia relativa del color más claro y del más oscuro. Los mínimos son:
| Nivel | Texto normal | Texto grande | Iconos y bordes de campos |
|---|---|---|---|
| AA | 4,5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4,5:1 | – |
Colores habituales sobre blanco y negro
Muchos colores populares se leen peor de lo que parece. Resultados para texto sobre fondo blanco y sobre fondo negro:
| Color | Sobre blanco | Sobre negro |
|---|---|---|
| Rojo #FF0000 | 3,99:1 (no cumple AA) | 5,25:1 (cumple AA) |
| Naranja #FFA500 | 1,97:1 (no cumple AA) | 10,63:1 (cumple AA) |
| Verde #008000 | 5,13:1 (cumple AA) | 4,08:1 (no cumple AA) |
| Azul #0000FF | 8,59:1 (cumple AA) | 2,44:1 (no cumple AA) |
| Gris #767676 | 4,54:1 (cumple AA) | 4,62:1 (cumple AA) |
| Gris #777777 | 4,47:1 (no cumple AA) | 4,68:1 (cumple AA) |
| Azul (ejemplo) #3366CC | 5,36:1 (cumple AA) | 3,91:1 (no cumple AA) |
Elegir un color de una imagen o de la pantalla
Para saber el código de un color de un logotipo, una foto o una captura, pulsa Elegir de una imagen y toca el punto que quieras. La imagen se dibuja en tu navegador y no se sube a ningún sitio.
- Amplía antes los detalles pequeños, porque un píxel del borde de una letra suele ser una mezcla de dos colores.
- Las fotos tienen ruido y sombras, así que toca varios puntos cercanos y compara los códigos.
- Elegir de la pantalla usa el cuentagotas del navegador, que algunos navegadores, incluida la mayoría de los móviles, no ofrecen. Si no ves el botón, haz una captura y ábrela con Elegir de una imagen.
Preguntas frecuentes
¿Cómo encuentro el código HEX de un color de una imagen?
Pulsa Elegir de una imagen, abre la foto o la captura y toca el color. Los códigos HEX, RGB y demás aparecen al instante, cada uno con su botón de copiar. La imagen no sale de tu dispositivo.
¿Qué relación de contraste necesita un texto?
El nivel AA de las WCAG pide al menos 4,5:1 para texto normal y 3:1 para texto grande, que es unos 24 px, o unos 18,7 px en negrita. Los iconos y los bordes de los campos necesitan 3:1. El nivel AAA sube el texto a 7:1 y 4,5:1.
¿HEX y RGB son el mismo color?
Sí. Son dos formas de escribir los mismos valores de rojo, verde y azul. #3366CC y rgb(51 102 204) son exactamente el mismo color, así que puedes usar el que pida tu aplicación o tu código.
¿Es obligatoria la accesibilidad web en España?
Para el sector público lo es desde el Real Decreto 1112/2018, que remite a la norma europea EN 301 549. Desde junio de 2025, la Ley 11/2023 extiende requisitos de accesibilidad a muchos servicios privados para consumidores, como comercio electrónico, banca o viajes. La norma EN 301 549 se basa en las WCAG, por lo que un buen contraste es parte de cumplirla. Consulta a un profesional si tienes dudas sobre tu caso.
¿Por qué mi color CMYK se ve distinto al imprimir?
Las pantallas mezclan luz (RGB) y las impresoras mezclan tinta (CMYK), y la tinta no puede reproducir todos los colores vivos de una pantalla. Esta herramienta usa la fórmula simple sin perfil de color, así que pide a tu imprenta los valores exactos para su máquina y su papel.
¿Qué es OKLCH?
OKLCH describe un color por su luminosidad, su croma (intensidad) y su tono, en una escala pensada para coincidir con la percepción humana. Dos colores con la misma luminosidad OKLCH parecen igual de claros, lo que facilita crear paletas uniformes. Los navegadores actuales admiten oklch() en CSS.
¿Se suben mis imágenes o colores?
No. Todo funciona en tu navegador. Solo se guardan en este dispositivo tus colores recientes y el color de fondo, y puedes borrarlos cuando quieras.
Cómo elegir colores accesibles para tu web
Herramientas relacionadas
¿Necesitas crear algo?
Cuéntanos qué quieres construir.
Cuéntanos qué necesitas crear, desde una web sencilla hasta una app completa, una solución de IA, una automatización o un sistema a medida.