Make Tools
2026-04-11

在线取色器：从屏幕任意位置获取颜色

了解颜色格式（HEX、RGB、HSL），使用浏览器 API 取色，以及颜色搭配和无障碍对比度的最佳实践。

颜色设计前端开发

什么是取色器？

取色器（Color Picker）是一种工具，让你从屏幕上的任意位置获取颜色值。无论是网页设计、UI 开发还是数字艺术，精确获取颜色是日常工作的一部分。一个好的取色器能将视觉颜色转换为 HEX、RGB、HSL 等多种格式的代码值。

浏览器原生的取色能力越来越强大，配合我们的 在线取色器，你可以直接在网页中拾取、转换和管理颜色。

颜色格式详解

HEX（十六进制）

HEX 是网页设计中最常用的颜色格式。用 6 个十六进制字符表示红、绿、蓝三个通道：

/* HEX 颜色示例 */
color: #FF5733;     /* 橙红色 */
color: #3498DB;     /* 蓝色 */
color: #2ECC71;     /* 绿色 */
color: #000000;     /* 黑色 */
color: #FFFFFF;     /* 白色 */

/* 带透明度的 HEX (8 位) */
color: #FF573380;   /* 50% 透明度的橙红色 */

RGB / RGBA

RGB 使用 0-255 的数值表示红、绿、蓝三个通道。RGBA 添加了透明度通道（0-1）。

/* RGB 颜色 */
color: rgb(255, 87, 51);        /* 橙红色 */
color: rgb(52, 152, 219);       /* 蓝色 */

/* RGBA 带透明度 */
color: rgba(255, 87, 51, 0.5);  /* 50% 透明度 */

HSL / HSLA

HSL 使用色相（Hue）、饱和度（Saturation）和亮度（Lightness）描述颜色，更符合人类对颜色的感知方式。调整亮度或饱和度时比 HEX/RGB 更直观。

/* HSL 颜色 */
color: hsl(14, 100%, 60%);        /* 橙红色 */
color: hsl(204, 70%, 53%);        /* 蓝色 */

/* HSLA 带透明度 */
color: hsla(14, 100%, 60%, 0.8);  /* 80% 透明度 */

浏览器端取色 API

现代浏览器提供了 EyeDropper API，允许用户从屏幕上任意位置拾取颜色：

// 使用 EyeDropper API 取色
async function pickColor() {
  if (!window.EyeDropper) {
    alert('你的浏览器不支持 EyeDropper API');
    return;
  }

  const eyeDropper = new EyeDropper();
  try {
    const result = await eyeDropper.open();
    console.log('选中的颜色:', result.sRGBHex);
    // 输出如: #ff5733
    return result.sRGBHex;
  } catch (e) {
    console.log('用户取消了取色');
  }
}

// 绑定到按钮
document.getElementById('pick-btn').addEventListener('click', pickColor);

注意：EyeDropper API 需要用户手势触发（如点击），且需要 HTTPS 环境。

颜色转换

在不同格式之间转换颜色是常见需求：

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

console.log(hexToRgb('#FF5733'));
// 输出: { r: 255, g: 87, b: 51 }

// RGB 转 HSL
function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
}

设计中的颜色搭配

好的颜色搭配提升设计质量。几种经典方案：

  • 互补色：色轮上 180° 对立的颜色——高对比度，适合强调
  • 类似色：色轮上相邻的颜色——和谐、自然
  • 三色组：色轮上等距的三种颜色——丰富、平衡
  • 单色：同一色相的不同明度/饱和度——统一、专业

无障碍与颜色对比度

WCAG 标准要求文字与背景有足够的对比度：

  • AA 级：普通文字对比度 ≥ 4.5:1，大文字 ≥ 3:1
  • AAA 级：普通文字对比度 ≥ 7:1，大文字 ≥ 4.5:1
// 计算相对亮度
function relativeLuminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c = c / 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}

// 计算对比度
function contrastRatio(l1, l2) {
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

CSS 自定义属性与颜色管理

使用 CSS 自定义属性管理颜色主题，方便全局切换：

:root {
  --primary: #3498DB;
  --primary-light: #5DADE2;
  --primary-dark: #2874A6;
  --text: #2C3E50;
  --background: #ECF0F1;
}

.dark-theme {
  --primary: #5DADE2;
  --text: #ECF0F1;
  --background: #2C3E50;
}

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

常见问题

HEX 和 RGB 有什么区别？

只是表示方式不同。HEX 用十六进制，RGB 用十进制。视觉效果完全一样。HEX 更紧凑，RGB 更直观易读。

什么时候用 HSL？

当你需要微调颜色时。HSL 的色相、饱和度、亮度参数比 HEX/RGB 更直观——想要更亮就增加 L，想要更灰就降低 S。

浏览器取色器可以取屏幕外的颜色吗？

EyeDropper API 可以取屏幕上任意可见位置的颜色，包括其他应用窗口。但仅限屏幕可见区域。

取色器会上传我的屏幕数据吗？

不会。我们的 在线取色器 使用浏览器原生 API，所有操作在本地完成。

总结

无论是设计新界面还是维护现有项目，精确的颜色管理都是基础技能。掌握 HEX、RGB、HSL 格式之间的转换，了解对比度要求，善用浏览器原生 API。使用我们的 在线取色器 轻松拾取、转换和管理颜色。

试试这个工具？

打开工具 →
← 返回博客