Does this skill include semantic colors for UI states?

Yes, it includes dedicated supporting scales for error (red), warning (yellow), and success (green/teal) states to ensure functional UI clarity.

What formats are the color values provided in?

All colors are provided in both Hex and HSL formats across a standardized 10-shade scale (50-900) for maximum compatibility.

Can I use these colors directly with Tailwind CSS?

Yes, the 50-900 shade structure is specifically designed to map directly to Tailwind's theme configuration and naming conventions.

How do I choose between the 12 different palettes?

The skill provides pairings like 'Cyan + Blue Grey' or 'Indigo + Cool Grey,' allowing you to pick a foundation based on the desired brand mood and neutral temperature.

Professional UI Color Palettes

Name: Professional UI Color Palettes
Author: svengraziani

bysvengraziani

•

デザインツール

Provides 12 production-ready color scales with hex and HSL values to streamline UI design and design system development.

This skill equips Claude with a comprehensive library of 12 professionally curated color palettes, each featuring a 10-shade scale ranging from 50 to 900. It offers precise Hex and HSL values for primary, neutral, and supporting colors—including specialized variants like cyan, indigo, and warm grey. This resource is ideal for developers and designers needing to define CSS custom properties, configure Tailwind CSS themes, or establish semantic color systems for error, warning, and success states while ensuring visual harmony across a user interface.

主な機能

01Full 10-shade range (50–900) for every color for precise depth control.

0212 curated color palettes with matching primary, neutral, and accent scales.

032 GitHub stars

04Pre-defined supporting scales for common UI states like error, success, and warning.

05Built-in usage guidelines for primary, neutral, and semantic color ratios.

06Dual format values providing both exact Hex codes and HSL coordinates.

ユースケース

01Selecting accessible and high-contrast color combinations for complex web components.

02Generating comprehensive tailwind.config.js theme extensions with custom color scales.

03Defining a consistent CSS variable architecture for a new enterprise design system.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add svengraziani/ui-design color-palettes

For use in Claude.ai and ChatGPT

主な機能

01Full 10-shade range (50–900) for every color for precise depth control.

0212 curated color palettes with matching primary, neutral, and accent scales.

032 GitHub stars

04Pre-defined supporting scales for common UI states like error, success, and warning.

05Built-in usage guidelines for primary, neutral, and semantic color ratios.

06Dual format values providing both exact Hex codes and HSL coordinates.

ユースケース

01Selecting accessible and high-contrast color combinations for complex web components.

02Generating comprehensive tailwind.config.js theme extensions with custom color scales.

03Defining a consistent CSS variable architecture for a new enterprise design system.