Selector de Colores
La herramienta de colores completa para quien crea: elige un color en el selector visual (o cáptalo directo de la pantalla con el cuentagotas), obtén el código en HEX, RGB, HSL y CMYK con un clic para copiar, genera armonías listas (complementario, análogos, triádico y más), crea una escala de 10 tonos a partir de cualquier color y comprueba al instante si el contraste cumple los criterios de accesibilidad. Incluso puedes subir una imagen y extraer sus colores dominantes.
Color base
Formatos
Armonías
Haz clic en un color para usarlo como base · clic en el código para copiar
Complementario
Análogos
Triádico
Split-complementario
Tetrádico
Escala de tonos
Haz clic en cualquier tono para copiarlo.
Contraste y legibilidad
Texto de ejemplo
Texto de ejemplo
Paleta desde imagen
Todos los formatos, sin conversor aparte
Eliges el color y obtienes el código: HEX para el día a día, RGB y HSL para estilos, CMYK como referencia de impresión. Cada formato tiene su botón de copiar, y el campo de entrada acepta cualquiera de ellos — pega "rgb(255, 51, 102)" o "hsl(340, 100%, 60%)" y la herramienta lo entiende.
Armonías y escala de tonos
A partir del color base, la herramienta genera cinco esquemas de armonía usados en diseño: complementario, análogos, triádico, split-complementario y tetrádico — haz clic en cualquier color del esquema para convertirlo en la nueva base.
La escala de tonos crea 10 variaciones de tu color, del más claro (50) al más oscuro (900), siguiendo el patrón de los sistemas de diseño modernos. Perfecta para armar la paleta de un sitio o app.
Contraste y accesibilidad
Mira la tasa de contraste de tu color sobre fondo blanco y negro, con las insignias AA y AAA de los criterios internacionales de accesibilidad (WCAG). Sabrás antes de publicar si ese texto será legible para todos.
Cómo usar
Haz clic en el cuadrado de color para abrir el selector visual, escribe un código en el campo de al lado o usa el cuentagotas para capturar cualquier color de la pantalla. Los formatos, armonías, escala y contraste se actualizan al instante. Para extraer una paleta, sube una imagen en la última sección — los seis colores dominantes aparecen listos para copiar o usar como base.
Preguntas frecuentes
¿La herramienta convierte entre HEX, RGB y HSL?
Sí, automáticamente. Elige o pega el color en cualquier formato y los demás aparecen juntos, cada uno con botón de copiar.
¿Qué significan las insignias AA y AAA?
Son los niveles de los criterios internacionales de accesibilidad (WCAG) para contraste de texto: AA exige una tasa de 4,5:1 y AAA de 7:1. Cuanto mayor, más legible el texto para todos.
¿Cómo funciona el cuentagotas?
Captura el color de cualquier punto de la pantalla, incluso fuera de la página. Está disponible en los navegadores de escritorio recientes; si el botón no aparece, tu navegador aún no ofrece esta función.
¿Mi imagen se sube a algún servidor al extraer la paleta?
No. El análisis ocurre completamente en tu dispositivo y la imagen nunca sale de él.