Color Palette

A Claude Code skill for color palette workflows and automation

Category: development Source: jezweb/claude-skills

What Is Color Palette? Color Palette is a specialized Claude Code skill designed to simplify and automate the process of generating accessible color systems for digital products. Developed with design system workflows in mind, this tool enables developers and designers to create comprehensive color palettes from a single brand hex code. It outputs a full 11-shade scale, semantic color tokens, dark mode variants, Tailwind CSS v4-compatible code, and built-in accessibility checks following WCAG guidelines. By transforming a single color into a robust, production-ready palette, Color Palette streamlines the often tedious task of setting up brand colors for modern web projects. ## Why Use Color Palette? Color is a foundational element of digital design systems, but creating accessible, versatile, and scalable color palettes can be challenging. Often, teams struggle to maintain consistency, meet accessibility standards, and integrate new brand colors into existing frameworks like Tailwind CSS. Color Palette addresses these pain points by: - Automating tedious calculations: Instead of manually crafting tints and shades, Color Palette generates an 11-step color scale programmatically. - Ensuring accessibility: It checks color combinations against WCAG contrast requirements, helping teams meet legal and ethical standards. - Reducing manual errors: By automating color generation and output, the risk of mistakes in hand-off or implementation is minimized. - Integrating with modern tooling: The output is ready to be pasted directly into Tailwind CSS v4 themes, accelerating development workflows. - Supporting dark mode: In today’s UI landscape, dark mode is a necessity. Color Palette generates dark variants alongside the standard palette. This makes Color Palette invaluable for anyone building or maintaining design systems, creating new Tailwind themes, or ensuring brand colors are accessible by default. ## How to Get Started Using Color Palette within Claude Code is straightforward. Here’s a step-by-step guide: ### 1. Supply a Brand Hex Code Begin by providing your primary brand color as a hex value (e.g., #0D9488). This single input forms the basis for the entire palette. ### 2. Generate the Color Scale Color Palette converts the hex code to HSL, then systematically generates 11 shades (numbered 50 through 950) by varying the lightness while keeping the hue consistent. This approach ensures harmonious tints and shades appropriate for UI use. Example: Hex to HSL Conversion in JavaScript javascript function hexToHSL(hex) { hex = hex.replace(/^#/, ''); const r = parseInt(hex.substring(0, 2), 16) / 255; const g = parseInt(hex.substring(2, 4), 16) / 255; const b = parseInt(hex.substring(4, 6), 16) / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const diff = max - min; let l = (max + min) / 2; let s = 0; if (diff !== 0) { s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min); } let h = 0; if (diff !== 0) { if (max === r) h = ((g - b) / diff + (g < b ? 6 : 0)) / 6; else if (max === g) h = ((b - r) / diff + 2) / 6; else h = ((r - g) / diff + 4) / 6; } return { h: h * 360, s: s * 100, l: l * 100 }; } ### 3. Review Semantic Tokens and Output The tool produces semantic tokens (like primary, onPrimary, etc.), along with CSS variables and Tailwind v4 theme code. You can then copy and paste this directly into your project. ### 4. Check Accessibility Color Palette includes automatic WCAG contrast checks for the palette, ensuring your color choices meet accessibility standards. ## Key Features - 11-Shade Color Scale: Automatically generates a full scale (50–950) for each color. - WCAG Contrast Checking: Built-in contrast checks for all color pairs, flagging insufficient combinations. - Semantic Tokens: Outputs color tokens suitable for design systems (e.g., primary, primary-foreground). - Dark Mode Variants: Generates corresponding dark mode versions of the palette. - Tailwind CSS v4 Support: Produces ready-to-paste theme code for Tailwind v4. - Automation: Eliminates manual palette creation, reducing errors and saving time. - Design System Ready: Ideal for use during initial design system setup or when expanding a brand’s color offerings. ## Best Practices - Start with a High-Quality Brand Color: The initial hex code sets the tone for the entire palette. Select a color that reflects your brand accurately. - Test in Context: Always preview the generated palette within your UI components and layouts to ensure harmony and legibility. - Leverage Semantic Tokens: Use the provided semantic tokens to maintain consistency and avoid hard-coding colors throughout your codebase. - Always Check Accessibility: Even with automated WCAG checks, validate contrast in real-world scenarios, especially for interactive states. - **Iterate as