颜色转换
#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—
反色—
灰度—
明暗调整
—
—
颜色混合
—
WCAG 对比度
前景色
#3B82F6
背景色
#FFFFFF
—
调色板
渐变
linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%)
颜色关系与配色
互补色、类似色、三角色、四色配色等。
现代 CSS 色彩空间
OKLab—
OKLCH—
CSS color()—
CSS color-mix()—
颜色距离 ΔE
ΔE76—
ΔE94—
ΔE2000—
ΔE 越小表示两种颜色在感知空间中越接近。
Alpha 合成
—
色温估算
相关色温—
色温类型—
根据 RGB 反推的相关色温为近似值,并不适用于任意彩色像素的严格物理测量。
颜色阶梯
从当前颜色向白色和黑色生成连续明暗阶梯,可直接点击任意色块使用。
CSS 颜色代码
颜色盲模拟
红色弱 / 红盲
绿色弱 / 绿盲
蓝黄色盲
全色盲
用于检查网页配色在不同色觉条件下的视觉差异;模拟结果为屏幕端参考。
自定义对比度检测
WWW.SVGPIC.COM 文字可读性测试
—
调色板导出
颜色历史
最近使用的颜色保存在当前浏览器本地,不上传服务器。
图片取色
选择本地图片后,工具会在浏览器本地提取主要颜色。图片不会上传服务器。点击色块即可将其设为当前颜色。
图片精确取色
HEX
—
RGB
—
坐标
—
上传图片后,把鼠标移动到图片上即可实时取色;点击图片将颜色设为当前颜色。放大镜会显示鼠标附近的像素区域。图片只在浏览器本地处理。
图片主要颜色 Top 10
上传图片后自动分析。
颜色占比
色轮
点击色轮选择颜色。
网页色阶 50–950
多色渐变
专业色彩分析
相对亮度
—
黑白阈值
—
色温估算
—
饱和度 / 明度
—
色域与现代 CSS
sRGB
—
Display-P3
—
Rec.2020
—
CSS color()
—
色域判断以数学转换后的近似结果为参考;普通浏览器屏幕未必能实际显示广色域颜色。
专业对比度等级
OKLCH 调整
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 个颜色。