Selector de color — imagen o espectro
Selecciona colores desde una imagen o un espectro visual. Obten HEX, RGB, HSL, OKLCH y mas, con copia instantanea, comprobaciones de contraste WCAG y guardado de paleta. 100% en tu navegador.
Suelta una imagen aqui
o haz clic para examinar, pega desde el portapapeles o escribe una URL abajo
Como elegir un color desde una imagen
- Haz clic en la zona o arrastra una imagen. Tambien puedes pegar una captura (Ctrl+V / Cmd+V) o escribir una URL de imagen.
- Pasa el cursor (o manten el dedo en movil) sobre la imagen. Una lupa muestra una vista ampliada de la zona.
- Ajusta el tamano de muestra (1×1, 3×3 o 5×5 px) para promediar pixeles cercanos, util en fotos JPEG con ruido.
- Haz clic o levanta el dedo para fijar el color. Aparece en el panel de salida con todos los formatos.
- Pulsa el boton de copia junto a cualquier formato para copiarlo al portapapeles.
- Opcional: pulsa "+ Paleta" para guardarlo o consulta su ratio de contraste WCAG mas abajo.
Como elegir un color desde el espectro
- Cambia al modo "Elegir del espectro" con el selector superior.
- Haz clic o arrastra en el cuadrado de saturacion/valor. Mueve el control de tono para cambiar el matiz base (0°-360°).
- Usa el control alfa para ajustar la transparencia; el patron de cuadros muestra como queda.
- Escribe valores exactos en los campos HEX, RGBA o HSLA para una entrada precisa.
- En el campo saturacion/valor usa las flechas (Mayus+flecha para pasos mayores).
- Copia cualquier formato y guardalo en la paleta igual que en modo imagen.
Prueba estos colores de ejemplo
Haz clic en una muestra para cargarla como color actual y ver todos los formatos.
Ejemplo trabajado
#1E88E5 · RGB(30, 136, 229) HSL(207°, 90%, 51%) · OKLCH(0.62, 0.16, 248°) Contraste vs blanco: 4,6 : 1 AA ✓ Como se procesa tu imagen
Tu imagen nunca sale de tu dispositivo. Al cargarla, se decodifica y renderiza directamente en el navegador mediante la API Canvas. Todo el muestreo, conversion y operaciones de paleta se hacen 100% en el cliente.
No se sube ningun dato de imagen a ningun servidor. No se envian pixeles, nombres de archivo ni valores de color. Comprueba la pestana Red del navegador: no veras peticiones con datos de imagen.
Las paletas y preferencias se guardan en el localStorage del navegador, solo en tu dispositivo. Sin cuenta, sin registro, sin almacenamiento en servidor.
Como funciona este selector de color?
La herramienta se ejecuta completamente en tu navegador. En modo Imagen usa la API Canvas para leer los pixeles de la imagen. En modo Espectro muestra un selector HSV interactivo. Todos los formatos (HEX, RGB, HSL, HSV, CMYK, OKLCH, nombre CSS) se calculan en tiempo real.
Se sube mi imagen a un servidor?
No. La imagen se procesa por completo en tu dispositivo. Ningun dato de imagen, nombre de archivo o valor de color se envia a un servidor. Comprueba la pestana Red de tu navegador: no veras peticiones con datos de imagen.
Puedo elegir un color en cualquier parte de la pantalla?
La seleccion a pantalla completa con la API EyeDropper esta prevista para una version futura. Por ahora puedes elegir desde imagenes subidas o desde el espectro. Truco: haz una captura y pegala directamente en la herramienta.
Cual es la diferencia entre HEX, RGB, HSL y OKLCH?
HEX (#RRGGBB) es el formato web mas comun. RGB define el color con canales rojo, verde y azul (0-255). HSL usa tono, saturacion y luminosidad, mas intuitivo para disenadores. OKLCH es un espacio moderno perceptualmente uniforme: con la misma luminosidad los colores se ven igualmente brillantes, ideal para paletas y sistemas de diseno equilibrados.
Como copio el codigo de color en movil?
Cada fila de formato tiene un boton de copia de al menos 44×44 px. Tocalo y el valor pasa al portapapeles con una confirmacion 'Copiado' que se anuncia a los lectores de pantalla.
Por que el color se ve un poco distinto al de la imagen original?
El muestreo canvas asume el espacio sRGB, por lo que imagenes con otros perfiles pueden variar levemente. La compresion JPEG tambien anade ruido: prueba con muestras de 3×3 o 5×5 px para promediar un pequeno vecindario.
Como compruebo que un color tiene contraste suficiente para accesibilidad?
El panel Contraste muestra ratios WCAG 2.x frente a negro, blanco y un fondo personalizado. AA requiere 4,5:1 para texto normal y 3:1 para texto grande; AAA requiere 7:1. Las insignias indican aprobado o fallo de un vistazo.
Puedo guardar mi paleta sin registrarme?
Si. La paleta se guarda en el localStorage del navegador, sin necesidad de cuenta. Exportala como variables CSS, JSON o una hoja de muestras PNG para llevarla a tu proyecto.
- Prueba la imagen demo para familiarizarte con la lupa antes de subir tu foto.
- Cambia a muestra 3×3 o 5×5 en JPEG con ruido para promediar un pequeno vecindario.
- Usa las flechas del teclado en el campo saturacion/valor para ajustes solo con teclado.
- Fija los colores que mas usas en la paleta y exportalos como variables CSS para tu proyecto.
- Abre el panel Contraste para confirmar que tus colores cumplen WCAG AA antes de publicarlos.