Is the output compatible with Tailwind CSS?

Yes, the skill generates 11 shades ranging from 50 to 950, which maps directly to the standard Tailwind CSS color scale and naming conventions.

Can I use my existing brand colors with this skill?

Yes, you can pass specific hex colors as arguments and use the --raw flag to maintain the exact input colors while still generating the matching shade ramps.

What color space does the Palette skill use?

It uses OKLCH, a perceptually uniform color space that ensures color shades look consistent and balanced to the human eye compared to standard RGB/HSL.

How does the strategy flag work?

The --strategy flag allows you to choose how secondary colors are picked from the color wheel, with options like triadic, analogous, and complementary to ensure harmonic relationships.

Do I need to install any dependencies to use Palette?

No installation is required. The skill runs via npx, requiring only Node.js version 18 or higher to be installed on your system.

Tailwind Color Palette Generator

Name: Tailwind Color Palette Generator
Author: asynkron

byasynkron

•

设计工具

Generates cohesive, production-ready color palettes with Tailwind-scale shades using the perceptually uniform OKLCH color space.

Palette is a specialized design utility that enables developers to create complete, balanced color systems from a single anchor color or a set of hex codes. By leveraging the OKLCH color space, it ensures that generated shade ramps (50–950) are perceptually uniform and visually consistent. It provides semantic naming for colors—such as primary, secondary, and accent—making it an ideal tool for building design systems, configuring Tailwind CSS themes, or ensuring high-quality UI aesthetics without needing a dedicated designer.

主要功能

01Provides automatic semantic naming for easy integration into design systems

0230 GitHub stars

03Includes mood presets like --vibrant and --pastel to instantly shift UI energy

04Supports multiple color wheel strategies including triadic, analogous, and complementary

05Uses OKLCH color space for perceptually uniform and cohesive color ramps

06Generates 11 Tailwind-scale shades (50–950) for every base color

使用场景

01Generating accessible and consistent UI themes for dashboards and web applications

02Rapidly prototyping Tailwind CSS color configurations with balanced lightness and chroma

03Bootstrapping a new design system starting from a single brand anchor color

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add asynkron/asynkron-skills palette

For use in Claude.ai and ChatGPT

Download Skill