🎨

FrontendPython

Color Palette Generator

Color Palette Generator is a Frontend skill for Claude Code, published by jezweb in claude-skills.

974 stars102 forkson jezweb/claude-skillsAdded 2026/08/21Repository updated 2026/07/02

View source on GitHub Download repo ZIP

aianthropicautomationclaude-codeclaude-skillscloudflaredevtoolsproductivityreactskillstailwindvite

Install in seconds

Install Color Palette Generator

Copy Color Palette Generator into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/jezweb/claude-skills/tree/main/plugins/design-assets/skills/color-palette ~/.claude/skills/color-palette

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/jezweb/claude-skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: plugins/design-assets/skills/color-palette/SKILL.md in jezweb/claude-skills
Installs to: ~/.claude/skills/color-palette
Collection: One of 25 skills cataloged from this repository
Category: Frontend — 567 skills

What Color Palette Generator does

Color Palette Generator creates accessible color scales, semantic tokens, and dark mode variants from a brand hex. Use it when setting design system colors, generating Tailwind theme values, or checking contrast.

Color Palette Generator is cataloged under Frontend on DirSkills. Color Palette Generator comes from a repository tagged ai, anthropic, automation, claude-code and claude-skills.

Documentation

README

Excerpt

Colour Palette Generator

Generate a complete, accessible colour system from a single brand hex. Produces Tailwind v4 CSS ready to paste into your project.

Workflow

Step 1: Get the Brand Hex

Ask for the primary brand colour. A single hex like #0D9488 is enough.

Step 2: Generate 11-Shade Scale

Convert hex to HSL, then generate shades by varying lightness while keeping hue constant.

Hex to HSL Conversion

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Color Palette Generator

What else does jezweb publish alongside Color Palette Generator?
Color Palette Generator is one of 25 skills that DirSkills catalogs from jezweb/claude-skills, the repository it ships in. Its siblings there include AI Image Generator, App Documentation Generator and Cloudflare API. Each one is a separate skill with its own page in this directory, installs the same way Color Palette Generator does, and is maintained by jezweb in that same repository. The rest of the collection is listed on the jezweb/claude-skills page.
How does Color Palette Generator compare to other Frontend skills?
Color Palette Generator ranks #336 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Color Palette Generator against them. Open each page to compare what they document and how they install.

More from jezweb/claude-skills

Color Palette Generator is one of 25 skills cataloged on DirSkills from jezweb/claude-skills.

See all 25 skills →

AI Image Generator

AI Image Generator uses Gemini and OpenAI image APIs to create scenes, icons, posters, infographics, and other visual assets. Use it when you need text-aware images, transparent icons, batch variations, or multi-reference compositing.

App Documentation Generator

App Documentation Generator browses a web app, screenshots its screens, and writes a structured user guide. Use it to create step-by-step docs, annotated screenshots, and workflow references for end users or admins.

Cloudflare API

Cloudflare API hits the Cloudflare REST API directly for bulk DNS, custom hostnames, email routing, WAF rules, cache purge, and other fleet operations. Use it when wrangler or MCP are too limited or too slow.

Cloudflare Worker Builder

Cloudflare Worker Builder scaffolds and deploys Cloudflare Worker projects with Hono, Vite, and Static Assets. Use it to set up bindings, route APIs, and troubleshoot export or deployment issues.

Codex Review

Codex Review runs an independent code review with the OpenAI Codex CLI and saves a severity-prioritised report. Use it for PRs, commits, uncommitted changes, or whole-app checks to catch bugs, regressions, security, and testing gaps.

D1 Drizzle Schema

D1 Drizzle Schema generates Drizzle ORM schemas for Cloudflare D1 with D1-safe column types, relations, exports, and migration docs. Use it when creating tables, adding a database, or scaffolding a D1 data layer.

More Frontend skills

Color Palette Generator is one of 567 Frontend skills cataloged on DirSkills, ranked #336 by stars among them.

Browse all Frontend skills →

Angular Developer

Angular Developer generates Angular code and provides architectural guidance for Angular projects. Use it for creating projects, components, or services, or for best practices on reactivity, forms, DI, routing, SSR, accessibility, animations, styling, testing, and CLI tooling.

Android Clean Architecture

Android Clean Architecture provides patterns for structuring Android and Kotlin Multiplatform projects, covering module boundaries, UseCases, Repositories, and data layer with Room, SQLDelight, and Ktor. Use it when setting up layered architecture in Android or KMP projects.

Accessibility

Accessibility helps design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards for keyboard, contrast, and screen-reader support. Use it when building or auditing UI that must meet WCAG 2.2 Level AA or reviewing changes for accessibility.