skills.rest
47network
47networkCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

color-system

Generate OKLCH color palettes, WCAG contrast, and color blindness simulations.

5|Updated Apr 15, 2026
Search Tags:#theming#accessibility#contrast#design-system#color-palette#oklch#color-blindness
One-click install
npx skills add https://github.com/47network/Sven --skill color-system-47network
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-system
Source: https://github.com/47network/Sven/tree/main/skills/design/color-system
Command: npx skills add https://github.com/47network/Sven --skill color-system-47network

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generating cohesive color systems is essential for branding and UI accessibility. This skill provides a streamlined way to create perceptually uniform palettes from a seed color, verify contrast, and simulate how colors render under common visual impairments.

Core Features & Use Cases

  • Generate perceptually uniform color palettes from a seed color using OKLCH.
  • Evaluate WCAG contrast between foreground and background to ensure accessibility.
  • Simulate color blindness to preview accessible themes and adapt designs accordingly.
  • Create full light/dark themes from a single seed color for branding and product UI.

Quick Start

Provide a seed color and an action (palette, theme, contrast, blindness, or css_theme) to receive the corresponding result.

Frequently Asked Questions about color-system

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

FAQPage Schema
How do I generate a perceptually uniform color palette from a single seed color?▼

To generate a perceptually uniform color palette, provide a seed color and use the palette action. The system uses OKLCH color space to create visually consistent shades and returns structured palette results for UI theming.

How can I check WCAG contrast ratios for my UI color palette?▼

You can check WCAG contrast by using the contrast action with your foreground and background colors. This evaluates accessibility compliance and returns structured contrast validation results for your design system.

Can I simulate color blindness to test my theme's accessibility?▼

Yes, you can simulate color blindness by using the blindness action with your seed color. This previews how your color palette renders under common visual impairments, allowing you to adapt designs for accessibility.

What's the best way to create light and dark themes for branding from one color?▼

The best way to create light and dark themes is using the theme or css_theme action with a single seed color. This generates full UI themes and CSS variables, ensuring cohesive branding across products.

Does this color palette generator require any specific design system dependencies?▼

No dependencies are required to use this color palette generator. It operates independently to validate action parameters, evaluate contrast, simulate color blindness, and return structured theming results.

Related Skills

Explore More Design & Creative Skills→
alpoxdevalpoxdev
3

color-cli

Convert colors between hex, rgb, and oklch formats.

Community
Intermediate
hulusi-tunchulusi-tunc
3

color-system

Generate accessible color palettes with contrast ratios and dark-mode mappings.

Community
Advanced
Elliot-TangSElliot-TangS
1

frontend-design

Design production-grade frontend UI plans with design tokens and accessibility.

Community
Advanced
lord-vinayaklord-vinayak

contrast-checker

Calculate color contrast ratios and evaluate WCAG 2.2 compliance.

Community
Advanced