color

A guide for building consistent colour palettes, gradients, theme variants, and meaning-based colour tokens using OKLCH. OKLCH is a colour model designed so numerical changes better match how people perceive lightness and colour intensity.

In plain words
What is it for?
Use it whenever a visual project needs colours, including UI themes, brand palettes, data charts, generative art, slides, games, or syntax highlighting.
Why use it?
It helps keep colours visually balanced, readable, and consistent across light and dark themes, interfaces, charts, artwork, and code displays.

Skill for Claude CodeCodex

Part of the atelier plugin — 7 skills shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/jangles-byte/atelier/color
Any agent
npx skills add jangles-byte/atelier --skill color
Clone the repo
git clone --depth 1 https://github.com/jangles-byte/atelier

Made for: Claude Code, Codex.

Or install atelier, the plugin that ships this one along with the rest of its 7 skills.

Per session 119 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 574 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00119 $0.00574
Opus 5 $0.00060 $0.00287
Sonnet 5 $0.00024 $0.00115
Haiku 4.5 $0.00012 $0.00057

Measured 2d ago against content hash 1ba2c59c6bcc, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

color scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/color/SKILL.md · 42 lines

What it actually says

Color

Color decisions in this package are made in OKLCH (perceptual lightness L, chroma C, hue H), not hex or HSL, because equal numeric steps in OKLCH are equal perceived steps — which is what makes ramps even, themes coherent, and contrast predictable. Hex is only an output format.

Workflow

  1. Read the design philosophy (from design-direction); the palette's emotional register comes from there, not from this skill.
  2. Construct the palette in OKLCH using references/palette-construction.md — anchor hue → neutral ramp (tinted, never pure grey) → accent ramp → semantic colors.
  3. If the work has themes, build dark and light as sibling palettes, not inversions, per references/themes.md.
  4. Verify every text/background pair against references/contrast-and-restraint.md before shipping; it also covers when glow/saturation is earned vs. noise.

Which reference to load

Situation Load
OKLCH mechanics, converting, browser/tool support references/oklch-foundations.md
Building a palette, ramps, data-viz series colors references/palette-construction.md
Dark mode, theme families, elevation in dark UIs references/themes.md
Contrast checking, WCAG/APCA, glow & saturation discipline references/contrast-and-restraint.md

Non-negotiables

  • Body text meets WCAG AA (4.5:1) minimum; UI chrome ≥ 3:1. Check, don't eyeball.
  • Neutrals carry a trace of the anchor hue (C ≈ 0.005–0.02). Pure grey reads dead.
  • One color is the loudest in any view. If two compete, demote one.
  • Never ship a palette without rendering it in the real artifact and running the critique skill on the result.
Files

What ships with it

4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 42 lines · 0 tokens per session scan A 1ba2c59c6bcc

Subscribe to this mod's changes

color is a skill published in the GitHub repository jangles-byte/atelier (2 stars, last pushed 1mo ago), licensed MIT. It adds 119 tokens to every session and 574 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

sheleg-design

Use when deciding how something LOOKS or MOVES — cinematic landing pages and hero sections, particle/WebGL backgrounds, scroll-linked or scrubbed motion, layers that drift, dashboards, admin or internal tools, mobile screens, chat or agent interfaces, tokens, themes, palettes, typography and the Figma border. Triggers…

ssheleg/sheleg-design-skill · 280 tokens

html-ppt-zhangzara-cobalt-grid

OpenDesign renewal + seat-expansion business case for a growing customer: realized value, usage proof, and the expansion ROI. Built as a decision-grade B2B sales deck for champion, finance approver.

nexu-io/open-design · 54 tokens

html-ppt-zhangzara-mat

A margin-recovery diagnosis for a regional grocery chain — the governing thought, the driver tree, the priorities, and the roadmap. Built as a decision-grade consulting deck for client sponsor, steering committee.

nexu-io/open-design · 51 tokens

html-ppt-zhangzara-peoples-platform

A public-transit funding proposal for a city council — ridership need, the plan, the risk controls, and the ask. Built as a decision-grade policy briefing deck for city council, public board.

nexu-io/open-design · 53 tokens

html-ppt-zhangzara-long-table

OpenDesign's unit-economics and BYOK cost model: the assumptions, the sensitivity, and why it scales. Built as a decision-grade data & finance deck for CFO, investors.

nexu-io/open-design · 49 tokens

hr-onboarding

A new-hire onboarding plan as a single page — first week schedule, buddy + manager intro, learning track, equipment checklist, and "you're set when…" outcomes. Use when the brief mentions "onboarding", "new hire", "first week plan", or "入职".

nexu-io/open-design · 62 tokens