color-palette-extractor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Color Palette Extractor

调色板提取工具

Extract and generate color palettes from images, websites, and designs.

从图片、网站和设计稿中提取并生成调色板。

Instructions

操作说明

When a user needs to extract colors from a source:

Identify Source Type:
- Image file (PNG, JPG, SVG)
- Website URL
- Screenshot
- Design mockup
- Existing color code to build palette from
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
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
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)

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:

scss

$primary: #3B82F6;
$secondary: #8B5CF6;
$background: #F8FAFC;
$text: #1E293B;
$accent: #10B981;

JSON:

json

{
  "primary": "#3B82F6",
  "secondary": "#8B5CF6",
  "background": "#F8FAFC",
  "text": "#1E293B",
  "accent": "#10B981"
}

Android XML:

xml

<color name="primary">#3B82F6</color>
<color name="secondary">#8B5CF6</color>

iOS Swift:

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)

undefined

Advanced Features:

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

当用户需要从某个来源提取色彩时：

识别来源类型:
- 图片文件（PNG、JPG、SVG）
- 网站URL
- 截图
- 设计原型
- 已有色彩代码（用于构建调色板）
提取色彩:

从图片提取:
- 分析像素数据
- 识别主色调
- 归类相似色调
- 计算色彩出现频率
- 按视觉占比排序
从网站提取:
- 获取并解析CSS
- 从样式表中提取色彩值
- 识别品牌主色
- 提取强调色
- 检测文本/背景色
色彩聚类:
- 使用K-means聚类算法
- 归类相似色彩
- 通常提取5-10种主色调
- 忽略占比极低的近白/近黑色调
生成调色板:

基础调色板（5-10种颜色）:
- 最主要的主色调
- 2-3种辅助色
- 1-2种强调色
- 背景色
- 文本色
扩展调色板:
- 亮色与暗色变体
- 淡色（添加白色）
- 深色（添加黑色）
- 中性色调（添加灰色）
- 生成50、100、200...900的色阶（Tailwind风格）
色彩和谐性分析:

生成互补配色方案:
- 单色方案: 单一色调的变体
- 邻近色方案: 色轮上相邻的颜色
- 互补色方案: 色轮上相对的颜色
- 三色方案: 色轮上均匀分布的三种颜色
- 分裂互补色方案: 基础色+互补色的两个邻近色
- 四色方案: 四种颜色（两对互补色）

输出格式:

🎨 调色板提取工具

来源: [图片/网站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%)
   用途: 成功状态、主要行动按钮（CTA）
   视觉占比: 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变量:

scss

$primary: #3B82F6;
$secondary: #8B5CF6;
$background: #F8FAFC;
$text: #1E293B;
$accent: #10B981;

JSON格式:

json

{
  "primary": "#3B82F6",
  "secondary": "#8B5CF6",
  "background": "#F8FAFC",
  "text": "#1E293B",
  "accent": "#10B981"
}

Android XML:

xml

<color name="primary">#3B82F6</color>
<color name="secondary">#8B5CF6</color>

iOS Swift:

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）: • 代表成长、成功、健康 • 常见于: 环保、金融、健康行业

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🎨 设计系统集成 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

建议用途: • 主色调: 主要CTA、链接、激活状态 • 辅助色: 次要按钮、高亮元素 • 背景色: 页面/卡片背景 • 文本色: 正文、标题 • 强调色: 成功提示、高亮标记

色彩角色: • 成功: #10B981（绿色强调色） • 警告: #F59E0B（从调色板生成） • 错误: #EF4444（生成互补色） • 信息: #3B82F6（主色调蓝色）

undefined

高级功能:

色盲模拟:
- 测试调色板在以下色盲类型中的显示效果:
  - 红色盲（Protanopia）
  - 绿色盲（Deuteranopia）
  - 蓝色盲（Tritanopia）
- 提出可访问性调整建议
情绪板生成:
- 生成色彩组合
- 展示使用示例
- 创建渐变选项
品牌色彩匹配:
- 与已有品牌色彩对比
- 找到最接近的品牌色匹配
- 推荐相似调色板

Example Triggers

触发示例

"Extract colors from this screenshot"
"Get color palette from this website"
"Generate a color scheme from this image"
"Create Tailwind config from these colors"
"Find dominant colors in this logo"
"Build a palette from this hex code"

"从这张截图中提取色彩"
"从这个网站获取调色板"
"根据这张图片生成配色方案"
"根据这些色彩创建Tailwind配置"
"找出这个Logo中的主色调"
"用这个HEX代码构建调色板"

Best Practices

最佳实践

Color Extraction:

Filter out near-white/black unless prominent
Group similar colors (within 10% similarity)
Weight by visual importance (not just frequency)
Consider color psychology

Palette Generation:

Maintain color harmony
Ensure sufficient contrast
Generate semantic names (primary, accent, etc.)
Provide light and dark variations

Accessibility:

Check WCAG contrast ratios
Test with color blindness simulation
Recommend accessible alternatives
Ensure text readability

Export Formats:

Support common formats (CSS, Tailwind, iOS, Android)
Include usage guidelines
Provide example implementations

色彩提取:

忽略占比极低的近白/近黑色调
归类相似色彩（相似度在10%以内）
按视觉重要性加权（而非仅按出现频率）
考虑色彩心理学

调色板生成:

保持色彩和谐性
确保足够的对比度
使用语义化命名（primary、accent等）
提供亮色与暗色变体

可访问性:

检查WCAG对比度
进行色盲模拟测试
推荐可访问的替代方案
确保文本可读性

导出格式:

支持常见格式（CSS、Tailwind、iOS、Android）
包含使用指南
提供示例实现

Output Quality

输出质量要求

Ensure palettes:

Have clear dominant colors
Include sufficient variations
Pass accessibility checks
Come with usage guidelines
Export in multiple formats
Include color psychology notes
Show harmony schemes
Provide contrast ratios
Work for color-blind users
Have semantic naming

Generate professional, accessible color palettes ready for immediate use in design systems.

确保调色板:

具有清晰的主色调
包含足够的色彩变体
通过可访问性检查
附带使用指南
支持多格式导出
包含色彩心理学说明
展示和谐配色方案
提供对比度数据
适配色盲用户
使用语义化命名

生成专业、可访问的调色板，可直接用于设计系统。