Extractor de paleta de colores

Extraiga la paleta de colores dominante de cualquier imagen. Obtenga códigos hexadecimales, verifique las relaciones de contraste de accesibilidad WCAG y exporte variables CSS de Tailwind al instante.

Cargue cualquier imagen para extraer sus colores dominantes o haga clic en cualquier lugar de la foto para probar un píxel exacto. Obtenga HEX, RGB y HSL para cada muestra, ajuste la cantidad de colores que desea extraer, genere armonías análogas/tríadas/complementarias, verifique el contraste WCAG (con una corrección automática con un solo clic) y exporte la paleta como variables CSS, SCSS, configuración Tailwind, JSON o una hoja de muestra SVG.

Share
Categoría
Herramientas de imagen
Incluye
Características de 6
Acceso
Gratis · Sin registro
Privacidad
Se ejecuta en tu navegador
Extractor de paleta de colores

Calibrating Color Architect......

Please wait a moment

como usar

Cómo utilizar Extractor de paleta de colores

  1. 01

    Sube una imagen

    Arrastra y suelta o selecciona cualquier foto, logotipo o captura de pantalla. La paleta se extrae instantáneamente, completamente en su navegador.

  2. 02

    Refinar la paleta

    Deslice el control de recuento para extraer de 3 a 12 colores, o active "Seleccionar de imagen" y haga clic en cualquier lugar para muestrear un píxel exacto.

  3. 03

    Inspeccionar y ajustar

    Seleccione una muestra para ver su HEX/RGB/HSL, ajuste la luminosidad y verifique el contraste WCAG en blanco y negro; presione la varilla para corregir automáticamente un color defectuoso.

  4. 04

    Exportar

    Elija CSS, SCSS, Tailwind, JSON o SVG y copie el código, o descargue una hoja de muestra SVG para sus documentos de diseño.

Casos de uso

Casos de uso comunes

  • Cree una paleta de marca a partir de un logotipo o una imagen de moodboard
  • Toma el hexadecimal exacto de un color en una captura de pantalla o foto
  • Genere una combinación de colores de interfaz de usuario accesible y compatible con WCAG
  • Exporte variables Tailwind o CSS directamente a un proyecto
  • Cree degradados armoniosos y colores acentuados a partir de una fotografía
Descripción general

Extrae una paleta de colores de cualquier imagen.

Cargue una imagen y el extractor identificará sus colores dominantes, devolviendo valores HEX y RGB listos para usar. Es la forma más rápida de crear una paleta a partir de una foto, combinar un color de marca o encontrar el tono exacto en una captura de pantalla sin una aplicación de diseño.

Para diseñadores, desarrolladores y trabajos de marca.

Convierta la inspiración en valores utilizables: pruebe una puesta de sol para crear un degradado, realce el color de acento de un competidor o genere un tema cohesivo a partir de una imagen destacada. El procesamiento se realiza en su navegador, por lo que sus imágenes nunca se cargan en un servidor.

Características
01
Extracción de color dominante con recuento ajustable de 3 a 12
02
Haga clic para seleccionar píxeles exactos + cuentagotas nativo
03
Valores HEX, RGB y HSL con copia con un solo toque
04
Armonías análogas, triádicas y complementarias.
05
Comprobador de contraste WCAG 2.1 AA/AAA con corrección automática
06
Exporte muestras CSS, SCSS, Tailwind, JSON o SVG
Preguntas frecuentes

Preguntas frecuentes

¿Cómo obtengo códigos de color hexadecimales de una imagen?+

Cargue su imagen y la herramienta la analizará automáticamente para extraer los colores dominantes utilizando la agrupación K-Means. Cada color se muestra con sus valores HEX, RGB y HSL; haga clic en cualquier color para copiarlo.

¿Puedo extraer colores de marca de un logotipo?+

Sí. Cargue cualquier imagen de logotipo y la herramienta identificará los colores primarios y secundarios de la marca, brindándole códigos hexadecimales exactos para usar en CSS, Tailwind o herramientas de diseño como Figma.

¿Qué es la verificación de contraste WCAG?+

WCAG (Pautas de accesibilidad al contenido web) define las relaciones de contraste entre el texto y los colores de fondo. Se requiere una proporción de al menos 4,5:1 para que el texto normal (estándar AA) sea legible por usuarios con discapacidad visual.

¿Cuantos colores identifica el extractor?+

Usted lo controla: un control deslizante le permite extraer de 3 a 12 colores dominantes, clasificados según la cantidad de espacio visual y vitalidad que tienen en la imagen. También puedes hacer clic directamente en la foto para probar cualquier color de píxel exacto.

¿Puedo exportar la paleta para usarla en CSS o Tailwind?+

Sí. La herramienta genera variables de propiedad personalizadas CSS listas para usar (--color-primary: #hex) y fragmentos de configuración de Tailwind que puede pegar directamente en su proyecto.

¿Puedo obtener códigos hexadecimales exactos de un logotipo?+

Sí, el extractor devuelve los colores dominantes como valores hexadecimales que puedes copiar directamente en tus herramientas de diseño.