颜色代码查询

HEX / RGB / HSL 一键互转,附常用色值对照表
返回云摆渡工具网
HEX#EC4899
RGBrgb(236, 72, 153)
HSLhsl(330, 82%, 60%)
🎨 常用颜色代码对照表(点击查看色值)

网页颜色代码知识

计算机屏幕上的每一种颜色都由红(Red)、绿(Green)、蓝(Blue)三原色光混合而成,这就是RGB颜色模型。在网页中,颜色最常用的表示方法是十六进制HEX码,如#FF0000表示纯红色——每两位十六进制数(00-FF,即0-255)分别代表红、绿、蓝的强度。24位色(三种颜色各8位)可以组合出约1677万种颜色,已超过人眼的分辨能力,被称为真彩色。

CSS中还支持HSL颜色模型,即色相(Hue,0-360度的色环角度)、饱和度(Saturation,0-100%)与亮度(Lightness,0-100%)。HSL对人类更直观——想调一个"更亮的蓝色",只需增加L值;想换相近色系,只需微调H值。在做配色方案(如同色系深浅搭配)时HSL比RGB高效得多。

配色实用技巧

颜色格式在CSS中的写法

常见问题解答(FAQ)

Q: HEX和RGB颜色有什么区别?
没有本质区别,都是RGB模型的表示方式。#EC4899与rgb(236,72,153)是同一个颜色的两种写法,HEX更紧凑常用,RGB便于程序计算和添加透明度(RGBA)。
Q: 为什么我选的颜色在不同屏幕上看起来不一样?
不同显示器的色域、亮度、色温设置不同。设计重要作品时建议校准显示器(sRGB模式),并在多台设备上验证。印刷品还需考虑CMYK色域比屏幕RGB小的问题。
Q: 8位HEX颜色码是什么?
前6位是RGB色值,后2位是Alpha透明度,如#EC489980表示80透明度(约50%)。现代浏览器均已支持,适合做半透明遮罩。
Q: 如何让颜色变深或变浅?
使用HSL最直观:降低亮度L值变深,升高L值变浅;降低饱和度S则更灰。也可以在HEX上按比例向黑色或白色插值。
Q: 什么是无障碍对比度?
WCAG无障碍标准要求正文文字与背景的对比度至少4.5:1,大号文字至少3:1,以保障视障用户可读。设计时可使用对比度检查工具验证。

💡 使用提示