颜色工具/拾色器
在线颜色拾取工具，支持HEX、RGB、HSL多格式互转，实时预览颜色效果
hsl(217, 91%, 60%)
使用说明
- 1 使用颜色选择器选取颜色，或直接输入HEX/RGB值
- 2 查看HEX、RGB、HSL三种格式的颜色值
- 3 点击对应格式旁的"复制"按钮复制颜色值
相关工具
条形码生成
在线条形码生成工具，支持CODE128和EAN-13格式，生成高质量条形码图片
Box Shadow 生成器
在线 Box Shadow 生成器，支持实时预览阴影参数并复制 CSS 代码。
WCAG 颜色对比度检测
实时计算前景色与背景色的 WCAG 对比度比值，标注 AA / AAA 通过状态，并以按钮、卡片、输入框组件预览效果。支持导出 CSS 变量。
CSS 渐变生成器
在线 CSS 渐变生成器，支持线性渐变预览、角度调节和 CSS 代码复制。
Favicon 生成器
在线 Favicon 生成器，支持上传图像后生成多尺寸网站图标并下载 PNG 文件。
在线白板/画板
在线白板画板工具，支持画笔、橡皮擦、颜色选择、笔刷粗细调节，可导出为PNG。
二维码识别/解码
上传二维码图片，自动识别并解码出文本内容，先看内容再决定是否访问，避免扫到恶意链接。
二维码生成
输入文本或链接，即时生成QR二维码图片，可下载PNG
关于此工具
在线拾色器支持 HEX（#RRGGBB）、RGB（rgb(255, 0, 0)）和 HSL（hsl(0, 100%, 50%)）三种颜色格式的实时互转，任意修改其中一种格式，其他两种自动同步更新，消除手动换算的繁琐。
适用场景：前端开发中将设计稿的 HEX 颜色转为 RGB 供 CSS 使用、UI 设计师调整色相/饱和度时直接操作 HSL 参数、品牌色管理中统一输出多种格式的色值、以及在颜色调试时快速对比不同格式下的写法差异。
HSL 格式相比 HEX 和 RGB 的最大优势是符合人类直觉：H（色相）决定颜色种类，S（饱和度）控制鲜艳程度，L（亮度）调节深浅，调色时只需修改单一维度，不必在三个通道之间反复试错。
常见问题
HEX 颜色的 3 位缩写和 6 位完整写法有什么区别？ +
#RGB 三位缩写等价于 #RRGGBB，即每位重复一次。#F00 等同于 #FF0000（纯红）。只有当 R、G、B 每个分量的两位数字相同时才能缩写。CSS 两种写法均有效，但建议统一使用 6 位写法以避免混淆。
CSS 中 rgba 和 rgb 的区别是什么？ +
rgba 比 rgb 多一个 a（alpha）透明度通道，取值 0（完全透明）到 1（完全不透明）。例如 rgba(255, 0, 0, 0.5) 是半透明红色。CSS 现代语法也支持 rgb(255 0 0 / 50%) 的空格分隔写法，两种方式均有效。
为什么设计稿给的颜色在屏幕上看起来不一样？ +
可能原因：显示器色彩空间不同（sRGB vs P3）、显示器未校色、屏幕亮度和色温设置差异，或 Figma/Sketch 使用了 P3 广色域色彩空间而浏览器默认渲染 sRGB。拾色器工具基于标准 sRGB 色彩空间，跨设备颜色一致性需校色显示器保证。
HSL 中的色相（H）值是怎么分布的？ +
H 的取值范围是 0°-360°，对应色轮上的颜色：0°/360° 是红色，60° 是黄色，120° 是绿色，180° 是青色，240° 是蓝色，300° 是洋红色。调整品牌色的配色方案时，互补色相差 180°，类似色相差 30° 以内。
设计系统中应该用哪种颜色格式存储品牌色？ +
推荐 HEX 格式存储基础色值（简洁、无歧义），HSL 格式用于生成衍生色（如同色系的深色/浅色变体只需调整 L 值）。在 CSS 变量（Custom Properties）中存储 HSL 分量值（--brand-h: 220; --brand-s: 90%;）可以方便地动态生成配色。