color-palette by jezweb/claude-skills
npx skills add https://github.com/jezweb/claude-skills --skill color-palette从单一品牌十六进制颜色生成完整、可访问的色彩系统。生成可直接粘贴到项目中的 Tailwind v4 CSS。
询问主要的品牌颜色。单个十六进制颜色如 #0D9488 即可。
将十六进制转换为 HSL,然后通过改变明度同时保持色调恒定来生成色阶:
| 色阶 | 明度 | 使用场景 |
|---|---|---|
| 50 | 97% | 细微背景 |
| 100 | 94% | 悬停状态 |
| 200 | 87% | 边框、分隔线 |
| 300 | 75% | 禁用状态 |
| 400 | 62% | 占位符文本 |
| 500 | 48% |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 600 | 40% | 主要操作 |
| 700 | 33% | 主要按钮悬停 |
| 800 | 27% | 激活状态 |
| 900 | 20% | 浅色背景上的文本 |
| 950 | 10% | 最深强调色 |
转换公式请参阅 references/shade-generation.md。
浅色模式:
--background: white;
--foreground: primary-950;
--card: white;
--card-foreground: primary-900;
--primary: primary-600;
--primary-foreground: white;
--muted: primary-50;
--muted-foreground: primary-600;
--border: primary-200;
深色模式 — 反转明度同时保持关系:
--background: primary-950;
--foreground: primary-50;
--card: primary-900;
--card-foreground: primary-50;
--primary: primary-500;
--primary-foreground: white;
--muted: primary-800;
--muted-foreground: primary-400;
--border: primary-800;
WCAG 最低对比度要求:
快速检查:primary-600 在 white 上以及 white 在 primary-600 上。公式请参阅 references/contrast-checking.md。
@theme {
--color-primary-50: #F0FDFA;
--color-primary-100: #CCFBF1;
--color-primary-500: #14B8A6;
--color-primary-950: #042F2E;
--color-background: #FFFFFF;
--color-foreground: var(--color-primary-950);
--color-primary: var(--color-primary-600);
--color-primary-foreground: #FFFFFF;
}
.dark {
--color-background: var(--color-primary-950);
--color-foreground: var(--color-primary-50);
--color-primary: var(--color-primary-500);
}
复制 assets/tailwind-colors.css 作为起始模板。
| 文件 | 用途 |
|---|---|
references/shade-generation.md | 十六进制到 HSL 转换,明度值 |
references/semantic-mapping.md | 浅色/深色模式的令牌映射 |
references/dark-mode-palette.md | 反转模式 |
references/contrast-checking.md | WCAG 公式,快速检查表 |
assets/tailwind-colors.css | 完整的 CSS 输出模板 |
每周安装量
1.2K
代码仓库
GitHub 星标数
650
首次出现
Jan 20, 2026
安全审计
安装于
opencode1.0K
gemini-cli983
codex947
cursor907
github-copilot887
claude-code854
Generate a complete, accessible colour system from a single brand hex. Produces Tailwind v4 CSS ready to paste into your project.
Ask for the primary brand colour. A single hex like #0D9488 is enough.
Convert hex to HSL, then generate shades by varying lightness while keeping hue constant:
| 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 colour |
| 600 | 40% | Primary actions |
| 700 | 33% | Hover on primary |
| 800 | 27% | Active states |
| 900 | 20% | Text on light bg |
| 950 | 10% | Darkest accents |
See references/shade-generation.md for the conversion formula.
Light mode:
--background: white;
--foreground: primary-950;
--card: white;
--card-foreground: primary-900;
--primary: primary-600;
--primary-foreground: white;
--muted: primary-50;
--muted-foreground: primary-600;
--border: primary-200;
Dark mode — invert lightness while preserving relationships:
--background: primary-950;
--foreground: primary-50;
--card: primary-900;
--card-foreground: primary-50;
--primary: primary-500;
--primary-foreground: white;
--muted: primary-800;
--muted-foreground: primary-400;
--border: primary-800;
WCAG minimum ratios:
Quick check: primary-600 on white and white on primary-600. See references/contrast-checking.md for formula.
@theme {
--color-primary-50: #F0FDFA;
--color-primary-100: #CCFBF1;
--color-primary-500: #14B8A6;
--color-primary-950: #042F2E;
--color-background: #FFFFFF;
--color-foreground: var(--color-primary-950);
--color-primary: var(--color-primary-600);
--color-primary-foreground: #FFFFFF;
}
.dark {
--color-background: var(--color-primary-950);
--color-foreground: var(--color-primary-50);
--color-primary: var(--color-primary-500);
}
Copy assets/tailwind-colors.css as a starting template.
| File | Purpose |
|---|---|
references/shade-generation.md | Hex to HSL conversion, lightness values |
references/semantic-mapping.md | Token mapping for light/dark modes |
references/dark-mode-palette.md | Inversion patterns |
references/contrast-checking.md | WCAG formulas, quick check table |
assets/tailwind-colors.css | Complete CSS output template |
Weekly Installs
1.2K
Repository
GitHub Stars
650
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode1.0K
gemini-cli983
codex947
cursor907
github-copilot887
claude-code854
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装