color-palette-extractor

Extract dominant colors from images or websites and export CSS variables, Tailwind tokens, and JSON.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/engmiguelamaral-png/Arquitetos --skill color-palette-extractor-engmiguelamaral-png
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: color-palette-extractor
Source: https://github.com/engmiguelamaral-png/Arquitetos/tree/main/color-palette-extractor
Command: npx skills add https://github.com/engmiguelamaral-png/Arquitetos --skill color-palette-extractor-engmiguelamaral-png

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extracting cohesive color palettes from images, websites, or design assets can be time-consuming and error-prone; this skill automates color extraction and harmony generation to accelerate design work.

Core Features & Use Cases

  • Palette extraction from images, URLs, SVGs, or design files.
  • Color harmony generation (monochromatic, analogous, complementary, triadic).
  • Flexible exports (CSS variables, Tailwind tokens, JSON, design tokens).
  • Use cases include branding refresh, UI theming, and design-system prototyping.

Quick Start

Generate a color palette from this image.

Frequently Asked Questions about color-palette-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract a color palette from an image and export it for my design system?

Extract a color palette from an image by using k-means clustering and color frequency weighting to identify dominant colors. The process generates a primary palette and exports it directly as CSS variables, Tailwind tokens, and JSON for immediate design system integration.

Can I generate color harmony schemes like complementary and triadic from extracted brand colors?

Yes, color harmony generation produces monochromatic, analogous, complementary, and triadic schemes from extracted brand colors. You get an extended scale alongside the primary palette to ensure cohesive UI theming and design-system prototyping.

Does this palette extractor check accessibility contrast and color-blind simulations?

Yes, accessibility checks for contrast and color-blind simulations are built into the palette extraction process. This ensures generated color palettes meet accessibility standards before you export them as CSS variables or Tailwind tokens.

What's the best way to automate extracting dominant colors from a website URL?

Automate extracting dominant colors from a website URL by providing the link for image analysis. The tool applies k-means clustering to isolate dominant colors and outputs a cohesive 5-10 color primary palette with extended scales.

Can I extract color palettes from SVGs or design files, not just raster images?

Yes, palette extraction supports SVGs and design files in addition to standard images and URLs. You can analyze any design asset to generate cohesive color palettes and export them as JSON or design tokens.

How many colors are included in the extracted primary palette?

The extracted primary palette includes 5 to 10 dominant colors. An extended color scale and harmony schemes are also generated alongside this primary set to support comprehensive branding and UI design tasks.