skills.rest
yonetim258852
yonetim258852COMMUNITY
Explore all skills by this author →
GitHub

algorithmic-color-palette

Derive brand-aligned UI color palettes from seed colors into design tokens and CSS variables.

Updated May 24, 2026
Search Tags:#brand#tokens#ui-design#design-system#algorithmic#color-palette
One-click install
npx skills add https://github.com/yonetim258852/ozgur-os --skill algorithmic-color-palette
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: algorithmic-color-palette
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/algorithmic-color-palette
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill algorithmic-color-palette

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Brand-driven UI colour systems are often assembled manually, leading to inconsistent greys and mismatched semantic colours. This Skill derives a full, cohesive palette from one or two brand colours, producing base, hover/active variants, desaturated neutrals, and brand-aligned semantic tokens to ensure visual coherence across interfaces.

Core Features & Use Cases

  • Derives a complete palette from 1-2 seed colours, including base, hover, and active states, plus tint and desaturated variants for borders and backgrounds.
  • Generates brand-tinted greys by desaturating the brand hue, enabling cohesive neutrals across UI surfaces.
  • Produces semantic colours (error, warning, success, info) with aligned saturation and lightness to maintain consistent visual weight.
  • Provides guidance for integrating into design tokens and CSS variables for scalable design systems.

Quick Start

Provide one or two brand colours and request a complete UI color palette with base, state variants, and grey neutrals.

Frequently Asked Questions about algorithmic-color-palette

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

FAQPage Schema
How do I generate a complete UI color palette from a single brand color?▼

Brand-tinted greys are created by desaturating your brand hue, which ensures neutral UI surfaces remain visually cohesive with your primary colors rather than clashing with generic, untinted hex values.

Can I use algorithmic color palette generation for design tokens and CSS variables?▼

Semantic colors like error, warning, success, and info are generated with aligned saturation and lightness levels to maintain consistent visual weight, preventing mismatched alerts across the UI design system.

What is the best way to ensure accessibility when deriving a brand color system?▼

Ensure accessibility by deriving palette variants with sufficient contrast ratios for base, hover, and active states. The generation process includes accessibility considerations to maintain readable text across all UI surfaces.

Do I need multiple seed colors to generate brand-aligned semantic colors?▼

You only need one or two seed colors to generate a full brand-aligned palette. The algorithm derives semantic colors by applying the brand's saturation and lightness weight to standard semantic hues.

Related Skills

Explore More Design & Creative Skills→
dembrandtdembrandt
33

algorithmic-color-palette

Generate CSS-ready color tokens and palettes from brand colors using HSL adjustments.

Official
Intermediate
suhwansuhwan

phase-5-design-system

Build a platform-independent design system with tokens and components for React, Flutter, iOS, and Android.

Community
Advanced
dembrandtdembrandt
33

brand-visual-language

Define cohesive border-radius, typography, and iconography systems for brand consistency.

Official
Intermediate
trydyddtrydydd

i-colorize

Apply a brand-aligned 2-4 color palette to interface semantic states, accents, backgrounds, and typography.

Community
Advanced