Colors

What This Skill Does

The Colors skill is a specialized tool for OpenClaw AI agents to generate, validate, and organize accessible, high-performance design tokens and color palettes. It acts as an expert design system engineer, ensuring your application interfaces meet strict WCAG accessibility requirements while maintaining aesthetic cohesion through semantic tokenization and HSL-based scaling. The skill helps you avoid common pitfalls like relying on color alone for information, failing contrast thresholds, and creating unmaintainable CSS variables.

Installation

To install this skill, run the following command in your terminal within your OpenClaw environment: clawhub install openclaw/skills/skills/ivangdavila/colors

Use Cases

Use the Colors skill when you are setting up a new design system, refactoring legacy CSS to use semantic tokens, or auditing your current site for accessibility compliance. It is particularly effective for generating consistent light and dark mode scales that utilize surface luminosity rather than flat shadows for depth. Developers can use it to convert raw hex values into robust HSL-based scales, ensuring that your primary, secondary, and accent colors remain balanced according to the 60-30-10 rule. Furthermore, it assists in the migration from hard-coded values to a three-layer semantic architecture (Primitive, Semantic, and Component) to ensure your codebase is maintainable and scalable as your product grows.

Example Prompts

1. "Generate a primary brand color palette using a deep indigo base, ensuring all text variations meet AA accessibility standards on a white background, and output them as HSL tokens."
2. "Audit my current CSS error variables and suggest a semantic token structure that replaces all direct color references with functional names like --text-error and --surface-error."
3. "Create a dark mode surface scale using a hue of 220 with 15% saturation, ensuring the transition from surface-0 to surface-3 is subtle and improves readability over standard black backgrounds."

Tips & Limitations

Always remember the 'Balance Rule': limit your palette to 3-5 colors plus neutrals to prevent visual noise. When designing, test your interfaces in grayscale to ensure that color-blind users can still navigate your site; if your UI depends on color alone to indicate states, add icons or text descriptors. Avoid pure white (#FFF) and pure black (#000) for background surfaces, as these can cause significant eye strain in low-light environments. When validating contrast, ensure your chosen grays are safe; for example, #757575 passes the 4.5:1 threshold, while #777777 does not. This skill does not automatically inject CSS into your files; it provides the tokens and structural guidance for you to implement in your source code.