Saltar al contenido
Logo de CrateX.app

CrateX.app

Selector de color de imagen y paleta

Elige colores de una imagen localmente en el navegador, copia valores HEX/RGB/CSS, extrae una paleta representativa de 2 a 32 colores y exporta variables CSS o JSON. Admite entrada HEIC/HEIF.

Arrastra y suelta imagen aquí o haz clic para seleccionar

Soporta PNG / JPEG / WebP / AVIF / HEIC / HEIF

Número de archivos

0 / 1

Tamaño total

0 bytes / 25 MB

Límite por archivo

25 MB
Selector de color de imagen y paleta

Inicio rápido

1
Importar una imagen
2
Hacer clic en la vista previa y copiar HEX/RGB/CSS
3
Elegir tamaño de paleta (4/6/8/12/16/24/32)
4
Extraer colores representativos
5
Exportar variables CSS o JSON

Escenarios comunes

Selección de color de diseño/póster

Extraer colores primarios y de acento para esquema de color

Tema/sistema de diseño

Exportar variables CSS o JSON para proyecto

Estilo de componentes

Extraer colores coincidentes para botones, etiquetas, gráficos

Consistencia de marca

Extraer paleta de colores estándar de activos de marca

Opciones de selector de color y paleta

Número de colores: 2-32, comúnmente 8/12; fotos/gradientes sugieren 16-32
Botones de preset: 4/6/8/12/16/24/32 cambio con un clic
Clasificación: por recuento de muestras cuantificadas de mayor a menor, los colores más comunes primero
Número junto al color: recuento de muestras cuantificadas en la imagen de paleta reducida
Contrato de exportación: las variables CSS usan :root con nombres --color-1. JSON lista index/hex/css/rgb/count para cada color de la paleta.

Consejos de uso

Empezar con 8/12 para ver efecto general, luego aumentar a 16/24/32 según necesidad
Al usar en proyecto, renombrar --color-1 a nombres semánticos (ej., --color-primary)
Mantener página en primer plano al extraer imágenes grandes para evitar limitación del navegador

Limitaciones y compatibilidad

La extracción de paleta reduce automáticamente la muestra para mejorar el rendimiento; los resultados son colores representativos.
Precisión: el muestreo por clic usa un Canvas mostrado de hasta 2,048 px en el lado más largo; la extracción de paleta usa una muestra de 256 px.
HEIC/HEIF es solo entrada; la decodificación local puede fallar, así que conviértelo a PNG/JPEG si es necesario.
Alpha: CSS puede generar rgba(...). HEX/RGB no incluye alpha. JSON conserva alpha mediante el valor css.
Límite de entrada: sin importación de URL, importación desde pegado, cuentagotas de pantalla ni flujo de extensión del navegador.
Límite de color: sin conversión HSL/CMYK/Pantone/LAB/OKLCH, verificación de contraste ni matriz WCAG.
Límite de exportación: sin exportación de muestras Tailwind/SCSS/ASE/Figma/Procreate.

Privacidad y seguridad

La selección de color y la extracción de paleta se realizan en el navegador. La imagen de origen permanece en la memoria de la página mientras esta herramienta está abierta. El ajuste de tamaño de la paleta puede quedar en el almacenamiento del navegador; si la sincronización WebDAV está activada, ese ajuste puede sincronizarse según tu configuración. El color elegido, la paleta, el mensaje de error y los datos de zoom / desplazamiento de la vista previa son estado de revisión en tiempo de ejecución y también pueden sincronizarse mediante el WebDAV state schema mientras existan. El archivo de imagen no se sincroniza de forma predeterminada; solo entra en la sincronización de adjuntos WebDAV si la activas explícitamente. Las exportaciones de paleta CSS/JSON se generan al descargar y no se guardan como resultados separados. En un dispositivo compartido, borra la imagen, los colores elegidos, la paleta, la configuración guardada y los datos del sitio cuando sea necesario.

Preguntas frecuentes

5

Continúa con estas herramientas relacionadas para el siguiente paso.

Acerca de

Acerca de nosotros
Precios

Legal

Términos de uso
Política de privacidad
Política de cookies

Preferencias

Gestionar cookies

Todo el procesamiento de las herramientas ocurre localmente en tu navegador.