What color formats are provided in these palettes?

Every color shade in all 12 palettes includes both Hexadecimal codes and HSL (Hue, Saturation, Lightness) values for modern web compatibility.

Are these palettes compatible with Tailwind CSS?

Yes, the 50-900 shade naming convention is specifically designed to align with Tailwind CSS's default theme structure, making configuration easy.

Does the skill include neutral colors for backgrounds and text?

Yes, it provides several neutral options including Blue Grey, Warm Grey, Cool Grey, and Pure Grey to serve as the structural foundation of your interface.

How do I implement semantic states like errors or successes?

The skill includes supporting color scales for Red (error), Yellow (warning), and Green/Teal (success) that can be reused across different primary palettes.

What is the recommended usage ratio for these colors?

The guidelines suggest using Neutrals for 80-90% of the UI, Primary colors for 5-10% (actions/branding), and Supporting colors for 5-10% (accents/states).

UI Color Palettes

Name: UI Color Palettes
Author: svengraziani

bysvengraziani

•

Design Tools

Provides 12 production-ready color systems with 50-900 shade scales in Hex and HSL for comprehensive UI design and CSS styling.

The UI Color Palettes skill equips developers with a library of 12 expertly curated color systems, each featuring a full 10-shade spectrum from 50 to 900. It streamlines frontend development by providing exact Hex and HSL values for primary, neutral, and supporting colors, making it an essential tool for defining CSS custom properties, configuring Tailwind CSS themes, and building robust design systems. By following the integrated usage guidelines for primary, neutral, and semantic accents, developers can quickly implement high-contrast, professional interfaces with consistent branding and clear visual hierarchy.

Key Features

01Specialized semantic colors for error, warning, success, and info states.

02Dual-format color values providing both Hex and HSL for all shades.

03Full 10-shade scales (50-900) for every color to ensure design flexibility.

0412 pre-coordinated color palettes featuring primary and neutral pairings.

05Implementation guidelines for proportional color usage in modern UIs.

062 GitHub stars

Use Cases

01Rapidly configuring custom theme extensions for Tailwind CSS or Bootstrap.

02Implementing accessible semantic feedback for forms, alerts, and status indicators.

03Establishing consistent design system color scales and CSS variable architectures.

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

Download Skill