Main Site ↗

color-palette

by jezweb67541GitHub

Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, and Tailwind v4 CSS output. Includes WCAG contrast checking. Use when setting up design systems, creating Tailwind themes, building brand colours from a hex value, or checking colour accessibility.

Unlock Deep Analysis

Use AI to visualize the workflow and generate a realistic output preview for this skill.

Powered by Fastest LLM

Target Audience

Frontend developers and designers building design systems, especially those using Tailwind CSS who need to establish a consistent, accessible color palette from a brand color.

10/10Security

Low security risk, safe to use

9
Clarity
9
Practicality
8
Quality
8
Maintainability
7
Innovation
Development
Compatible Agents
Claude Code
Claude Code
~/.claude/skills/
Codex CLI
Codex CLI
~/.codex/skills/
Gemini CLI
Gemini CLI
~/.gemini/skills/
O
OpenCode
~/.opencode/skills/
O
OpenClaw
~/.openclaw/skills/
GitHub Copilot
GitHub Copilot
~/.copilot/skills/
Cursor
Cursor
~/.cursor/skills/
W
Windsurf
~/.codeium/windsurf/skills/
C
Cline
~/.cline/skills/
R
Roo Code
~/.roo/skills/
K
Kiro
~/.kiro/skills/
J
Junie
~/.junie/skills/
A
Augment Code
~/.augment/skills/
W
Warp
~/.warp/skills/
G
Goose
~/.config/goose/skills/
SKILL.md

Color Palette

Extract dominant colors from a photo and get HEX/RGB values for use in design tools or mood boards.

Dependencies

  • Pillow (image handling; required)
  • colorgram (optional; better dominant-color extraction; pip install colorgram.py)
  • matplotlib (optional; only if generating swatch image with --output)

Setup: OpenClaw does not install Python packages automatically. After installing this skill, run once: pip install -r requirements.txt (from the skill folder or pass the path). If a script fails with ModuleNotFoundError, install the missing package.

Usage

Extract palette from an image

Parameters:

  • image: Path to the image file (JPEG, PNG, etc.).
  • -n, --num-colors: Number of colors to extract (default 5, max 20).
  • --output: Optional path to save a swatch PNG.
python3 scripts/extract_palette.py /path/to/photo.jpg
python3 scripts/extract_palette.py /path/to/photo.jpg -n 8 --output palette_swatch.png

Output: one line per color with HEX and RGB (e.g. #2A4B7C RGB(42, 75, 124)). If --output is set, a simple swatch image is saved.

Sending images to Telegram

These skills are used from the OpenClaw Telegram conversation. To show the user a picture, the agent must (1) run the script with an image output path (PNG or JPG), then (2) send that file to the conversation using the OpenClaw message/media tool. For this skill: use --output <path>.png so you have an image to send; then send that PNG to the user.

OpenClaw allowed paths: The message tool only sends files from allowed dirs (~/.openclaw/media/, ~/.openclaw/agents/, or system temp e.g. /tmp). Use e.g. --output ~/.openclaw/media/palette.png or --output /tmp/palette.png; do not use the skill install directory or sending will fail.

Agent behavior: When the user asks to extract colors from an image (or sends an image for a palette), run the script directly with exec: save the image to a temp path if needed, run extract_palette.py <image_path> -n <N> --output <path>.png with <path> under an allowed dir, return the HEX/RGB text and send the swatch PNG. Do not ask for confirmation; execute and return the palette and image.

Examples

User: "Extract 5 colors from this image" (with image attached).
Action: Save the image to a temp path, run extract_palette.py <path> -n 5 --output /tmp/palette.png, return the HEX/RGB list and send the swatch PNG.

User: "Give me a color palette from [image] and save the swatch as swatch.png."
Action: Run with --output swatch.png, return the palette text and send the image.

Source: https://github.com/jezweb/claude-skills#plugins-design-assets-skills-color-palette

Content curated from original sources, copyright belongs to authors

Grade A
8.5AI Score
Best Practices
Checking...
Try this Skill

User Rating

USER RATING

0UP
0DOWN
Loading files...

WORKS WITH

Claude Code
Claude
Codex CLI
Codex
Gemini CLI
Gemini
O
OpenCode
O
OpenClaw
GitHub Copilot
Copilot
Cursor
Cursor
W
Windsurf
C
Cline
R
Roo
K
Kiro
J
Junie
A
Augment
W
Warp
G
Goose