🖼️ PicKit
EN

如何从图片中提取颜色：配色方案指南

·

为什么需要提取颜色

从图片中提取颜色是设计和开发中常见的需求。无论是为网站选择配色方案，还是为品牌建立统一的视觉风格，图片颜色提取都能提供科学的色彩依据。

典型应用场景

场景说明价值
网站配色从品牌图片提取主色调保持视觉一致性
UI 设计基于产品图生成配色设计与内容协调
品牌建设提取 Logo 主色统一品牌色彩
数据可视化根据内容选择图表颜色增强可读性
摄影后期分析照片色彩分布辅助调色决策
电商设计从产品图提取配色页面与产品呼应

配色一致性的重要性

研究表明，色彩一致的网站比色彩混乱的网站用户停留时间长 40%。一致的配色方案能提升品牌识别度和用户信任感。从品牌图片中提取颜色，是建立一致配色的有效方法。

颜色提取算法原理

像素采样

最简单的颜色提取方法是遍历图片的所有像素，统计每种颜色出现的频率。

function sampleColors(imageData) {
  const colorMap = new Map();
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    const key = `${r},${g},${b}`;

    colorMap.set(key, (colorMap.get(key) || 0) + 1);
  }

  return Array.from(colorMap.entries())
    .sort((a, b) => b[1] - a[1])
    .slice(0, 10);
}

问题：直接统计像素颜色会产生过多相似颜色。一张照片可能有数百万种不同的颜色值，需要进一步处理。

颜色量化

颜色量化是将相似颜色归并为一类的过程，常用的算法包括：

中位切分法（Median Cut）

  1. 将所有像素的颜色放入一个色彩空间
  2. 找到最长边，沿该边的中位数切分
  3. 对两个子空间重复切分
  4. 直到得到指定数量的颜色块
  5. 每个颜色块的平均值即为提取的颜色

K-means 聚类

  1. 随机选择 K 个颜色作为聚类中心
  2. 将每个像素分配到最近的聚类
  3. 重新计算每个聚类的中心
  4. 重复步骤 2-3 直到收敛

算法对比

算法速度质量复杂度适用场景
像素采样快低低快速预览
中位切分中中中通用场景
K-means慢高高精确提取
八叉树中中中实时处理

HEX 和 RGB 格式

提取的颜色通常以 HEX 或 RGB 格式表示，两者可以相互转换。

HEX 格式

HEX 格式使用十六进制表示颜色，以 # 开头，后跟 6 位字符。

#FF5733
  • FF = 红色分量（255）
  • 57 = 绿色分量（87）
  • 33 = 蓝色分量（51）

RGB 格式

RGB 格式直接使用十进制数值表示红、绿、蓝三个分量。

rgb(255, 87, 51)

格式转换

// HEX 转 RGB
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// RGB 转 HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(x => x.toString(16).padStart(2, '0'))
    .join('');
}

其他颜色格式

格式示例说明
HEX#FF5733网页最常用
RGBrgb(255, 87, 51)直观易懂
RGBArgba(255, 87, 51, 0.8)带透明度
HSLhsl(11, 100%, 60%)色相饱和度亮度
HSLAhsla(11, 100%, 60%, 0.8)带透明度的 HSL

如何使用提取的颜色

CSS 变量

将提取的颜色定义为 CSS 变量，方便在整个网站中统一使用。

:root {
  --color-primary: #FF5733;
  --color-secondary: #33FF57;
  --color-accent: #3357FF;
  --color-background: #F5F5F5;
  --color-text: #333333;
}

.button {
  background-color: var(--color-primary);
  color: white;
}

.card {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-background);
}

设计系统

提取的颜色可以构建完整的设计系统：

:root {
  /* 主色调 */
  --primary-50: #FFF5F3;
  --primary-100: #FFE0DB;
  --primary-200: #FFC1B5;
  --primary-300: #FF9D88;
  --primary-400: #FF7456;
  --primary-500: #FF5733;  /* 主色 */
  --primary-600: #E64A28;
  --primary-700: #C03D20;
  --primary-800: #9A3018;
  --primary-900: #732410;

  /* 中性色 */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D4;
  --gray-400: #A3A3A3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
}

JavaScript 动态应用

// 从提取的颜色生成完整色阶
function generateColorScale(baseColor) {
  const rgb = hexToRgb(baseColor);
  const scale = {};

  // 生成 50-900 的色阶
  for (let i = 1; i <= 9; i++) {
    const lightness = 0.95 - (i - 1) * 0.1;
    scale[i * 100] = adjustLightness(rgb, lightness);
  }

  return scale;
}

// 根据图片主色动态设置主题
function applyImageTheme(colors) {
  const root = document.documentElement;
  root.style.setProperty('--color-primary', colors[0]);
  root.style.setProperty('--color-secondary', colors[1]);
  root.style.setProperty('--color-accent', colors[2]);
}

如何使用 PicKit 取色器

PicKit 取色器 可以快速从图片中提取主色调和配色方案。

操作步骤

  1. 上传图片：点击上传或拖放图片到页面
  2. 自动提取：工具自动分析图片并提取主色调
  3. 查看配色方案：
    • 主色调：图片中出现频率最高的颜色
    • 辅助色：与主色调搭配的颜色
    • 点缀色：用于强调的鲜艳颜色
  4. 复制颜色值：点击颜色块复制 HEX 值
  5. 导出配色方案：下载配色方案为 JSON 或 CSS 变量

提取结果说明

颜色类型说明使用建议
主色调出现频率最高用于背景、标题
辅助色频率次高用于按钮、链接
点缀色高饱和度用于强调、提示
中性色低饱和度用于文字、边框

配色方案生成

互补色方案

互补色是色环上相对的两种颜色，对比强烈。

:root {
  --primary: #FF5733;      /* 橙红色 */
  --complement: #33B5FF;   /* 蓝色（互补色） */
}

类似色方案

类似色是色环上相邻的颜色，和谐统一。

:root {
  --primary: #FF5733;      /* 橙红色 */
  --analogous-1: #FF8C33;  /* 橙色 */
  --analogous-2: #FF3380;  /* 粉红色 */
}

三元色方案

三元色是色环上等距的三种颜色，色彩丰富平衡。

:root {
  --primary: #FF5733;      /* 橙红色 */
  --triad-1: #33FF57;      /* 绿色 */
  --triad-2: #5733FF;      /* 紫色 */
}

配色方案选择指南

配色方案特点适用场景
单色统一、专业企业网站、文档
互补色对比强烈营销页面、CTA 按钮
类似色和谐自然摄影、艺术类网站
三元色丰富活泼创意类、儿童类网站
分裂互补对比适中通用场景

代码示例：完整的颜色提取

使用 Canvas API 提取主色调

function extractDominantColors(image, colorCount = 5) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 缩小图片以提高处理速度
  const scale = Math.min(100 / image.width, 100 / image.height);
  canvas.width = image.width * scale;
  canvas.height = image.height * scale;

  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const colorMap = new Map();

  // 统计颜色频率（量化到 16 级）
  for (let i = 0; i < imageData.data.length; i += 4) {
    const r = Math.round(imageData.data[i] / 16) * 16;
    const g = Math.round(imageData.data[i + 1] / 16) * 16;
    const b = Math.round(imageData.data[i + 2] / 16) * 16;
    const key = `${r},${g},${b}`;

    colorMap.set(key, (colorMap.get(key) || 0) + 1);
  }

  // 按频率排序并返回前 N 个颜色
  return Array.from(colorMap.entries())
    .sort((a, b) => b[1] - a[1])
    .slice(0, colorCount)
    .map(([key]) => {
      const [r, g, b] = key.split(',').map(Number);
      return rgbToHex(r, g, b);
    });
}

生成配色方案

function generatePalette(baseColor) {
  const rgb = hexToRgb(baseColor);
  const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);

  return {
    primary: baseColor,
    light: hslToHex(hsl.h, hsl.s, Math.min(hsl.l + 0.2, 0.95)),
    dark: hslToHex(hsl.h, hsl.s, Math.max(hsl.l - 0.2, 0.05)),
    complementary: hslToHex((hsl.h + 180) % 360, hsl.s, hsl.l),
    analogous1: hslToHex((hsl.h + 30) % 360, hsl.s, hsl.l),
    analogous2: hslToHex((hsl.h + 330) % 360, hsl.s, hsl.l),
  };
}

常见问题

提取的颜色和肉眼看到的不一致？ 颜色提取算法基于像素频率统计，可能会被大面积背景色主导。如果背景色不是你想要的主色调，可以先裁剪图片去除背景区域，再进行颜色提取。使用 PicKit 取色器 时可以调整提取参数。

如何提取图片中的特定区域颜色？ 使用 裁剪工具 先裁剪出目标区域，然后用取色器提取该区域的颜色。这样可以精确提取特定对象的颜色，避免被其他区域干扰。

提取的颜色太少或太多怎么办？ 调整颜色量化的精度可以控制提取的颜色数量。量化级别越高（如 32 级），提取的颜色越多但越相似；量化级别越低（如 8 级），颜色越少但差异越大。PicKit 取色器允许设置提取的颜色数量，通常 5-8 个颜色足够使用。

深色图片提取的颜色都很暗怎么办？ 深色图片的主色调自然偏暗。可以基于提取的颜色生成更亮的变体用于设计。将提取的颜色转换为 HSL 格式，提高亮度值（L）即可生成更亮的版本。也可以提取后手动调整亮度生成完整色阶。

如何确保提取的颜色在网页上对比度足够？ 提取主色调后，检查它与白色和黑色的对比度。WCAG 标准建议文字与背景的对比度至少为 4.5:1。可以使用在线对比度检查工具验证。如果对比度不足，调整颜色的亮度值直到满足要求。

相关工具

图片裁剪