取色器与颜色转换

选取颜色,并在 HEX、RGB、HSL、HSV 和 CMYK 之间转换。还能检查与白色和黑色文字的对比度,并获取更浅和更深的色调。

文字对比度(WCAG)

浅色调与暗色调

点击色块即可使用该颜色。

如何转换颜色

  1. 以任意 CSS 格式输入或粘贴颜色,例如 #2563eb、2563eb、rgb(37, 99, 235)、hsl(221 83% 53%),或 tomato 这样的颜色名称;也可以用取色器选取颜色。
  2. 颜色会以 HEX、RGB、HSL、HSV 和 CMYK 格式显示。在你需要的格式旁点击复制。
  3. 查看对比度方框,了解白色或黑色文字放在这个颜色上是否清晰易读;点击某个浅色调或暗色调,可以查看更浅和更深的版本。

颜色格式说明

  • HEX:网页设计中最常用的格式,红、绿、蓝各用两位十六进制数字表示,范围从 00 到 FF。
  • RGB:同样的红、绿、蓝值,用 0 到 255 的数字表示。
  • HSL:色相(色轮上的 0–360°)、饱和度和亮度。便于手动调整:改变亮度即可得到更浅或更深的版本。
  • HSV / HSB:色相、饱和度和明度(亮度),Photoshop、Figma 等设计软件的取色器都使用这种格式。
  • CMYK:青、品红、黄、黑四色油墨,用于印刷。这里的数值只是简单换算;专业印刷会使用色彩配置文件,因此请向印刷厂索取准确的数值。

对比度结果是什么意思?

《Web 内容无障碍指南》(WCAG)要求普通文字的对比度至少为 4.5:1(AA 级),大号文字至少为 3:1。AAA 级则要求 7:1。良好的对比度能让按钮和文字对每个人都清晰易读,包括视力较弱的人,以及在强烈阳光下使用手机的人。