skills.rest
ArnavPuri
ArnavPuriCOMMUNITY
Explore all skills by this author →
Website𝕏@arnavpuriGitHub

color-palette

Generate color palettes with OKLCH shade scales and CSS custom properties.

3|1|Updated Mar 16, 2026
Search Tags:#accessibility#design system#CSS#color palette#color theory#Tailwind#OKLCH
One-click install
npx skills add https://github.com/ArnavPuri/designskills --skill color-palette-arnavpuri
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-palette
Source: https://github.com/ArnavPuri/designskills/tree/main/skills/color-palette
Command: npx skills add https://github.com/ArnavPuri/designskills --skill color-palette-arnavpuri

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the creation of harmonious, accessible, and production-ready color systems, ensuring brand consistency and adherence to accessibility standards.

Core Features & Use Cases

  • Color Theory Application: Generates palettes based on fundamental color harmonies (complementary, analogous, triadic, etc.) using perceptually uniform color spaces like OKLCH.
  • Shade Scale Generation: Creates a full 19-step lightness scale for a base brand color.
  • Semantic Color Definition: Defines purpose-driven color tokens (e.g., success, warning, error, info).
  • Neutral Scale Creation: Generates a tinted neutral color scale.
  • Accessibility Checks: Provides guidance on WCAG contrast ratios and practical rules for text and UI elements.
  • Dark Mode Adaptation: Offers strategies for adapting color palettes for dark themes.
  • Gradient Generation: Provides rules and examples for creating effective linear and radial gradients.
  • Tailwind CSS Integration: Shows how to configure Tailwind CSS with generated color palettes.
  • CSS Custom Properties Architecture: Demonstrates a three-layer approach for organizing color tokens.

Quick Start

Generate a 19-step lightness scale for the color oklch(0.55 0.15 250) and output it as CSS custom properties.

Frequently Asked Questions about color-palette

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an accessible color palette with a full shade scale for Tailwind CSS?▼

The system generates accessible color palettes for Tailwind CSS by creating a 19-step lightness scale from a base OKLCH color. It outputs CSS custom properties that integrate directly into your Tailwind configuration.

What is the best way to create semantic color tokens that pass WCAG contrast checks?▼

The best way to create semantic color tokens is defining purpose-driven colors like success and error while applying WCAG contrast rules. The system provides practical guidance to ensure text and UI elements meet accessibility standards.

How does OKLCH color space work for generating design system palettes?▼

OKLCH provides a perceptually uniform color space for generating design system palettes, ensuring consistent visual lightness across hues. It applies fundamental color harmonies like complementary and analogous to create harmonious color systems.

Can I use this to generate dark mode adaptations for my existing color system?▼

Yes, you can generate dark mode adaptations for existing color systems. The system offers specific strategies for adapting light theme color palettes to work effectively in dark themes while maintaining accessibility.

Does the generated CSS custom properties architecture support a three-layer token approach?▼

Yes, the CSS custom properties architecture supports a three-layer approach for organizing color tokens. This structure separates raw palette values, semantic mappings, and component-level tokens for scalable design systems.

How do I create linear and radial gradients using color theory principles?▼

To create linear and radial gradients using color theory, the system provides specific rules and examples based on your generated palette. It leverages harmonious relationships within the OKLCH color space to ensure smooth visual transitions.

Related Skills

Explore More Design & Creative Skills→
dylantarredylantarre
38

color-scale

Generate 11-step OKLCH color scales from a base hex color.

Community
Basic
JaivishChauhanJaivishChauhan
6

dark-mode-theming

Configure next-themes with CSS custom properties and Tailwind for Next.js theming.

Community
Intermediate
leonardoteodorooleonardoteodoroo

tailwind-design-system

Create Tailwind v4 design systems with semantic tokens and CVA components.

Community
Advanced
ngochuy13ngochuy13

color-palette

Generate accessible brand and UI color palettes with WCAG contrast ratios.

Community
Advanced