skills.rest
malhashemi
malhashemiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

brand-palette

Generate accessible brand color palettes with tonal scales for Obsidian and Tailwind CSS.

20|Updated Oct 13, 2025
Search Tags:#accessibility#design system#brand identity#color palette#tailwind css#color generation
One-click install
npx skills add https://github.com/malhashemi/dotfiles --skill brand-palette
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-palette
Source: https://github.com/malhashemi/dotfiles/tree/main/dot_config/opencode/skill/brand-palette
Command: npx skills add https://github.com/malhashemi/dotfiles --skill brand-palette

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires coloraide, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps users create professional, accessible brand color palettes from scratch or by refining existing colors, ensuring visual harmony and brand consistency across digital products.

Core Features & Use Cases

  • Guided Hue Selection: Assists in choosing primary and secondary brand colors based on brand identity and industry best practices using the RYB color wheel.
  • Chroma & Tone Tuning: Helps define the saturation and lightness of colors to match brand personality (e.g., muted and sophisticated vs. vibrant and energetic).
  • Automated Palette Generation: Creates full tonal scales (50-950) compatible with Obsidian's Palette plugin and generates Tailwind CSS configurations.
  • Accessibility Validation: Includes APCA contrast ratio checks and optional auto-adjustment for accessible color combinations.
  • Use Case: A startup needs a new brand identity. This Skill guides them through selecting hues like 'Blue' and 'Green', setting a 'balanced' chroma and 'versatile' tone, and generates a complete palette with accessible variations and Tailwind code.

Quick Start

Use the brand-palette skill to generate a palette starting with the color blue.

Frequently Asked Questions about brand-palette

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

FAQPage Schema
How do I generate a brand color palette with full tonal scales for Tailwind CSS?▼

To generate a Tailwind CSS brand color palette, this Skill automates tonal scale creation from 50-950 using RYB hue mixing and OKLCH color space, outputting ready-to-use configuration code based on your selected primary and secondary hues.

What is the best way to ensure my brand colors meet accessibility contrast standards?▼

The best way to ensure accessible brand colors is using APCA contrast ratio validation. This Skill checks color combinations and optionally auto-adjusts saturation and lightness values to guarantee compliance within your generated palette.

Can I use the generated color palettes with the Obsidian Palette plugin?▼

Yes, generated color palettes are compatible with the Obsidian Palette plugin. The Skill outputs full tonal scales formatted specifically for Obsidian, alongside Tailwind CSS configurations for broader application.

How do I choose harmonious primary and secondary hues for a brand identity?▼

Choosing harmonious brand hues is guided by the RYB color wheel. This Skill assists in selecting primary and secondary colors based on industry best practices and your brand personality, balancing chroma and tone automatically.

Does this palette generator support tuning chroma and tone for specific brand personalities?▼

Yes, the palette generator supports chroma and tone tuning. You can define saturation and lightness levels to match specific brand personalities, creating either muted sophisticated palettes or vibrant energetic color schemes.

What color space is used for generating accessible color schemes?▼

Accessible color schemes are generated using the OKLCH color space. This perceptually uniform color space, combined with RYB hue mixing, ensures visual harmony and accurate chroma tuning across the entire tonal scale.

Related Skills

Explore More Design & Creative Skills→
curiositechcuriositech
181

web-design-expert

Generate web designs with brand identity, color palettes, typography, and UI/UX patterns.

Official
Intermediate
fusenginefusengine
22

designing-systems

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

Community
Advanced
soloamentesoloamente

oklch-skill

Convert hex, RGB, and HSL colors to OKLCH and generate palettes.

Community
Intermediate
Dzakiamriz22Dzakiamriz22
1

color-system

Define semantic color tokens in OKLCH with WCAG 2.1 AA contrast.

Community
Advanced