色彩与色板工作台

专业级色彩转换与调色板生成工作台，支持 HEX / RGB / HSL / HSV / CMYK 空间互转、Tailwind 50-950 色阶生成、WCAG 2.1 可访问性对比度检测与和谐配色方案。

流转此颜色至下游工具
#3B82F6
rgb(59, 130, 246)
白底可读性 (WCAG)
3.68:1
AA FAILAAA FAIL
黑底可读性 (WCAG)
5.71:1
AA PASSAAA FAIL

色彩空间格式换算

HEX
#3B82F6
RGB
rgb(59, 130, 246)
RGBA
rgba(59, 130, 246, 1)
HSL
hsl(217, 91%, 60%)
HSLA
hsla(217, 91%, 60%, 1)
HSV / HSB
hsv(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)
CSS Variable
--color: #3B82F6;

RGB 色道调节滑块

R (Red)59
G (Green)130
B (Blue)246

HSL 色相与饱和度微调

H (Hue)217°
S (Saturation)91%
L (Lightness)60%

Tailwind 50 ~ 950 阶梯色板生成

50
#EDF3FD
100
#D5E4FB
200
#A9C8F9
300
#73A6F7
400
#3780F6
500
#0960EC
600
#054FC7
700
#04409F
800
#043076
900
#04204E
950
#02122C

经典色彩搭配 (Harmonies)

互补色 (Complementary)
邻近色 (Analogous)
三角色 (Triadic)
四角色 (Tetradic)
分裂互补色 (Split-Comp)

继续处理

完成当前任务后，您可以继续进行以下关联操作
图片调色板取色

基于 K-Means 聚类算法的图片主色调智能提取与像素放大镜取色器，支持主色系分布统计、CSS 变量、Tailwind 配置导出与调色板色卡下载。

SVG 优化压缩

专业级 SVG 矢量图代码深度压缩与精简工具，支持移除 XML 冗余/注释/编辑器元数据、浮点数精度截断、实时渲染对比、React JSX 组件转换与 Data URI 导出。

相关工具

图片编辑器

上传图片 ➔ 进行在线自由裁剪、旋转调整、滤镜调色与画笔标注

图片压缩

拖入多张图片 ➔ 调整自适应压缩质量 ➔ 减小文件 MB 体积并批量打包

二维码工作室

专业级二维码生成与纯本地识别扫描工作台，支持 URL / 文本 / Wi-Fi / 名片 / 电话模板、嵌入自定义 Logo、高容错调节、前背景色定制与 SVG/PNG 高清导出。

客户端本地计算 · 数据零上传

使用指南

  • 1. 在拾色器中选择或直接输入 HEX、RGB、HSL、CMYK 任意色彩代码。
  • 2. 实时查看全格式转换值、WCAG AA/AAA 对比度评级与自动生成的 50-950 阶梯色板。
  • 3. 一键复制 Tailwind 配置对象或 CSS Variables 变量代码直接应用于前端工程。

技术优势与安全边界

  • 1. 基于国际标准 WCAG 2.1 相对亮度算法精确计算 1:1 ~ 21:1 对比度。
  • 2. 智能色彩微调算法支持 Alpha 透明通道与全色道滑块联动。
  • 3. 本地浏览器极速计算，无需发起任何外部网络请求。

常见问题 FAQ

Q: 如何评估文本在背景上的可读性？
A: 根据 WCAG 2.1 规范，普通正文对比度达到 4.5:1 为 AA 级达标，达到 7.0:1 为 AAA 级极佳；大字号文本达到 3.0:1 为 AA 级达标。
Q: 可以将生成的色彩流转到图片工具吗？
A: 可以。通过右上角发送菜单，可将当前色彩 Hex 值一键发送至图片编辑器作为背景填充色。