Selector de color de imagen

Extrae hermosas paletas de colores de cualquier imagen. Haz clic para seleccionar los colores exactos de los píxeles con un aumento de 15x y luego expórtalos para tus proyectos web o de diseño.

Suelta tu imagen aquí

o haga clic para navegar

JPG, PNG, WebP, GIF, BMP (máximo 10 MB)
or

Instrucciones de uso

  1. Sube una imagen - Arrastra y suelta o haz clic para seleccionar cualquier archivo de imagen. Compatible con JPG, PNG, WebP, GIFy el ámbito BMP formatos.
  2. Seleccione colores manualmente Haz clic en cualquier parte de la imagen. Aparecerá una lupa de 15 aumentos para una selección precisa. Usa las teclas de flecha para un control más detallado.
  3. Extraer paleta - Haz clic en "Extraer paleta" para detectar automáticamente los colores dominantes mediante el algoritmo de agrupamiento k-means. Elige entre 4 y 12 colores.
  4. Ordenar y refinar - Ordena los colores por tono, brillo o saturación. Pasa el cursor sobre cualquier muestra para ver sus valores HEX, RGB y HSL.
  5. Exportar - Copiar como variables HEX, RGB, HSL, CSS, SCSS o configuración de Tailwind, o descargar una imagen de paleta PNG.

Caracteristicas

15x lupa

Selección de color con precisión píxel a píxel, ampliación en tiempo real y un cursor en forma de cruz en directo.

Extracción inteligente

El algoritmo de agrupamiento K-means encuentra los colores dominantes más distintivos visualmente en cualquier imagen.

Cuentagotas para pantallas

Utilice la API EyeDropper nativa del navegador para seleccionar colores desde cualquier lugar de la pantalla (Chrome/Edge).

6 formatos de exportación

Exportar como variables HEX, RGB, HSL, CSS, SCSS o un fragmento de configuración CSS de Tailwind.

Ordenar por tono/brillo

Reordena los colores extraídos por tono, brillo o saturación para obtener una paleta más organizada.

100% Privado

Todo el procesamiento se realiza en tu navegador mediante la API HTML5 Canvas. Las imágenes nunca salen de tu dispositivo.

Atajos de teclado

Mover el cursor píxel por píxel
entrar: / Spacios (Amplitud)
Seleccionar color en la posición actual
Esc
Salir de la navegación del teclado

Casos de uso

Este selector de color es perfecto para diseñadores, desarrolladores y creativos que necesitan extraer colores de fotografías, ilustraciones o diseños de interfaz de usuario. Algunos casos de uso comunes incluyen:

Para obtener más herramientas de color, prueba nuestra Generador de paleta de colores AI para combinaciones armoniosas, o el Comprobador de contraste de color para verificar el cumplimiento de las normas de accesibilidad.

Preguntas Frecuentes

La herramienta admite todos los formatos de imagen comunes, incluidos JPG / JPEG, PNG, WebP, GIFy el ámbito BMPPara obtener mejores resultados, utilice imágenes de menos de 10 MB. ¿Necesita convertir formatos primero? Pruebe nuestra Convertidor de imagen.

Utilizamos el algoritmo de agrupamiento k-means, un algoritmo de aprendizaje automático que agrupa colores similares y encuentra los colores dominantes más distintivos visualmente. Analiza píxeles de toda la imagen y encuentra iterativamente los centros de color óptimos. Puedes elegir entre 4 y 12 colores en la paleta extraída.

No. Todo el procesamiento se realiza completamente en su navegador utilizando JavaScript y la API HTML5 Canvas. Sus imágenes nunca salen de su dispositivo, lo que garantiza una privacidad total. Este es el mismo enfoque que utiliza nuestro Image Resizer además Image Compressor.

El botón "Seleccionar de la pantalla" utiliza la API EyeDropper nativa del navegador para que puedas hacer clic en cualquier color visible en tu pantalla, no solo en la imagen que has subido. Esta función está disponible en los navegadores Chrome y Edge. Es perfecta para seleccionar colores de sitios web, aplicaciones o elementos del escritorio.

Puedes exportar tus colores como: códigos HEX, valores RGB, valores HSL, propiedades personalizadas CSS (variables), variables SCSS, un fragmento de configuración CSS de Tailwind o una imagen de paleta PNG descargable. Todos los formatos de texto están listos para pegarse directamente en tu editor de código.

Herramientas relacionadas

Copiado