skills.rest
cynthiateeters
cynthiateetersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

CSS color standards

Enforce HSL color standards and CSS custom properties in :root.

Updated Oct 25, 2025
Search Tags:#design system#css#styling#color palette#hsl#web design#custom properties
One-click install
npx skills add https://github.com/cynthiateeters/hap-learning-lab-template --skill css-color-standards
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: CSS color standards
Source: https://github.com/cynthiateeters/hap-learning-lab-template/tree/main/.claude/skills/css-standards
Command: npx skills add https://github.com/cynthiateeters/hap-learning-lab-template --skill css-color-standards

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enforces modern HSL color format and CSS custom properties, preventing hardcoded hex/rgb colors and ensuring a single source of truth for all HAP Learning Lab CSS. This maintains design system consistency and simplifies color management.

Core Features & Use Cases

  • HSL Exclusivity: Mandates the use of hsl() format for all colors, improving readability and maintainability.
  • Custom Properties: Enforces defining all colors in the :root block using CSS custom properties (var(--*)), ensuring a single source of truth.
  • Accessibility & Naming: Guides semantic color naming and documentation of contrast ratios for WCAG AA compliance.
  • Use Case: Before writing any new CSS, use this Skill to automatically validate that all colors are defined in HSL format using custom properties, ensuring your styles are consistent and easily maintainable.

Quick Start

Example: Check for hex colors in your CSS files

grep -r '#[0-9A-Fa-f]{3,6}' css/

Expected output: No matches (or only in comments)

Frequently Asked Questions about CSS color standards

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

FAQPage Schema
How do I enforce HSL color format across my CSS codebase?▼

Enforce HSL color format by defining all colors as CSS custom properties in the :root block using hsl() syntax with modern alpha support, then reference them throughout your stylesheets with var(--*) values. This ensures a single source of truth and prevents hardcoded hex or rgb values.

Why should I use CSS custom properties instead of hardcoded hex colors?▼

CSS custom properties create a centralized design system in :root, making color updates automatic across your entire project. Hardcoded hex values scatter color definitions throughout your code, increasing maintenance burden and risking inconsistency.

What's the best way to set up semantic color naming in a design system?▼

Define color custom properties in :root with semantic names (e.g., --primary-brand, --error-state, --neutral-background) using hsl() format, document their WCAG AA contrast ratios, and use var(--*) references in all CSS rules to maintain design consistency.

Can I migrate an existing CSS project from hex to HSL custom properties?▼

Yes. Declare all colors as hsl() custom properties in :root, replace hardcoded hex and rgb values with var(--*) references, and validate using grep patterns to confirm no hex colors remain outside comments. This centralizes your color palette while maintaining all existing styles.

How do I maintain accessibility compliance when using HSL colors?▼

Document WCAG AA contrast ratios for semantic color pairs defined in your :root custom properties, test hsl() values with accessibility tools to verify sufficient contrast, and use consistent naming to signal color intent (e.g., --high-contrast-text, --disabled-state).

Related Skills

Explore More Design & Creative Skills→
patternflypatternfly
10

pf-raw-colors-scan

Detect raw HEX, RGB(A), HSL(A), and named colors in CSS/SCSS/LESS files.

Official
Intermediate
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
fusenginefusengine
22

palette-generator

Generate OKLCH color palettes with WCAG AA/AAA contrast ratios and dark mode variations.

Community
Intermediate
dylantarredylantarre
38

color-scale

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

Community
Basic