colour

Derives colour palettes in OKLCH and verifies contrast and colour-vision-deficiency safety.

Updated Aug 1, 2026
One-click install
npx skills add https://github.com/siegenthalerroger/.llmctl-marketplace --skill colour-siegenthalerroger
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: colour
Source: https://github.com/siegenthalerroger/.llmctl-marketplace/tree/main/plugins/llmctl-design-0.1.0/skills/colour
Command: npx skills add https://github.com/siegenthalerroger/.llmctl-marketplace --skill colour-siegenthalerroger

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires coloraide, and includes scripts (resource) and references (resource) components.

What problem does it solve? Choosing colours by named harmony rules or eyeballing contrast produces palettes that fail accessibility audits, collapse under colour-vision deficiency, and break when a theme changes. This Skill derives palettes from perceptual reasoning — lightness, chroma and hue as separable axes — and verifies every pair with measured WCAG 2 and APCA values instead of guesswork. ## Core Features & Use Cases - Perceptual palette derivation: Reasons in OKLCH, picks character (pale, muted, vivid) before hue, and builds ground, neutrals, accent and semantic roles in a fixed order with unambiguous dominance. - Measured verification: The bundled check-contrast.py script reports WCAG 2 ratios and APCA Lc side by side, simulates protanopia, deuteranopia and tritanopia, and exits non-zero on failure so it can gate a build. - Implementation guidance: Reference docs cover reference/semantic/component token layering, CSS Color 4/5 syntax, and categorical, sequential and diverging scales for charts and maps. - Use Case: When building a dark theme for a dashboard, derive the palette against the dark ground, then run the contrast script on every text and chart-fill pair and paste the output table as the verification artefact. ## Quick Start Ask the AI to derive an accessible colour palette for your project and verify it with the colour skill's contrast-checking script.

Frequently Asked Questions about colour

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

FAQPage Schema
How do I check colour contrast for WCAG accessibility?▼

Run the check-contrast.py script with the pair command, passing foreground and background colours as LABEL=#fg/#bg. It prints the WCAG 2 ratio and APCA Lc side by side and exits non-zero on a WCAG failure, so it also works as a build gate.

How do I test a palette for colour blindness?▼

Use the script's cvd command with your palette colours to simulate protanopia, deuteranopia and tritanopia. It ranks the closest pair under each deficiency using OKLab distance, which catches collisions a greyscale check cannot.

Why is HSL misleading for building colour palettes?▼

HSL is a geometric rearrangement of RGB, not a perceptual model. Its lightness is arithmetic so equal L values look wildly different, its hue circle is unevenly spaced, and its saturation does not track perceived saturation, producing uneven ramps and grey mid-gradient muddiness.

Does the contrast script need any Python packages installed?▼

No, it runs on the Python 3.9+ standard library alone. Installing the optional coloraide package widens input to any CSS colour including oklch() and Display-P3, and composites alpha over the background.

What colour scale should I use for charts and maps?▼

Match the scale to the data type: categorical for unordered categories, sequential with monotonic lightness for one-directional quantities, and diverging only when a real midpoint exists. Avoid rainbow ramps for magnitude and never use red-green diverging scales.

When should I not rely on this colour skill?▼

Print production and projection are explicitly out of scope; print gamut is knowingly uncovered and projection washout belongs to a presentation skill. It also does not cover layout or typography decisions.