Códigos de color de imagen
Detecta los colores de cualquier imagen y copia sus códigos HEX, RGB y HSL, además de variables CSS listas para pegar. Pensado para developers y maquetadores que necesitan el color exacto.
Configuración
Número de colores a extraer
Paletas de marca e identidad visual desde cualquier imagen
Una de las formas más rápidas de crear una identidad visual coherente es extraer la paleta directamente de los activos existentes: el logo, una fotografía de producto o la imagen de portada de la marca. Esta herramienta devuelve los colores dominantes en formato HEX, RGB y HSL listos para copiar con un clic y usar en Figma, Adobe XD, Canva, VS Code o directamente en CSS y Tailwind.
Design tokens y variables CSS generadas desde imágenes
Cada color extraído incluye también su valor como variable CSS (--color-1: #HEX;), lo que agiliza la creación de design tokens para proyectos web. Descarga la paleta completa como imagen PNG para incluirla en brand books y presentaciones de cliente. Si trabajas con Tailwind CSS o cualquier sistema de diseño basado en tokens, puedes copiar las variables directamente en tu configuración.
Otras herramientas
Preguntas frecuentes
- ¿Cómo se determinan los colores "dominantes"?
- La imagen se redimensiona a 200×200 px para obtener una muestra representativa. Cada píxel se cuantiza agrupando colores similares en cubos de 4 bits por canal. Los grupos más frecuentes determinan los colores dominantes. Es un algoritmo de cuantización por frecuencia, eficiente y sin dependencias externas, que se ejecuta completamente en tu navegador en menos de un segundo.
- ¿Para qué sirven los valores HSL en diseño?
- HSL (Hue, Saturation, Lightness) es la representación más intuitiva para diseñadores y desarrolladores front-end. Permite ajustar fácilmente el tono, la saturación y la luminosidad directamente en CSS. Por ejemplo, `hsl(210, 80%, 50%)` es más fácil de entender que su equivalente hexadecimal. También facilita crear variantes más claras u oscuras del mismo color para sistemas de diseño y brand guidelines.
- ¿Cuántos colores debo extraer?
- 5 colores es ideal para paletas de marca minimalistas donde se necesita la esencia visual de la imagen. 8 colores es el equilibrio perfecto para la mayoría de proyectos de diseño, branding e identidad visual. 12 colores es útil cuando quieres capturar matices más sutiles de fotografías con alta variedad cromática o fondos complejos.
- ¿Por qué aparecen colores grises o desaturados en la paleta?
- Las fotografías suelen tener grandes áreas de cielo, fondos neutros, paredes o sombras. Si esos tonos neutros dominan en la imagen, aparecerán en la paleta. Para obtener una paleta con colores más vivos, usa imágenes con sujetos de colores saturados, como productos, ilustraciones, logos o fotografías con fondos de color.
- ¿Puedo descargar la paleta como imagen?
- Sí. El botón "Descargar paleta" genera una imagen PNG con todos los colores extraídos en franjas horizontales junto a sus códigos hexadecimales. Es útil para documentar paletas de marca en presentaciones de diseño, guías de estilo (brand book), propuestas creativas para clientes o para compartir en redes sociales.
- ¿Para qué se usa esta herramienta en proyectos reales?
- Los usos más frecuentes son: extraer la paleta de colores de un logotipo para garantizar coherencia visual en todos los diseños, analizar los colores dominantes de una foto de producto para elegir colores de fondo complementarios, generar design tokens para temas de sitios web basados en imágenes de marca, y crear guías de color para presentaciones y materiales de marketing digital.
- ¿Los colores se copian al portapapeles con un clic?
- Sí. Haz clic sobre cualquier valor HEX, RGB, HSL o la variable CSS en la tarjeta de color y se copia automáticamente al portapapeles, con un check verde de confirmación. Puedes pegarlo directamente en Figma, VS Code, Adobe XD, Canva, Tailwind CSS o cualquier hoja de estilos sin necesidad de escribirlo manualmente.