Selector de color
Elige un color desde una imagen subida, desde la pantalla con el EyeDropper, con el selector nativo, los deslizadores RGB/HSL, o pegando un valor hex. Consulta de un vistazo HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK y OKLCH, además del nombre CSS más cercano, el contraste frente a negro/blanco y paletas de armonía completas.
Las imágenes y los valores de color se procesan en tu navegador. No se sube nada a ningún servidor.
Cómo usar este selector de color
- Elige un color con el selector nativo, pega un valor hex, o usa los deslizadores RGB/HSL.
- Sube una imagen, arrástrala y suéltala, o pégala — luego haz clic en un píxel para capturar su color.
- En los navegadores compatibles, haz clic en «Elegir desde la pantalla» para usar la API EyeDropper.
- Haz clic en cualquier valor (HEX, RGB, HSL, HSV, CMYK, OKLCH) para copiarlo.
- Explora las paletas de tonos claros, oscuros, monocromáticos, complementarios, análogos, triádicos, tetrádicos y complementarios divididos.
- Guarda colores en recientes — permanecen en tu navegador mediante localStorage.
Preguntas frecuentes
¿Puedo elegir un color desde una imagen?
Sí. Sube una imagen, arrástrala y suéltala, o pégala desde el portapapeles. Pasa el cursor para ver el color del píxel en la vista previa, y luego haz clic o toca para seleccionarlo. Todo permanece en tu navegador.
¿Qué es OKLCH y por qué usarlo?
OKLCH es un espacio de color perceptual (luminosidad, croma, tono) que ofrece progresiones de color más uniformes que HSL. CSS lo admite de forma nativa desde 2023 mediante `oklch()`.
¿Funciona el EyeDropper en todos los navegadores?
Funciona en navegadores basados en Chromium (Chrome, Edge, Opera) en escritorio. El botón solo aparece cuando es compatible.
¿Qué tan preciso es el CMYK aquí?
Es una aproximación en pantalla (sin perfil ICC). Para trabajos de impresión, usa siempre un perfil CMYK real en tu aplicación de diseño.
¿Por qué el color que capturo con EyeDropper en la pantalla no coincide con mi CSS?
EyeDropper lee el píxel renderizado — lo que tu monitor muestra realmente tras la gestión de color. En una pantalla de amplio gamut P3, esto difiere ligeramente del hex sRGB de tu hoja de estilos. Para un CSS exactamente fiel a la marca, toma el color directamente de la fuente de diseño (Figma, archivo original) en lugar de la pantalla renderizada.