Selector de color
Encuentra el código exacto de cualquier color, en todos los formatos.
Comprobación de contraste
- AA
- AA grande
- AAA
- AA
- AA grande
- AAA
Funciona en tu navegador. Nada de lo que escribes se envía a ningún sitio.
- 5 formatos de color
- Comprobación de contraste WCAG
- Compatible con opacidad
Cómo elegir un color
- Arrastra en el cuadrado para ajustar saturación y brillo, luego mueve el control de tono.
- O escribe un código en cualquier formato: HEX, RGB, HSL, HSV o CMYK.
- Copia el código que necesites y comprueba su contraste más abajo.
Comparación de formatos de color
Cada fila de abajo describe el mismo naranja. Solo cambia la notación.
| Formato | Ejemplo | Se usa en |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, herramientas de diseño |
| RGB | rgb(240, 138, 60) | CSS, editores de imagen |
| HSL | hsl(24, 84%, 59%) | CSS, el más fácil de ajustar a ojo |
| HSV/HSB | hsv(24, 75%, 94%) | Selectores de apps de pintura y diseño |
| CMYK | cmyk(0%, 43%, 75%, 6%) | Diseño para imprenta y mezcla de tintas |
Usa HEX o RGB para la web, HSL cuando quieras ajustar el brillo o la saturación de un color sin cambiar su tono, y CMYK como punto de partida para imprenta.
Niveles de contraste WCAG
La comprobación de contraste de abajo compara tu color con blanco sólido y negro sólido, y califica ambos según los niveles de WCAG 2.
| Nivel | Texto normal | Texto grande |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Texto grande significa unos 24 px, o 19 px en negrita. La mayoría de los sitios solo necesitan aprobar AA. AAA es un listón más exigente, usado sobre todo en sitios gubernamentales y centrados en accesibilidad.
Consejos para elegir colores accesibles
- Mantén el tono fijo y baja la luminosidad en HSL para conseguir un tono más oscuro del mismo color para los estados hover y activo.
- Un color que aprueba AA en blanco puede fallar sobre un fondo con tinte, así que comprueba el contraste contra el fondo real de la página, no solo blanco o negro.
- El cuentagotas solo funciona en Chrome y Edge en un ordenador. Firefox y Safari todavía no han añadido la API EyeDropper.
- Consigue una prueba de imprenta antes de confiar en un valor CMYK para una tirada completa. Los mismos números pueden verse distintos en papel estucado y sin estucar.
Preguntas frecuentes sobre Selector de color
¿Cómo obtengo el código de color de algo en mi pantalla?
En Chrome y Edge en un ordenador, haz clic en Elegir de la pantalla y luego haz clic en cualquier punto de tu pantalla. Otros navegadores todavía no lo ofrecen, así que haz una captura de pantalla y ábrela en un selector de color de imágenes.
¿Cuál es la diferencia entre HEX, RGB y HSL?
Describen el mismo color de formas distintas. HEX y RGB dan las cantidades de rojo, verde y azul (HEX las escribe en base 16), mientras que HSL da el tono, la saturación y la luminosidad, más fácil de ajustar a mano.
¿Qué ratio de contraste necesita un texto legible?
El nivel AA de WCAG pide al menos 4.5:1 para texto normal y 3:1 para texto grande, es decir, unos 24 px, o 19 px en negrita. El nivel AAA sube el texto normal a 7:1.
¿Son exactos los valores CMYK?
Son una conversión matemática directa desde RGB. Los colores de impresión reales dependen de las tintas, el papel y el perfil de la impresora, así que úsalos como punto de partida y revisa una prueba de impresión.
¿Qué cambia el control de opacidad?
Ajusta la transparencia de 0 (invisible) a 100 (sólido). Por debajo de 100, el código HEX gana dos dígitos más y RGB pasa a rgba(). El contraste se comprueba con el color tal como se ve sobre cada fondo.
¿Para qué sirve HSV que RGB no ofrece?
HSV separa el tono de un color de lo brillante y saturado que se ve, por eso los selectores de pintura y los editores de fotos dan un control para el tono y otro para el brillo en lugar de mezclar rojo, verde y azul a ojo.
¿Puedo obtener un color Pantone aquí?
No. Pantone es un sistema de colores directos con licencia, ligado a tintas específicas, no una simple conversión matemática desde RGB o CMYK. Usa el valor CMYK como punto de partida y confirma la coincidencia exacta con tu imprenta.