skills.rest
teamniteo
teamniteoOFFICIAL
Explore all skills by this author →
Website𝕏@teamniteoGitHub

brand-designer

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

5|1|Updated Apr 9, 2026
Search Tags:#design#branding#accessibility#color palette#tailwind#oklch
One-click install
npx skills add https://github.com/teamniteo/hakuto --skill brand-designer-teamniteo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-designer
Source: https://github.com/teamniteo/hakuto/tree/main/skills/brand-designer
Command: npx skills add https://github.com/teamniteo/hakuto --skill brand-designer-teamniteo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of creating balanced, accessible, and aesthetically cohesive brand color palettes that maintain visual hierarchy and WCAG contrast compliance.

Core Features & Use Cases

  • OKLCH Color Math: Computes hue rotations directly in the OKLCH color space to ensure balanced lightness and saturation across complementary, triadic, and analogous schemes.
  • Strategic Application: Enforces a 60/30/10 dominant/accent/highlight ratio to prevent generic or cluttered UI designs.
  • Use Case: When building a new site, use this skill to generate a custom palette from a logo or a set of base hex codes that automatically integrates into your Tailwind CSS theme tokens.

Quick Start

Invoke the brand-designer skill to generate a triadic color palette based on the primary hex code #3B82F6 for a technology-focused website.

Frequently Asked Questions about brand-designer

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

FAQPage Schema
How do I generate a WCAG-compliant color palette from a single hex code?▼

You can generate a WCAG-compliant color palette by applying OKLCH hue rotation to a base hex code, which ensures balanced lightness and saturation while automatically verifying contrast ratios for accessibility.

What is the 60/30/10 rule in brand color palette generation?▼

The 60/30/10 rule in brand palette design enforces a distribution ratio of 60% dominant color, 30% accent, and 10% highlight to prevent cluttered UI designs and maintain clear visual hierarchy.

Can I generate Tailwind CSS theme tokens using OKLCH color math?▼

Yes, you can generate Tailwind CSS theme tokens using OKLCH color math by computing balanced hue rotations from base hex codes and integrating the results directly into your automated theme token generation workflow.

Why use OKLCH color space instead of HSL for creating accessible brand palettes?▼

Use OKLCH color space for accessible brand palettes because it computes hue rotations with perceptually uniform lightness, ensuring consistent saturation and reliable WCAG contrast verification across complementary and triadic schemes.

Does automated color palette generation verify contrast ratios for web accessibility?▼

Yes, automated color palette generation includes WCAG-compliant contrast verification, ensuring that the generated OKLCH color hierarchy meets accessibility standards for web design workflows.

Related Skills

Explore More Design & Creative Skills→
andronicsandronics
1

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

Community
Intermediate
fusenginefusengine
22

designing-systems

Define OKLCH color palettes, CSS variables, and typography scales for Tailwind CSS v4 theming.

Community
Advanced
hakushunhakushun

tailwind-design-system

Creates scalable design systems with Tailwind CSS v4 and semantic tokens.

Community
Advanced
kazdenckazdenc
42

colorize

Apply strategic color to monochromatic UI elements using OKLCH and WCAG standards.

Community
Intermediate