颜色提取器

什么是颜色提取器？

颜色提取器是一款免费在线工具，可自动从图像中提取主要调色板。分析照片或设计作品中使用了哪些颜色，并获取 HEX、RGB、HSL 格式的颜色代码。

在网页设计、平面设计、品牌设计、室内设计等各个领域需要调色板时都可以方便地使用。从灵感图片中提取颜色，应用到您的项目中。

适合人群

• 网页/应用设计师 – 从参考图片中提取调色板以构建设计系统
• 品牌设计师 – 从 Logo 或产品图片中分析和提取品牌色彩
• 平面设计师 – 寻找捕捉照片氛围的和谐配色
• 室内设计师 – 从富有灵感的空间照片生成调色板
• 插画师 – 分析参考图片的色调用于创作
• 社交媒体内容创作者 – 分析颜色以保持一致的动态色调
• 服装设计师 – 从趋势图片中提取季节性色彩

主要功能

• 8种主要颜色提取 – 自动从图像中提取8种最具代表性的颜色。相似的颜色会被分组，以提供多样化的调色板。
• 颜色占比显示 – 以百分比显示每种颜色在图像中的占比。帮助您了解主色和辅助色的构成。
• 多种颜色格式 – 可以查看 HEX、RGB、HSL 三种格式的颜色代码。点击标签切换到您想要的格式。
• 颜色名称显示 – 显示每种颜色最接近的标准颜色名称。’Coral’、’Navy’、’Gold’ 等直观的颜色名称让颜色更容易理解。
• 一键复制 – 点击颜色卡片即可将该颜色代码复制到剪贴板。
• CSS 变量复制 – 可以一次性以 CSS 自定义属性（变量）格式复制所有提取的颜色。
• 调色板图片下载 – 将提取的调色板下载为 PNG 图片以便分享或保存。
• 拖放上传 – 将图片拖放到上传区域即可立即开始颜色提取。

了解颜色格式

让我们了解本工具支持的三种颜色格式。

HEX（十六进制）

HEX 使用十六进制数表示颜色。#RRGGBB 格式中，每两位数字分别表示红（R）、绿（G）、蓝（B）的值，范围从 00 到 FF。

• #FF0000 – 红色
• #00FF00 – 绿色
• #0000FF – 蓝色
• #FFFFFF – 白色
• #000000 – 黑色

这是网页开发中最常用的格式，可直接在 CSS 中使用。

RGB

RGB 使用红（Red）、绿（Green）、蓝（Blue）的组合表示颜色。每个颜色通道的值范围是 0 到 255。

• rgb(255, 0, 0) – 红色
• rgb(0, 255, 0) – 绿色
• rgb(128, 128, 128) – 灰色

需要透明度时，可以添加 alpha 值，如 rgba(255, 0, 0, 0.5)。

HSL

HSL 使用色相（Hue）、饱和度（Saturation）、明度（Lightness）表示颜色。由于与人类感知颜色的方式相似，因此非常直观。

• H（色相）：0°–360° 色环角度（0°=红、120°=绿、240°=蓝）
• S（饱和度）：0%–100% 饱和度（0%=灰色、100%=鲜艳色）
• L（明度）：0%–100% 明度（0%=黑、50%=纯色、100%=白）

例如：hsl(0, 100%, 50%) 是纯红色。

颜色提取算法

本工具通过以下流程从图像中提取颜色：

1. 图像采样 – 为优化性能，将图像缩小到适当大小。
2. 颜色量化 – 对相似颜色进行分组并提取代表色。
3. 频率分析 – 计算每个颜色组的像素数并按频率排序。
4. 多样性保证 – 排除过于相似的颜色，选择多样化的颜色。
5. 颜色匹配 – 为每种颜色匹配最接近的标准颜色名称。

使用技巧

• 使用高质量图片 – 从清晰且包含多种颜色的图片中可以提取更准确的颜色。
• 使用完整图片 – 包含整体氛围的图片比只截取部分的图片效果更好。
• 利用 CSS 变量 – 将提取的 CSS 变量复制到项目的根样式表中，构建一致的颜色系统。
• 保存调色板 – 将喜欢的调色板下载为图片，保存到项目文件夹中。
• 比较多张图片 – 从多张参考图片中提取颜色并比较，找到最佳调色板。

设计中的颜色运用

让我们学习如何有效地使用提取的调色板。

60-30-10 法则

这是室内设计和设计领域广泛使用的颜色分配法则：

• 60% – 主色：用于背景和主要区域的基础色
• 30% – 辅助色：补充主色的第二颜色
• 10% – 强调色：吸引视线的点缀色

颜色和谐

• 互补色（Complementary）：色环上相对位置的颜色组合。产生强烈对比效果。
• 类似色（Analogous）：色环上相邻颜色的组合。和谐舒适的感觉。
• 三角配色（Triadic）：色环上形成等边三角形的三种颜色。平衡的多样性。

使用方法

1. 上传图片 – 点击选择文件按钮或拖放图片上传。
2. 自动分析 – 图片上传后自动开始颜色分析。
3. 选择格式 – 点击 HEX、RGB、HSL 标签选择您想要的颜色格式。
4. 复制颜色 – 点击颜色卡片将颜色代码复制到剪贴板。
5. 复制 CSS – 点击”CSS 变量”区域的复制按钮，以 CSS 格式复制所有颜色。
6. 下载调色板 – 点击”下载调色板”按钮保存为 PNG 图片。