🎨
免费颜色选择器和调色板生成器
选取颜色，在HEX/RGB/HSL之间转换，生成和谐调色板。
加载后可离线使用
HEX
HSV
h217°
s76%
v96%
仅显示RGB
r
g
b
HSL
H
S
L
更多格式
HEX8#3b82f6ff
RGBrgb(59 130 246)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)
OKLCHoklch(62.3% 0.188 259.8)
SwiftUIColor(red: 0.231, green: 0.510, blue: 0.965, alpha: 1)
Android0xFF3B82F6
FlutterColor(0xFF3B82F6)
WCAG 对比度
最接近的命名颜色：dodgerblue · 此处黑色文字更易读（5.71:1）
白色背景上的文本3.68:1AA 大字号
黑色背景上的文本5.71:1AA
#ffffff 上的文字3.68:1AA 大字号
色阶与淡色（50–950）
调色板
补色
#3b82f6
#f6af3c
三等分色
#3b82f6
#f63c83
#83f63c
邻近色
#3ce0f6
#3b82f6
#523cf6
单色
#073c92
#0a5adb
#3b82f6
#85b2f9
#cee0fd
常见用途
- 网页设计色彩选择器为您的网站选择和生成颜色 — 获取 HEX、RGB 和 HSL 值以及和谐的调色板。
- 品牌色彩选择器构建您的品牌调色板 — 选择相互协调的主色、次色和重点色。
- 社交媒体色彩选择器为社交媒体文章、故事和个人资料设计创建引人注目的调色板。
- 印刷设计色彩选择器为印刷材料选择颜色 — 传单、名片、小册子 — 具有准确的颜色预览。
- 演示文稿色彩选择器设计幻灯片配色方案 — 选择可读的文本颜色、图表调色板和一致的重点阴影。
工作原理
一切都直接在你的浏览器中使用手写的转换数学运行——没有颜色库，没有服务器往返。你通过浏览器原生的颜色输入或 EyeDropper API 选择颜色，工具会立即将其转换为六种格式，同时计算 WCAG 对比度并生成和谐调色板。
- 1通过原生 API 输入颜色你可以通过浏览器内置的 <input type="color"> 控件选择颜色，或在基于 Chromium 的浏览器中使用 EyeDropper API 吸取屏幕上的任意像素。两种方式都返回一个十六进制字符串，作为唯一的数据来源。
- 2手写格式转换工具使用自己的数学函数（无外部库）将十六进制值转换为 RGB、HSL、HSV、CMYK 和 OKLCH。OKLCH 转换先线性化 sRGB 通道，应用 OKLab 立方根矩阵，再推导色度和色相角——与现代 CSS Color Level 4 的输出一致。
- 3WCAG 对比度计算相对亮度使用 WCAG 2.x 公式从线性化的 RGB 通道计算。然后工具计算与纯白和纯黑的对比度，并按 WCAG 阈值（3:1、4.5:1、7:1）标注为 AA 大号、AA、AAA 或不通过。
- 4生成和谐调色板并本地保存互补、三等分、邻近色和单色色块通过数学方式旋转或步进 HSL 色相和亮度值得出。保存的调色板写入你浏览器的 localStorage——不会离开你的设备。