color-palette-extractor

Solid

Extract color palettes from images, websites, or designs. Identifies dominant colors, generates complementary schemes, and exports in multiple formats (HEX, RGB, HSL, Tailwind, CSS variables). Use when users need color schemes from images, brand colors, or design system palettes.

AI & Automation 229 stars 38 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 86/100

Stars 20%
79
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# Color Palette Extractor Extract and generate accessible color palettes from images, websites, and designs. ## Contents - `references/output-template.md` — full report structure for presenting a palette - `references/export-formats.md` — CSS, Tailwind, SCSS, JSON, iOS, Android snippets - `references/color-theory.md` — harmony schemes, accessibility, extraction best practices ## Workflow 1. Identify the source: image file (PNG, JPG, SVG), website URL, screenshot, design mockup, or an existing color code to build from. 2. Extract colors. - From an image: analyze pixel data, identify dominant colors, group similar shades, calculate frequency, and sort by prominence. - From a website: fetch and parse the CSS, extract color values, and identify brand, accent, text, and background colors. - Cluster with K-means; extract 5-10 dominant colors. Ignore near-white and near-black unless significant. 3. Build the primary palette (5-10 colors): most dominant color, 2-3 supporting colors, 1-2 accents, a background, and a text color. Generate an extended palette with tints, shades, tones, and 50-950 numeric scales. See `references/color-theory.md`. 4. Run color harmony analysis to produce complementary, analogous, triadic, split-complementary, tetradic, and monochromatic schemes. See `references/color-theory.md`. 5. Check accessibility: compute WCAG 2.1 contrast ratios for each text/background pairing and test against protanopia, deuteranopia, and tritanopia. Recommend acc...

Details

Author
OneWave-AI
Repository
OneWave-AI/claude-skills
Created
9 months ago
Last Updated
1 weeks ago
Language
N/A
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

color-palette-generator

You are an expert color theorist and accessible design specialist. When given a brand description or mood, generate a complete, accessible color palette with proper contrast ratios. ## Process 1. Understand the brand personality and mood 2. Select a primary color that embodies the brand 3. Build complementary, analogous, and accent colors 4. Verify WCAG contrast ratios for all text/background combinations 5. Provide usage guidelines for each color ## Output Format ### Color Palette: \[Brand Name\] Primary: #HEX — \[Name\] Secondary: #HEX — \[Name\] Accent: #HEX — \[Name\] Background: #HEX — \[Name\] Surface: #HEX — \[Name\] Text Primary: #HEX — \[Name\] Text Secondary: #HEX — \[Name\] ### Accessibility <table header-row='true'> <tr> <td>Combination</td> <td>Contrast Ratio</td> <td>WCAG AA</td> <td>WCAG...

0 Updated 1 weeks ago
prvthmpcypher
AI & Automation Solid

algorithmic-color-palette

Derive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for interactive states, desaturated greys from the brand hue for borders and backgrounds, and semantic colours that feel coherent with the brand rather than generic. Use when building a colour system from scratch or expanding a limited brand palette for UI use.

31 Updated 2 days ago
dembrandt
Web & Frontend Solid

color-accessibility-audit

Analyze color combinations for readability and accessibility compliance per WCAG 2.1/2.2 standards (Contrast Minimums 1.4.3 and Enhanced Contrast 1.4.6). Use this skill whenever the user shares a design, color palette, CSS, HTML, Tailwind config, theme file, screenshot of a UI, or mentions anything about text being hard to read, colors clashing, poor contrast, accessibility compliance (WCAG), or asks "can you check if these colors work together?" Also trigger when reviewing any frontend code, design tokens, or style sheets — even if the user doesn't explicitly ask about contrast. If colors are involved, check them. Covers: hex codes, RGB, HSL, named CSS colors, Tailwind classes, design tool exports, and UI screenshots. Includes color blindness simulation for Protanopia, Deuteranopia, and Tritanopia.

26 Updated 1 weeks ago
georgekhananaev