颜色转换
#3B82F6
转换
随机颜色
恢复默认
支持 HEX、RGB/RGBA、HSL/HSLA、HSV/HSVA、HWB、CMYK,以及常见 CSS 颜色名称。
HEX
—
复制
HEX 8位
—
复制
RGB
—
复制
RGBA
—
复制
HSL
—
复制
HSLA
—
复制
HSV
—
复制
HWB
—
复制
CMYK
—
复制
颜色名称
—
复制
CIE 色彩空间
XYZ
—
复制
Lab
—
复制
LCH
—
复制
颜色属性
亮度
—
复制
相对亮度
—
复制
明度 YIQ
—
复制
Alpha
—
复制
反色
—
复制
灰度
—
复制
明暗调整
亮度调整
饱和度调整
—
—
颜色混合
应用
应用
50% 混合
25% A + 75% B
75% A + 25% B
—
WCAG 对比度
前景色
#3B82F6
背景色
#FFFFFF
当前颜色 vs 白色
当前颜色 vs 黑色
—
调色板
重新生成调色板
渐变
起始颜色
结束颜色
linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%)
颜色关系与配色
互补色、类似色、三角色、四色配色等。
现代 CSS 色彩空间
OKLab
—
复制
OKLCH
—
复制
CSS color()
—
复制
CSS color-mix()
—
复制
颜色距离 ΔE
比较颜色
ΔE76
—
复制
ΔE94
—
复制
ΔE2000
—
复制
ΔE 越小表示两种颜色在感知空间中越接近。
Alpha 合成
背景颜色
—
色温估算
相关色温
—
复制
色温类型
—
复制
根据 RGB 反推的相关色温为近似值,并不适用于任意彩色像素的严格物理测量。
颜色阶梯
从当前颜色向白色和黑色生成连续明暗阶梯,可直接点击任意色块使用。
CSS 颜色代码
复制 CSS
颜色盲模拟
红色弱 / 红盲
绿色弱 / 绿盲
蓝黄色盲
全色盲
用于检查网页配色在不同色觉条件下的视觉差异;模拟结果为屏幕端参考。
自定义对比度检测
文字 / 前景色
背景色
WWW.SVGPIC.COM 文字可读性测试
—
调色板导出
导出 CSS
导出 JSON
导出 SCSS
随机调色板
颜色历史
清空历史
最近使用的颜色保存在当前浏览器本地,不上传服务器。
图片取色
选择本地图片后,工具会在浏览器本地提取主要颜色。图片不会上传服务器。点击色块即可将其设为当前颜色。
图片精确取色
HEX
—
RGB
—
坐标
—
上传图片后,把鼠标移动到图片上即可实时取色;点击图片将颜色设为当前颜色。放大镜会显示鼠标附近的像素区域。图片只在浏览器本地处理。
图片主要颜色 Top 10
上传图片后自动分析。
颜色占比
色轮
点击色轮选择颜色。
网页色阶 50–950
复制 CSS 色阶
多色渐变
增加颜色
删除最后颜色
复制渐变 CSS
专业色彩分析
相对亮度
—
黑白阈值
—
色温估算
—
饱和度 / 明度
—
色域与现代 CSS
sRGB
—
Display-P3
—
Rec.2020
—
CSS color()
—
色域判断以数学转换后的近似结果为参考;普通浏览器屏幕未必能实际显示广色域颜色。
专业对比度等级
OKLCH 调整
L 明度
—
C 彩度
—
H 色相
—
使用此颜色
跟随当前颜色
OKLCH 适合做较直观的明度、彩度与色相调整。超出 sRGB 的颜色会自动限制到可显示范围。
检测说明
颜色计算均在浏览器本地完成,不上传颜色数据。
HEX
:支持 3 位、4 位、6 位和 8 位十六进制颜色。
Alpha
:透明度范围为 0~1;1 表示完全不透明,0 表示完全透明。
CMYK
:采用常见屏幕 RGB → CMYK 数学转换,印刷设备实际输出会因 ICC 色彩配置不同而变化。
Lab / LCH
:基于 sRGB、D65 白点进行常见 CIE 色彩空间转换。不同色彩管理软件可能因色彩配置而存在细微差异。
WCAG 对比度
:按照相对亮度计算,可用于网页文字与背景的可读性参考。
颜色名称
:使用常见 CSS 命名颜色匹配;没有对应标准名称时显示“无标准名称”。
OKLab / OKLCH
:适合现代网页颜色处理与感知上的亮度、色度调整。
ΔE
:提供 ΔE76、ΔE94、ΔE2000 三种常见颜色差异计算,其中 ΔE2000 更接近现代感知差异评估。
色温
:仅对接近黑体辐射轨迹的颜色有较好的参考意义,普通彩色像素的色温结果只能视为近似。
Alpha 合成
:按照前景色透明度与背景色进行屏幕端常见的 Alpha 混合计算。
颜色关系
:提供互补色、类似色、三角色、四色配色等参考,并可点击色块直接切换当前颜色。
颜色盲模拟
:用于网页配色可读性参考,不代表医学检测。
图片取色
:图片仅在浏览器本地处理,提取主要颜色,不上传服务器。
颜色历史
:保存在当前浏览器本地,最多保留最近 16 个颜色。