color-palette

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Color Palette Generation

配色方案生成

Status: Production Ready ✅ Last Updated: 2026-01-14 Standard: Tailwind v4 @theme syntax

状态：已就绪可投入生产 ✅ 最后更新：2026-01-14 标准：Tailwind v4 @theme 语法

Quick Start

快速开始

Generate complete palette from brand hex:

javascript

// Input: Brand hex
const brandColor = "#0D9488" // Teal-600

// Output: 11-shade scale + semantic tokens + dark mode
primary-50:  #F0FDFA (lightest)
primary-500: #14B8A6 (brand)
primary-950: #042F2E (darkest)

background: #FFFFFF
foreground: #0F172A
primary: #14B8A6

Use the reference files to generate shades, map semantics, and check contrast.

从品牌十六进制颜色生成完整配色方案：

javascript

// Input: Brand hex
const brandColor = "#0D9488" // Teal-600

// Output: 11-shade scale + semantic tokens + dark mode
primary-50:  #F0FDFA (lightest)
primary-500: #14B8A6 (brand)
primary-950: #042F2E (darkest)

background: #FFFFFF
foreground: #0F172A
primary: #14B8A6

使用参考文件生成色阶、映射语义化标识并检查对比度。

Color Scale Overview

色阶概述

Standard 11-Shade Scale

标准11阶色阶

Shade	Lightness	Use Case
50	97%	Subtle backgrounds
100	94%	Hover states
200	87%	Borders, dividers
300	75%	Disabled states
400	62%	Placeholder text
500	48%	Brand color
600	40%	Primary actions
700	33%	Hover on primary
800	27%	Active states
900	20%	Text on light bg
950	10%	Darkest accents

Key principle: Shade 500 represents your brand color. Other shades maintain hue/saturation while varying lightness.

色阶	亮度	使用场景
50	97%	细微背景
100	94%	悬停状态
200	87%	边框、分隔线
300	75%	禁用状态
400	62%	占位符文本
500	48%	品牌颜色
600	40%	主要操作
700	33%	主要操作悬停
800	27%	激活状态
900	20%	浅色背景上的文本
950	10%	最深强调色

核心原则：500阶代表你的品牌颜色。其他色阶保持色相/饱和度不变，仅调整亮度。

Hex to HSL Conversion

十六进制转HSL转换

Convert brand hex to HSL for shade generation:

javascript

// Example: #0D9488 → hsl(174, 84%, 29%)
// H (Hue): 174deg
// S (Saturation): 84%
// L (Lightness): 29%

Generate shades by keeping hue constant, adjusting lightness:

Lighter shades (50-400): Reduce saturation slightly
Mid shades (500-600): Full saturation
Darker shades (700-950): Full saturation

See

references/shade-generation.md

for conversion formula.

将品牌十六进制颜色转换为HSL以生成色阶：

javascript

// Example: #0D9488 → hsl(174, 84%, 29%)
// H (Hue): 174deg
// S (Saturation): 84%
// L (Lightness): 29%

通过保持色相不变、调整亮度来生成色阶：

浅色阶（50-400）：略微降低饱和度
中间色阶（500-600）：全饱和度
深色阶（700-950）：全饱和度

查看

references/shade-generation.md

获取转换公式。

Semantic Token Mapping

语义化标识映射

Map shade scale to semantic tokens for components:

将色阶映射到组件的语义化标识：

Light Mode

浅色模式

css

--background: white
--foreground: primary-950
--card: white
--card-foreground: primary-900
--muted: primary-50
--muted-foreground: primary-600
--border: primary-200
--primary: primary-600
--primary-foreground: white

css

--background: white
--foreground: primary-950
--card: white
--card-foreground: primary-900
--muted: primary-50
--muted-foreground: primary-600
--border: primary-200
--primary: primary-600
--primary-foreground: white

Dark Mode

深色模式

css

--background: primary-950
--foreground: primary-50
--card: primary-900
--card-foreground: primary-50
--muted: primary-800
--muted-foreground: primary-400
--border: primary-800
--primary: primary-500
--primary-foreground: white

Pattern: Invert lightness while preserving relationships. See

references/semantic-mapping.md

css

--background: primary-950
--foreground: primary-50
--card: primary-900
--card-foreground: primary-50
--muted: primary-800
--muted-foreground: primary-400
--border: primary-800
--primary: primary-500
--primary-foreground: white

模式：反转亮度同时保留色彩关系。查看

references/semantic-mapping.md

。

Dark Mode Pattern

深色模式方案

Swap light and dark shades:

Light Mode	Dark Mode
50 (97% L)	950 (10% L)
100 (94% L)	900 (20% L)
200 (87% L)	800 (27% L)
500 (brand)	500 (brand, slightly brighter)

Preserve brand identity: Keep hue/saturation consistent, only invert lightness.

CSS pattern:

css

:root {
  --background: white;
  --foreground: hsl(var(--primary-950));
}

.dark {
  --background: hsl(var(--primary-950));
  --foreground: hsl(var(--primary-50));
}

交换浅色和深色阶：

浅色模式	深色模式
50 (97% L)	950 (10% L)
100 (94% L)	900 (20% L)
200 (87% L)	800 (27% L)
500 (brand)	500 (brand, slightly brighter)

保留品牌辨识度：保持色相/饱和度一致，仅反转亮度。

CSS方案：

css

:root {
  --background: white;
  --foreground: hsl(var(--primary-950));
}

.dark {
  --background: hsl(var(--primary-950));
  --foreground: hsl(var(--primary-50));
}

Contrast Checking

对比度检查

WCAG minimum ratios:

Text (AA): 4.5:1 normal, 3:1 large (18px+)
UI Elements: 3:1 (buttons, borders)

Quick check pairs:

```
primary-600
```
text on
```
white
```
background
```
white
```
text on
```
primary-600
```
background
```
primary-900
```
text on
```
primary-50
```
background

Formula:

javascript

contrast = (lighter + 0.05) / (darker + 0.05)
// Where lighter/darker are relative luminance values

See

references/contrast-checking.md

for full formula and fix patterns.

WCAG最低比率：

文本（AA级）：普通文本4.5:1，大文本（18px+）3:1
UI元素：3:1（按钮、边框）

快速检查组合：

```
primary-600
```
文本在
```
white
```
背景上
```
white
```
文本在
```
primary-600
```
背景上
```
primary-900
```
文本在
```
primary-50
```
背景上

公式：

javascript

contrast = (lighter + 0.05) / (darker + 0.05)
// Where lighter/darker are relative luminance values

查看

references/contrast-checking.md

获取完整公式和修复方案。

Quick Reference

快速参考

Generate Complete Palette

生成完整配色方案

Convert brand hex to HSL
Generate 11 shades (50-950) by varying lightness
Map shades to semantic tokens
Create dark mode variants (invert lightness)
Check contrast for text pairs

将品牌十六进制颜色转换为HSL
通过调整亮度生成11阶色阶（50-950）
将色阶映射到语义化标识
创建深色模式变体（反转亮度）
检查文本组合的对比度

Tailwind v4 Output

Tailwind v4 输出

Use

@theme

directive:

css

@theme {
  --color-primary-50: #F0FDFA;
  --color-primary-500: #14B8A6;
  --color-primary-950: #042F2E;

  --color-background: #FFFFFF;
  --color-foreground: var(--color-primary-950);
}

使用

@theme

指令：

css

@theme {
  --color-primary-50: #F0FDFA;
  --color-primary-500: #14B8A6;
  --color-primary-950: #042F2E;

  --color-background: #FFFFFF;
  --color-foreground: var(--color-primary-950);
}

Common Adjustments

常见调整

Too vibrant at light shades: Reduce saturation by 10-20%
Poor contrast on primary: Use shade 700+ for text
Dark mode too dark: Use shade 900 instead of 950 for backgrounds
Brand color too light/dark: Adjust to shade 500-600 range

浅色阶过于鲜艳：降低饱和度10-20%
主色对比度不足：使用700+阶的颜色作为文本
深色模式过暗：使用900阶而非950阶作为背景
品牌颜色过亮/过暗：调整到500-600阶范围

Resources

资源

File	Purpose
`references/shade-generation.md`	Hex→HSL conversion, lightness values
`references/semantic-mapping.md`	Token mapping for light/dark modes
`references/dark-mode-palette.md`	Inversion patterns, shade swapping
`references/contrast-checking.md`	WCAG formulas, quick check table
`templates/tailwind-colors.css`	Complete CSS output template
`rules/color-palette.md`	Common mistakes and corrections

文件	用途
`references/shade-generation.md`	十六进制转HSL转换、亮度值
`references/semantic-mapping.md`	浅色/深色模式的标识映射
`references/dark-mode-palette.md`	反转方案、色阶交换
`references/contrast-checking.md`	WCAG公式、快速检查表
`templates/tailwind-colors.css`	完整CSS输出模板
`rules/color-palette.md`	常见错误及修正

Token Efficiency

标识效率

Without skill: ~8-12k tokens trial-and-error for palette generation With skill: ~3-4k tokens using references Savings: ~65%

Errors prevented:

Poor contrast ratios (accessibility violations)
Inconsistent shade scales
Broken dark mode (wrong lightness values)
Raw Tailwind colors instead of semantic tokens
Missing foreground pairs for backgrounds

不使用此方法：生成配色方案需反复尝试，约消耗8-12k tokens 使用此方法：使用参考文件仅需约3-4k tokens 节省比例：约65%

避免的错误：

对比度比率不足（违反可访问性要求）
色阶不一致
深色模式失效（亮度值错误）
使用原始Tailwind颜色而非语义化标识
缺少背景对应的前景色组合

Examples

示例

Brand Color: Teal (#0D9488)

品牌颜色：蓝绿色（#0D9488）

css

@theme {
  /* Shade scale */
  --color-primary-50: #F0FDFA;
  --color-primary-100: #CCFBF1;
  --color-primary-200: #99F6E4;
  --color-primary-300: #5EEAD4;
  --color-primary-400: #2DD4BF;
  --color-primary-500: #14B8A6;
  --color-primary-600: #0D9488;
  --color-primary-700: #0F766E;
  --color-primary-800: #115E59;
  --color-primary-900: #134E4A;
  --color-primary-950: #042F2E;

  /* Light mode semantics */
  --color-background: #FFFFFF;
  --color-foreground: var(--color-primary-950);
  --color-primary: var(--color-primary-600);
  --color-primary-foreground: #FFFFFF;
}

.dark {
  /* Dark mode overrides */
  --color-background: var(--color-primary-950);
  --color-foreground: var(--color-primary-50);
  --color-primary: var(--color-primary-500);
}

css

@theme {
  /* Shade scale */
  --color-primary-50: #F0FDFA;
  --color-primary-100: #CCFBF1;
  --color-primary-200: #99F6E4;
  --color-primary-300: #5EEAD4;
  --color-primary-400: #2DD4BF;
  --color-primary-500: #14B8A6;
  --color-primary-600: #0D9488;
  --color-primary-700: #0F766E;
  --color-primary-800: #115E59;
  --color-primary-900: #134E4A;
  --color-primary-950: #042F2E;

  /* Light mode semantics */
  --color-background: #FFFFFF;
  --color-foreground: var(--color-primary-950);
  --color-primary: var(--color-primary-600);
  --color-primary-foreground: #FFFFFF;
}

.dark {
  /* Dark mode overrides */
  --color-background: var(--color-primary-950);
  --color-foreground: var(--color-primary-50);
  --color-primary: var(--color-primary-500);
}

Brand Color: Purple (#7C3AED)

品牌颜色：紫色（#7C3AED）

css

@theme {
  --color-primary-50: #FAF5FF;
  --color-primary-500: #A855F7;
  --color-primary-950: #3B0764;

  --color-background: #FFFFFF;
  --color-foreground: var(--color-primary-950);
  --color-primary: var(--color-primary-600);
}

Next Steps: Use

references/shade-generation.md

to convert your brand hex to HSL and generate the 11-shade scale.

css

@theme {
  --color-primary-50: #FAF5FF;
  --color-primary-500: #A855F7;
  --color-primary-950: #3B0764;

  --color-background: #FFFFFF;
  --color-foreground: var(--color-primary-950);
  --color-primary: var(--color-primary-600);
}

下一步：使用

references/shade-generation.md

将你的品牌十六进制颜色转换为HSL并生成11阶色阶。