A comprehensive design system tool for generating WCAG-compliant color palettes, semantic tokens, and accessible UI themes.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install colors
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install colors using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Colors?
The Colors skill is a specialized utility within the Openclaw Skills ecosystem designed to help developers build high-quality, accessible design systems. It provides programmatic guidelines and workflows for WCAG compliance, ensuring that every color combination meets strict contrast ratios like 4.5:1 for normal text and 3:1 for UI components. By leveraging this tool, development teams can move away from arbitrary hex codes and toward a structured, HSL-based approach that guarantees visual consistency across various display modes.
This skill emphasizes the importance of inclusive design by providing frameworks to support the 8% of users with color vision deficiencies. It guides developers in creating a three-layer semantic token architecture—Primitives, Semantic, and Component layers—to ensure that design systems remain maintainable and scalable. Whether you are building a fintech dashboard or a healthcare portal, this skill provides the technical foundation for professional color management.
Colors Use Cases
- Creating WCAG AA and AAA compliant user interfaces to meet legal accessibility standards.
- Implementing a multi-layer semantic token system for large-scale CSS and Tailwind projects.
- Generating cohesive dark mode themes that utilize surface luminosity instead of traditional shadows.
- Designing accessible alerts and status indicators that do not rely on color alone to convey meaning.
- Developing brand-aligned neutral palettes by applying subtle primary color tints to grays.
How Colors Works
- Analyze the base brand colors and convert them into HSL coordinates for easier manipulation.
- Calculate contrast ratios against standard backgrounds to ensure compliance with WCAG 2.1 thresholds.
- Generate a full palette scale (100-900) by programmatically adjusting the lightness value within the HSL space.
- Map raw color primitives to functional semantic tokens such as primary, error, and background roles.
- Distribute the colors across the UI using the 60-30-10 rule to balance dominant, secondary, and accent elements.
Colors Setup
To begin using the Colors skill within your project, ensure your environment is configured to support Openclaw Skills.
# Install the design system module
openclaw install colors
# Audit your existing CSS for contrast issues
openclaw colors --audit ./styles/main.css
You should then define your primitive variables in your global CSS file using the HSL format recommended by the tool to enable easy variations.
Colors Data Schema & Taxonomy
The skill organizes color data using a hierarchical taxonomy to ensure maximum maintainability:
| Level | Category | Purpose |
|---|---|---|
| Layer 1 | Primitives | Stores raw hex/HSL values (e.g., --blue-500) |
| Layer 2 | Semantic | Defines functional roles (e.g., --color-text-primary) |
| Layer 3 | Component | Maps tokens to specific UI elements (e.g., --btn-bg-hover) |
It also generates metadata for each combination including the specific contrast ratio (e.g., 4.54:1) and the WCAG pass/fail status for different text sizes.
Colors Advanced Features
- Automated HSL-based scale generation to maintain hue and saturation consistency.
- Luminosity-based dark mode logic to create depth without relying on drop shadows.
- Grayscale simulation hooks to verify that information remains distinguishable without color.
- Specific sector templates for Fintech, Healthcare, and E-commerce accessibility.
- Semantic token mapping to decouple visual values from functional implementation.
SKILL.md
Loading
Related Openclaw Skills
Cofounder
An adaptive business partner that identifies your entrepreneurial blind spots and provides a strategic counterweight to drive venture growth.
Coding Memory
A privacy-first coding style memory that adapts to your specific preferences and patterns for consistent code generation.
Code Skill for AI Agents
A comprehensive coding workflow skill that guides AI agents through planning, implementation, and rigorous verification of software projects.
Cloud
A dedicated skill for organizing, syncing, and backing up personal files across major consumer cloud platforms.
Community Manager
A strategic framework for managing online communities through content planning, engagement tracking, and structured moderation.
Companion
A dedicated Openclaw Skills tool designed to provide a steady, listening presence for those experiencing loneliness or seeking consistent conversation.
Featured*
