在线取色器：HEX/RGB/HSL

设计网页选什么主色、看到海报颜色想知道色值、PS 取色功能在另一个屏幕——在线取色器一键解决。本文详解取色工具。

52tool 在线取色器

功能

颜色选择器（视觉调色）
HEX/RGB/HSL 互转
从图片取色
配色方案生成
颜色对比度检查
浏览器端运行

实战 1：选择颜色

取色器：可视化选择
HEX：#3498DB
RGB：52, 152, 219
HSL：204°, 70%, 53%

实战 2：从图片取色

上传图片
鼠标点击图片任意位置
显示该位置颜色 HEX 值

实战 3：颜色转换

输入 HEX #FF5733，输出：

RGB：255, 87, 51
HSL：11°, 100%, 60%
HSV：11°, 80%, 100%
CMYK：0%, 66%, 80%, 0%

颜色格式详解

HEX（十六进制）

最常用的网页颜色格式：

#FF5733
││ ││ ││
││ ││ │└─ 蓝色
││ ││ └── 绿色低 4 位
││ │└── 绿色高 4 位
││ └── 红色低 4 位
│└── 红色高 4 位
└── # 前缀

6 位：RRGGBB
3 位简写：#F53（= #FF5533）
8 位带透明度：#FF573380（最后 2 位是透明度）

RGB（红绿蓝）

RGB(255, 87, 51)

每个值 0-255。表示显示器发光强度。

RGBA（带透明度）

RGBA(255, 87, 51, 0.5)

最后值 0-1 是透明度（0 完全透明，1 完全不透明）。

HSL（色相饱和度亮度）

HSL(11, 100%, 60%)

H：色相 0-360 度
S：饱和度 0-100%
L：亮度 0-100%

HSL 更符合人类直觉，调色方便。

HSV/HSB（色相饱和度明度）

HSV(11, 80%, 100%)

类似 HSL 但 V（明度）和 L（亮度）定义不同。

CMYK（青品黄黑）

CMYK(0%, 66%, 80%, 0%)

印刷四色，每个值 0-100%。

各格式适用场景

格式	适用场景
HEX	CSS、HTML
RGB	CSS、Canvas
RGBA	CSS 带透明度
HSL	设计调色
HSV	PS、图像软件
CMYK	印刷

CSS 颜色用法

颜色值

/* HEX */
color: #3498db;
color: #3498db80;  /* 带透明度 */

/* RGB */
color: rgb(52, 152, 219);
color: rgba(52, 152, 219, 0.5);

/* HSL */
color: hsl(204, 70%, 53%);
color: hsla(204, 70%, 53%, 0.5);

/* 颜色名 */
color: blue;
color: transparent;

/* currentColor */
color: currentColor;  /* 继承自身颜色 */

/* CSS 变量 */
:root {
  --primary: #3498db;
}
color: var(--primary);

渐变

background: linear-gradient(to right, #3498db, #e74c3c);
background: linear-gradient(45deg, hsl(204, 70%, 53%), hsl(0, 80%, 60%));

阴影

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

颜色转换公式

HEX → RGB

#FF5733
FF → 255
57 → 87
33 → 51
RGB(255, 87, 51)

RGB → HEX

RGB(255, 87, 51)
255 → FF
87 → 57
51 → 33
#FF5733

RGB → HSL

R, G, B 归一化到 0-1
计算 max, min
L = (max + min) / 2
if max == min:
    H = S = 0
else:
    d = max - min
    S = d / (2 - max - min) if L > 0.5 else d / (max + min)
    if max == R: H = (G - B) / d + (6 if G < B else 0)
    if max == G: H = (B - R) / d + 2
    if max == B: H = (R - G) / d + 4
    H *= 60

HSL → RGB

if S == 0:
    R = G = B = L
else:
    q = L * (1 + S) if L < 0.5 else L + S - L * S
    p = 2 * L - q
    R = hueToRgb(p, q, H + 1/3)
    G = hueToRgb(p, q, H)
    B = hueToRgb(p, q, H - 1/3)

编程实现

JavaScript

// HEX → RGB
function hexToRgb(hex) {
  const r = parseInt(hex.substr(1, 2), 16);
  const g = parseInt(hex.substr(3, 2), 16);
  const b = parseInt(hex.substr(5, 2), 16);
  return [r, g, b];
}

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

// 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); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return [h * 360, s * 100, l * 100];
}

Python

import colorsys

# RGB → HSL
r, g, b = 1.0, 87/255, 51/255
h, l, s = colorsys.rgb_to_hls(r, g, b)
print(f'HSL({h*360}, {s*100}%, {l*100}%)')

# HEX → RGB
hex_color = '#FF5733'
r, g, b = tuple(int(hex_color[i:i+2], 16) for i in (1, 3, 5))

CSS Color Module Level 4

新 CSS 颜色函数：

color: hsl(204deg 70% 53%);
color: hwb(204 30% 20%);
color: lab(50% 40 30);
color: lch(50% 50 240);
color: color(display-p3 0.5 0.6 0.7);

颜色名称

CSS 标准 140 个颜色名：

名称	HEX
red	#FF0000
green	#008000
blue	#0000FF
white	#FFFFFF
black	#000000
yellow	#FFFF00
cyan	#00FFFF
magenta	#FF00FF
gray	#808080
orange	#FFA500
purple	#800080
pink	#FFC0CB
brown	#A52A2A

完整列表见 MDN 文档。

实战场景

场景 1：网页主色

品牌色：#3498DB
浅色：#85C1E2（10% 不透明）
深色：#21618C

场景 2：从 Logo 取色

上传 Logo 到 52tool 取色器
点击主色位置
获取 HEX 值
用作网页主色

场景 3：配色方案

主色 #3498DB，生成配色：

互补色：#E74C3C（红色）
类似色：#1ABC9C, #9B59B6
三元色：#F1C40F, #E74C3C
单色：#85C1E2, #21618C

用 52tool 配色生成。

场景 4：检查对比度

文字颜色 vs 背景颜色：

文字：#333333
背景：#FFFFFF
对比度：12.6:1
WCAG AAA 通过（≥ 7:1）

参考 52tool 对比度检查。

场景 5：CSS 渐变

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

参考 52tool CSS 渐变生成器。

场景 6：CSS 变量

:root {
  --primary: #3498db;
  --primary-dark: #21618C;
  --primary-light: #85C1E2;
  --text: #333;
  --background: #fff;
}

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

设计常用色板

Material Design

500 主色：

Red: #F44336
Pink: #E91E63
Purple: #9C27B0
Deep Purple: #673AB7
Indigo: #3F51B5
Blue: #2196F3
Light Blue: #03A9F4
Cyan: #00BCD4
Teal: #009688
Green: #4CAF50
Light Green: #8BC34A
Lime: #CDDC39
Yellow: #FFEB3B
Amber: #FFC107
Orange: #FF9800
Deep Orange: #FF5722
Brown: #795548
Grey: #9E9E9E
Blue Grey: #607D8B

Tailwind CSS

gray-500: #6B7280
red-500: #EF4444
yellow-500: #EAB308
green-500: #22C55E
blue-500: #3B82F6
indigo-500: #6366F1
purple-500: #8B5CF6
pink-500: #EC4899

中国传统色

朱红：#FF461F
胭脂：#9D2933
朱砂：#FF461F
樱草：#EEFF04
鹅黄：#FFF143
茶色：#B05923
墨色：#50616D
黛色：#4A4266

进阶技巧

技巧 1：用 HSL 调色

HSL 比 RGB 直观：

主色 HSL(204, 70%, 53%)
变深：HSL(204, 70%, 33%)
变浅：HSL(204, 70%, 73%)
变饱和：HSL(204, 90%, 53%)

技巧 2：颜色一致性

整个网站用 CSS 变量统一管理：

:root {
  --primary: #3498db;
  --secondary: #2ecc71;
  --accent: #e74c3c;
  --text: #333;
  --background: #fff;
}

技巧 3：色彩心理学

红：热情、警示
橙：活力、温暖
黄：明亮、警告
绿：自然、安全
蓝：信任、专业
紫：神秘、高贵
黑：高端、严肃
白：清洁、简洁

技巧 4：60-30-10 法则

设计配色比例：

60% 主色（背景）
30% 副色（次要元素）
10% 强调色（按钮等）

技巧 5：色盲友好

避免红绿组合（约 8% 男性色盲）。用对比度检查验证色盲友好性。

与其他工具配合

取色 + 配色

工具：配色生成器

取主色后生成完整配色方案。

取色 + 对比度

工具：对比度检查

确保文字在背景上可读。

取色 + CSS 渐变

工具：CSS 渐变生成器

用取的颜色生成 CSS 渐变。

取色 + 颜色转换

工具：颜色转换器

HEX/RGB/HSL/HSV/CMYK 互转。

常见问题

Q: HEX 和 RGB 颜色一样吗？

A: 是。HEX 是 RGB 的十六进制表示，值完全等价。

Q: HSL 和 HSV 区别？

A: HSL 的 L（亮度）= 0% 全黑，100% 全白。HSV 的 V（明度）= 0% 全黑，100% 纯色。PS 等用 HSV，CSS 用 HSL。

Q: 透明度怎么表示？

A: HEX 8 位（#3498DB80）或 RGBA/HSLA（rgba(52,152,219,0.5)）。

Q: 怎么从图片取色？

A: 1) 用 52tool 取色器；2) 上传图片；3) 点击位置；4) 获取 HEX。

Q: 颜色名称能用吗？

A: 能。但只有 140 个标准名称，覆盖不全。建议用 HEX/RGB/HSL。

Q: 工具会泄露我的图片吗？

A: 52tool 取色器在浏览器端处理，图片不上传服务器。适合处理 Logo、设计稿等敏感图片。

常见问题解答

Q: 怎么从图片取色？

A: 1) 打开 52tool 取色器；2) 上传图片；3) 鼠标点击想取色的位置；4) 显示 HEX/RGB/HSL。

Q: HEX 怎么转 RGB？

A: HEX #FF5733，分别取前 2 位 FF=255、中间 57=87、后 2 位 33=51，得到 RGB(255, 87, 51)。

Q: RGB 怎么转 HSL？

A: 用工具或代码。手动算复杂：1) 归一化 RGB 到 0-1；2) 计算 max、min；3) 求 L、S、H。

Q: 透明度 80% 怎么写？

A: HEX 8 位：#3498DBCC（CC 是 80% 不透明）。RGBA：rgba(52,152,219,0.8)。

Q: 怎么生成配色方案？

A: 用 52tool 配色生成器：1) 输入主色；2) 选互补/类似/三元等；3) 生成方案。

Q: 颜色对比度多少合格？

A: 文字 vs 背景：WCAG AA ≥ 4.5:1，AAA ≥ 7:1。大文字（18px+ 或 14px+加粗）：AA ≥ 3:1。

总结

取色器是设计师和前端必备：

在线取色 → 52tool 取色器
颜色转换 → 颜色转换器
配色方案 → 配色生成器
对比度检查 → 对比度检查

记住：HEX 用于网页，HSL 用于调色，60-30-10 法则做设计。

在线取色器：HEX/RGB/HSL

52tool 在线取色器

功能

实战 1：选择颜色

实战 2：从图片取色

实战 3：颜色转换

颜色格式详解

HEX（十六进制）

RGB（红绿蓝）

RGBA（带透明度）

HSL（色相饱和度亮度）

HSV/HSB（色相饱和度明度）

CMYK（青品黄黑）

各格式适用场景

CSS 颜色用法

颜色值

渐变

阴影

颜色转换公式

HEX → RGB

RGB → HEX

RGB → HSL

HSL → RGB

编程实现

JavaScript

Python

CSS Color Module Level 4

颜色名称

实战场景

场景 1：网页主色

场景 2：从 Logo 取色

场景 3：配色方案

场景 4：检查对比度

场景 5：CSS 渐变

场景 6：CSS 变量

设计常用色板

Material Design

Tailwind CSS

中国传统色

进阶技巧

技巧 1：用 HSL 调色

技巧 2：颜色一致性

技巧 3：色彩心理学

技巧 4：60-30-10 法则

技巧 5：色盲友好

与其他工具配合

取色 + 配色

取色 + 对比度

取色 + CSS 渐变

取色 + 颜色转换

常见问题

Q: HEX 和 RGB 颜色一样吗？

Q: HSL 和 HSV 区别？

Q: 透明度怎么表示？

Q: 怎么从图片取色？

Q: 颜色名称能用吗？

Q: 工具会泄露我的图片吗？

常见问题解答

Q: 怎么从图片取色？

Q: HEX 怎么转 RGB？

Q: RGB 怎么转 HSL？

Q: 透明度 80% 怎么写？

Q: 怎么生成配色方案？

Q: 颜色对比度多少合格？

总结

📚 推荐阅读