color-palette-extractor

Extract dominant colors from images and generate complementary palettes.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the process of extracting and generating color palettes from images, websites, or designs, making it accessible for users to create harmonious color schemes.

Core Features & Use Cases

  • Color Extraction: Identify dominant colors from images, websites, or designs.
  • Palette Generation: Create primary and extended palettes with complementary schemes.
  • Accessibility Check: Ensure color palettes meet WCAG 2.1 contrast ratios.
  • Export Formats: Provide palettes in HEX, RGB, HSL, Tailwind, CSS variables, and more.
  • Use Case: A designer needs to create a new brand color scheme based on a logo. This Skill can extract the dominant colors from the logo and generate a palette with complementary schemes.

Quick Start

Extract a color palette from the image 'brand-logo.png' and generate a Tailwind config.

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 generate a Tailwind config?

You can extract a color palette from an image by identifying its dominant colors and generating complementary schemes. The Skill then exports the generated palette into a Tailwind config or CSS variables.

How do I check if my color palette meets WCAG 2.1 accessibility contrast ratios?

Checking color palette accessibility involves verifying combinations against WCAG 2.1 contrast ratio standards. This Skill automatically performs accessibility compliance checks to ensure your extracted or generated colors meet visual accessibility requirements.

Can I extract dominant colors from a website design for a new branding scheme?

Yes, extracting dominant colors from a website design allows you to build a new branding scheme. The process identifies primary colors and generates extended palettes with complementary color schemes for comprehensive brand guidelines.

What export formats are available when generating color palettes?

When generating color palettes, available export formats include HEX, RGB, HSL, Tailwind configurations, and CSS variables. This variety ensures the extracted color schemes integrate directly into your design system and development workflow.

What is the best way to create a harmonious color scheme from an existing logo?

The best way to create a harmonious color scheme from an existing logo is to extract its dominant colors and apply color theory algorithms. This generates a balanced palette with complementary schemes ready for design system integration.