skills.rest
jubscodes
jubscodesCOMMUNITY
Explore all skills by this author →
GitHub

gsp-color

Generate color systems with OKLCH scales, WCAG contrast data, and dark-mode mappings.

49|4|Updated Feb 20, 2026
Search Tags:#contrast#dark-mode#palette#color-system#oklch#brand-design#semantic-colors
One-click install
npx skills add https://github.com/jubscodes/get-shit-pretty --skill gsp-color
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsp-color
Source: https://github.com/jubscodes/get-shit-pretty/tree/main/gsp/skills/gsp-color
Command: npx skills add https://github.com/jubscodes/get-shit-pretty --skill gsp-color

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Brands struggle to create cohesive color systems that are accessible, consistent across light/dark modes, and scalable as UIs evolve.

Core Features & Use Cases

  • Generate production-ready color palettes from brand colors using semantic roles (primary, secondary, accent) and OKLCH scales.
  • Validate WCAG contrast across white and black backgrounds and support dark-mode mappings with preserved contrast relationships.
  • Produce and publish a full color-system.md and palettes.json to integrate into design systems and codebases.
  • Use-case example: a redesign project that starts from 3 brand hex values and yields a complete 11-stop scale for each role.

Quick Start

Provide your brand hex colors to generate a complete color system with OKLCH scales and dark-mode mappings.

Frequently Asked Questions about gsp-color

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

FAQPage Schema
How do I generate a color system from brand colors for UI design?▼

You can generate a complete color system from brand colors by providing hex values as input. The system outputs 11-stop OKLCH scales, semantic roles, and dark-mode mappings for product design systems.

What is an OKLCH color scale and why use it for design systems?▼

An OKLCH color scale organizes colors in a perceptually uniform space to ensure visually consistent lightness and chroma steps. It is used for design systems to build cohesive, accessible 11-stop palettes.

Can I validate WCAG contrast for dark mode mappings?▼

Yes, you can validate WCAG contrast for dark mode mappings. The system checks contrast ratios across white and black backgrounds and preserves these contrast relationships when mapping to dark mode.

How do I integrate a generated color palette into a codebase?▼

You integrate generated color palettes by exporting the results as a color-system.md and palettes.json file. These outputs contain the 11-stop OKLCH scales and semantic roles for direct use in design systems.

What is the best way to create accessible semantic color roles?▼

The best way to create accessible semantic color roles is to map brand colors to primary, secondary, and accent roles using OKLCH scales. This ensures WCAG contrast compliance and consistent dark-mode mappings.

Related Skills

Explore More Design & Creative Skills→
pinion05pinion05
3

brand-guidelines

Apply Anthropic brand colors, typography, and visual formatting to artifacts.

Community
Basic
dylantarredylantarre
38

color-scale

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

Community
Basic
nickcorinnickcorin
2

expo-cicd-workflows

Generate and validate Expo EAS workflow YAML files against the official schema.

Community
Advanced
teamniteoteamniteo
5

brand-designer

Generate WCAG-compliant brand color palettes using OKLCH hue rotation.

Official
Intermediate