color-palette-extractor by onewave-ai/claude-skills
npx skills add https://github.com/onewave-ai/claude-skills --skill color-palette-extractor从图像、网站和设计中提取并生成色彩调色板。
当用户需要从源文件中提取颜色时:
* 图像文件 (PNG, JPG, SVG)
* 网站 URL
* 屏幕截图
* 设计稿
* 用于构建调色板的现有颜色代码
2. 提取颜色 :
从图像中提取 :
* 分析像素数据
* 识别主色调
* 分组相似色调
* 计算颜色频率
* 按突出程度排序
从网站中提取 :
* 获取并解析 CSS
* 从样式表中提取颜色值
* 识别品牌色
* 查找强调色
* 检测文本/背景颜色
颜色聚类 :
* 使用 K-means 聚类算法
* 分组相似颜色
* 通常提取 5-10 种主色调
* 忽略接近白色/黑色的颜色,除非它们很突出
3. 生成色彩调色板 :
(5-10 种颜色):
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
* 最主色调
* 2-3 种辅助色
* 1-2 种强调色
* 背景色
* 文本颜色
扩展调色板 :
* 浅色和深色变体
* 浅色 (添加白色)
* 深色 (添加黑色)
* 色调 (添加灰色)
* 生成 50, 100, 200...900 等级
4. 色彩和谐度分析 :
生成互补方案:
* **单色** : 单一色调的变体
* **类似色** : 色轮上相邻的颜色
* **互补色** : 色轮上相对的颜色
* **三色组** : 三种均匀分布的颜色
* **分裂互补色** : 基色 + 其互补色两侧的两种颜色
* **四色组** : 四种颜色 (两对互补色)
5. 格式化输出 :
🎨 色彩调色板提取器
来源: [图像/网站 URL]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎯 主调色板
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. 主色
HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
用途: 主要品牌色、主要按钮、链接
突出度: 32%
2. 辅助色
HEX: #8B5CF6
RGB: rgb(139, 92, 246)
HSL: hsl(258, 90%, 66%)
用途: 强调元素、悬停状态
突出度: 18%
3. 背景色
HEX: #F8FAFC
RGB: rgb(248, 250, 252)
HSL: hsl(210, 40%, 98%)
用途: 页面背景、卡片
突出度: 25%
4. 主要文本色
HEX: #1E293B
RGB: rgb(30, 41, 59)
HSL: hsl(217, 33%, 17%)
用途: 正文文本、标题
突出度: 15%
5. 强调色
HEX: #10B981
RGB: rgb(16, 185, 129)
HSL: hsl(158, 84%, 39%)
用途: 成功状态、号召性用语
突出度: 10%
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🌈 颜色等级 (Tailwind 风格)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
主色:
50: #EFF6FF [最浅]
100: #DBEAFE
200: #BFDBFE
300: #93C5FD
400: #60A5FA
500: #3B82F6 [基准色]
600: #2563EB
700: #1D4ED8
800: #1E40AF
900: #1E3A8A [最深]
950: #172554
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎭 色彩和谐方案
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
互补色:
基准色: #3B82F6 (蓝色)
互补色: #F6823B (橙色)
类似色:
#3B82F6 (蓝色)
#3BF6D9 (青色)
#823BF6 (紫色)
三色组:
#3B82F6 (蓝色)
#F6823B (橙色)
#82F63B (绿色)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
💻 导出格式
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CSS 变量:
```css
:root {
--color-primary: #3B82F6;
--color-secondary: #8B5CF6;
--color-background: #F8FAFC;
--color-text: #1E293B;
--color-accent: #10B981;
}
Tailwind 配置:
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#EFF6FF',
500: '#3B82F6',
900: '#1E3A8A',
},
}
}
}
}
SCSS 变量:
$primary: #3B82F6;
$secondary: #8B5CF6;
$background: #F8FAFC;
$text: #1E293B;
$accent: #10B981;
JSON:
{
"primary": "#3B82F6",
"secondary": "#8B5CF6",
"background": "#F8FAFC",
"text": "#1E293B",
"accent": "#10B981"
}
Android XML:
<color name="primary">#3B82F6</color>
<color name="secondary">#8B5CF6</color>
iOS Swift:
extension UIColor {
static let primary = UIColor(hex: "3B82F6")
static let secondary = UIColor(hex: "8B5CF6")
}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ♿ 无障碍检查 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
对比度比率 (WCAG 2.1):
文本与背景: #1E293B 在 #F8FAFC 上: 14.2:1 ✅ AAA (优秀)
主色与背景: #3B82F6 在 #F8FAFC 上: 4.8:1 ✅ AA (良好)
白色文本与主色: #FFFFFF 在 #3B82F6 上: 4.6:1 ✅ AA (良好)
强调色与背景: #10B981 在 #F8FAFC 上: 3.2:1 ⚠️ 仅适用于大号文本的 AA 标准
建议: • 小号文本使用更深的强调色 • 主要按钮文本应为白色 (#FFFFFF) • 考虑使用 #047857 以获得更好的对比度
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 💡 色彩心理学 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
蓝色 (#3B82F6): • 信任、专业、冷静 • 常用于: 科技、金融、医疗保健
紫色 (#8B5CF6): • 创造力、奢华、智慧 • 常用于: 创意服务、高端品牌
绿色 (#10B981): • 成长、成功、健康 • 常用于: 环保、金融、健康
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 设计系统集成 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
建议用途: • 主色: 主要号召性用语、链接、激活状态 • 辅助色: 次要按钮、高亮显示 • 背景色: 页面/卡片背景 • 文本色: 正文、标题 • 强调色: 成功消息、高亮显示
颜色角色: • 成功: #10B981 (绿色强调色) • 警告: #F59E0B (从调色板生成) • 错误: #EF4444 (生成互补色) • 信息: #3B82F6 (主蓝色)
色盲模拟 :
* 为以下情况测试调色板:
* 红色盲
* 绿色盲
* 蓝色盲
* 为无障碍性建议调整方案
情绪板 :
* 生成颜色组合
* 展示使用示例
* 创建渐变选项
品牌匹配 :
* 与现有品牌颜色比较
* 查找最接近的品牌匹配
* 建议类似的调色板
颜色提取 :
调色板生成 :
无障碍性 :
导出格式 :
确保调色板:
生成专业、无障碍的色彩调色板,可立即用于设计系统。
每周安装数
82
代码仓库
GitHub 星标数
74
首次出现
2026年1月24日
安全审计
安装于
opencode70
codex69
gemini-cli67
cursor67
github-copilot64
cline60
Extract and generate color palettes from images, websites, and designs.
When a user needs to extract colors from a source:
Identify Source Type :
Extract Colors :
From Image :
* Analyze pixel data
* Identify dominant colors
* Group similar shades
* Calculate color frequency
* Sort by prominence
From Website :
* Fetch and parse CSS
* Extract color values from stylesheets
* Identify brand colors
* Find accent colors
* Detect text/background colors
Color Clustering :
* Use K-means clustering
* Group similar colors
* Typically extract 5-10 dominant colors
* Ignore near-white/near-black unless significant
3. Generate Color Palette :
Primary Palette (5-10 colors):
* Most dominant color
* 2-3 supporting colors
* 1-2 accent colors
* Background color
* Text color
Extended Palette :
* Light and dark variations
* Tints (add white)
* Shades (add black)
* Tones (add gray)
* Generate 50, 100, 200...900 scales
4. Color Harmony Analysis :
Generate complementary schemes:
* **Monochromatic** : Variations of single hue
* **Analogous** : Adjacent colors on wheel
* **Complementary** : Opposite colors
* **Triadic** : Three evenly spaced colors
* **Split-complementary** : Base + two adjacent to complement
* **Tetradic** : Four colors (two complementary pairs)
5. Format Output :
🎨 COLOR PALETTE EXTRACTOR
Source: [Image/Website URL]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎯 PRIMARY PALETTE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. Primary Color
HEX: #3B82F6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
Usage: Main brand color, primary buttons, links
Prominence: 32%
2. Secondary Color
HEX: #8B5CF6
RGB: rgb(139, 92, 246)
HSL: hsl(258, 90%, 66%)
Usage: Accent elements, hover states
Prominence: 18%
3. Background
HEX: #F8FAFC
RGB: rgb(248, 250, 252)
HSL: hsl(210, 40%, 98%)
Usage: Page background, cards
Prominence: 25%
4. Text Primary
HEX: #1E293B
RGB: rgb(30, 41, 59)
HSL: hsl(217, 33%, 17%)
Usage: Body text, headings
Prominence: 15%
5. Accent
HEX: #10B981
RGB: rgb(16, 185, 129)
HSL: hsl(158, 84%, 39%)
Usage: Success states, CTAs
Prominence: 10%
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🌈 COLOR SCALE (Tailwind-style)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Primary:
50: #EFF6FF [lightest]
100: #DBEAFE
200: #BFDBFE
300: #93C5FD
400: #60A5FA
500: #3B82F6 [base]
600: #2563EB
700: #1D4ED8
800: #1E40AF
900: #1E3A8A [darkest]
950: #172554
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎭 COLOR HARMONY SCHEMES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Complementary:
Base: #3B82F6 (blue)
Complement: #F6823B (orange)
Analogous:
#3B82F6 (blue)
#3BF6D9 (cyan)
#823BF6 (purple)
Triadic:
#3B82F6 (blue)
#F6823B (orange)
#82F63B (green)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
💻 EXPORT FORMATS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
CSS Variables:
```css
:root {
--color-primary: #3B82F6;
--color-secondary: #8B5CF6;
--color-background: #F8FAFC;
--color-text: #1E293B;
--color-accent: #10B981;
}
Tailwind Config:
module.exports = {
theme: {
extend: {
colors: {
primary: {
50: '#EFF6FF',
500: '#3B82F6',
900: '#1E3A8A',
},
}
}
}
}
SCSS Variables:
$primary: #3B82F6;
$secondary: #8B5CF6;
$background: #F8FAFC;
$text: #1E293B;
$accent: #10B981;
JSON:
{
"primary": "#3B82F6",
"secondary": "#8B5CF6",
"background": "#F8FAFC",
"text": "#1E293B",
"accent": "#10B981"
}
Android XML:
<color name="primary">#3B82F6</color>
<color name="secondary">#8B5CF6</color>
iOS Swift:
extension UIColor {
static let primary = UIColor(hex: "3B82F6")
static let secondary = UIColor(hex: "8B5CF6")
}
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ♿ ACCESSIBILITY CHECKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Contrast Ratios (WCAG 2.1):
Text on Background: #1E293B on #F8FAFC: 14.2:1 ✅ AAA (excellent)
Primary on Background: #3B82F6 on #F8FAFC: 4.8:1 ✅ AA (good)
White text on Primary: #FFFFFF on #3B82F6: 4.6:1 ✅ AA (good)
Accent on Background: #10B981 on #F8FAFC: 3.2:1 ⚠️ AA Large text only
Recommendations: • Use darker shade of accent for small text • Primary button text should be white (#FFFFFF) • Consider #047857 for better contrast
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 💡 COLOR PSYCHOLOGY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Blue (#3B82F6): • Trust, professionalism, calm • Common for: Tech, finance, healthcare
Purple (#8B5CF6): • Creativity, luxury, wisdom • Common for: Creative services, premium brands
Green (#10B981): • Growth, success, health • Common for: Environmental, finance, wellness
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 DESIGN SYSTEM INTEGRATION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Suggested Usage: • Primary: Main CTAs, links, active states • Secondary: Secondary buttons, highlights • Background: Page/card backgrounds • Text: Body copy, headings • Accent: Success messages, highlights
Color Roles: • Success: #10B981 (green accent) • Warning: #F59E0B (generate from palette) • Error: #EF4444 (generate complement) • Info: #3B82F6 (primary blue)
Color Blindness Simulation :
* Test palette for:
* Protanopia (red-blind)
* Deuteranopia (green-blind)
* Tritanopia (blue-blind)
* Suggest adjustments for accessibility
Mood Board :
* Generate color combinations
* Show usage examples
* Create gradient options
Brand Matching :
* Compare to existing brand colors
* Find closest brand matches
* Suggest similar palettes
Color Extraction :
Palette Generation :
Accessibility :
Export Formats :
Ensure palettes:
Generate professional, accessible color palettes ready for immediate use in design systems.
Weekly Installs
82
Repository
GitHub Stars
74
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode70
codex69
gemini-cli67
cursor67
github-copilot64
cline60
前端设计技能指南:避免AI垃圾美学,打造独特生产级界面
49,900 周安装
GitHub PR 自动审查工具 - 基于严重性优先级排序、应用修复与线程回复
369 周安装
子代理驱动开发 (SADD) 指南:AI 代理任务执行与代码审查流程详解
372 周安装
Reflexion:reflect 自我反思与迭代改进框架 - AI代码质量把关者
375 周安装
阿里云通义千问图像生成API:使用DashScope SDK实现AI图像创作与集成
365 周安装
Storybook故事编写指南:使用CSF3格式创建可维护组件故事
372 周安装
workflow-init:Vercel Workflow DevKit 自动化初始化工具,支持 Next.js/Nuxt/SvelteKit 等主流框架
382 周安装