Extractor de Paleta Pro — Paleta en HEX, HSL, OKLCH, CMYK
Extraiga de 3 a 16 colores dominantes de cualquier imagen en HEX, RGB, HSL, OKLCH y CMYK. Exporte a CSS, SCSS, Tailwind, JSON o paleta PNG. 100% en su navegador.
Extractor de Paleta Pro — Paletas de Colores para Diseñadores y Front-End
Suelte cualquier imagen y extraiga una paleta de alta calidad de 3 a 16 colores dominantes — con todos los códigos que necesita: HEX, RGB, HSL, OKLCH y CMYK. Ordene por dominancia, luminosidad o tono, vea una barra de porcentaje de la presencia de cada color en la imagen, muestre opcionalmente el color complementario de cada muestra, y exporte su paleta como variables CSS, variables SCSS, fragmento de configuración Tailwind, JSON, lista hex simple, o una imagen PNG descargable.
Cinco códigos de color por muestra
Haga clic en cualquier código para copiarlo. HEX es el más común en la web; RGB es el valor crudo de 8 bits; HSL es tono / saturación / luminosidad, ideal para crear matices y sombras; OKLCH es el espacio de color moderno y perceptualmente uniforme soportado por CSS Color Level 4 — perfecto para paletas accesibles y armoniosas; CMYK es la aproximación para diseño de impresión (modelo sustractivo).
Seis formatos de exportación
Variables CSS (:root { --color-1: ... }), variables SCSS ($color-1, $color-2…), fragmento Tailwind para pegar bajo extend.colors, JSON con todos los códigos y el porcentaje de dominancia, lista hex simple, y una imagen PNG de paleta descargable de 1200×600 con etiquetas HEX y RGB bajo cada muestra — ideal para compartir en Dribbble o en especificaciones de diseño.
Modos de orden & armonías
Dominancia: colores más presentes primero — la paleta fotográfica. Luminosidad: del más claro al más oscuro — útil para rampas de valor UI. Tono: en orden cromático rojo → naranja → amarillo → verde → azul → violeta — útil para muestras tipo arco iris e inspiración de degradados. El toggle complementario muestra un pequeño triángulo del tono opuesto en la esquina de cada chip — perfecto para detectar oportunidades de color de acento.
Consejos
Para mejores resultados, use una foto clara y bien iluminada con temas visuales fuertes. Aumente el número de colores cuando la imagen sea variada; disminúyalo para una paleta enfocada «lista para logo». La barra de dominancia se calcula DESPUÉS de submuestrear la imagen a aproximadamente 200×200 (por velocidad) y agrupa los píxeles en clústeres con el algoritmo Median Cut — el mismo método utilizado en la cuantización clásica de imágenes.
Privacidad
Esta herramienta funciona al 100% en su navegador. Su imagen se lee en la memoria del navegador a través de la API FileReader y nunca se sube a ningún servidor. Sin IA, sin servicio externo, sin librería que descargar — solo JavaScript puro calculando sobre los píxeles de la imagen. Nada se almacena; cerrar la pestaña borra todo.
¿Búsqueda simple y rápida? Prueba el Extractor de Colores de Imagen.