颜色转换

分类:换算工具
本工具可以将十六进制的颜色值(如:#FF0000)转换成以RGB、HSL 和 HSV格式表示的颜色,以及把这些格式的颜色转换成十六进制格式。同时,还支持把颜色值解析成 W3C 定义的颜色名称。
无效的颜色值
说明:可以输入任意合法的颜色值,如:十六进制颜色、RGB颜色、HSV颜色以及颜色名称
颜色值
---
亮 度
---
透明度
---
工具介绍

颜色转换工具,可以将十六进制颜色,转换成以 RGBHSL 以及 HSV 等不同格式的颜色表示(当然,也可把这些格式转换成十六进制颜色);本工具提供了多种格式的转换结果以及相应的预览效果,是网页设计师、平面设计师、视觉设计者、前端工程师的必备工具。

使用说明

本工具的使用方法非常简单,在颜色文本框中输入一个合法的颜色值,点击「转换颜色」按钮,系统即可自动把输入的颜色转换成各种不同的颜色格式。

其中,合法的颜色值,包括:

  • 十六进制颜色,如:#682ea4(可以不带 # 号)
  • RGB表示的颜色值,如:rgb(120, 17, 253)rgb(47%, 7%, 99%)
  • HSL表示的颜色值,如:hsl(160, 15%, 53%)
  • HSV表示的颜色值,如:hsv(17, 61%, 75%)
  • W3C定义的颜色名称,如:darkviolet

本工具提供了多种便利的方式,让您可以快速选择希望的颜色。

1、直接输入颜色值

您可以直接在文本框中输入颜色值进行转换(参考上面关于「合法的颜色值」的说明)

2、通过颜色选择器选择颜色

我们提供了颜色选择器,让您可以更直观的选择要转换的颜色,如下图所示:

颜色选择器
颜色选择器

3、选择预定义的颜色值

除了颜色选择器,本工具还提供了选择预定义的颜色功能。点击「选择一个颜色」链接后,将弹出预定义颜色对话框(预定义颜色是 W3C 组织定义的一组颜色集合),您可以从这里面选择一个颜色。

转换结果说明

当颜色转换成功后,转换结果将展示所有支持格式对应的颜色值。包括以下几项:

1、颜色名称

如果输入的颜色值能够对应 W3C 预定义颜色中某一个颜色值,那么,这里将显示实际的颜色名称,如:lightcoral

2、十六进制

这里将显示颜色值对应的十六进制表示(由 6 位十六进制字符组成),如:#e23d66

3、十六进制 (Hex8)

同上,这里将显示颜色值对应的十六进制表示;除了 6 位表示颜色的字符外,还包括用于表示颜色「透明度」的 2 位字符,如:#83ff50ec,该值的后 2 位 ec 表示透明度

4、RGB颜色值

这里将显示以 RGB 格式表示的颜色值,RGB 这 3 个字母分别表示:红色(Red)、绿色(Green) 和蓝色(Blue),如:rgb(240, 128, 40)

5、RGB(百分比)

这里也是以 RGB 格式来表示颜色值,只是以百分比的形式出现,如:rgb(94%, 50%, 50%)

6、HSL颜色值

这里将显示以 HSL 格式表示的颜色值,HSL表示色相(Hue)、饱和度(Saturation) 和亮度(Lightness),如:hsl(51, 100%, 50%)

7、HSV颜色值

这里将显示以 HSV 格式表示的颜色值,HSV表示色相(Hue)、饱和度(Saturation) 和明度(Value),如:hsv(224, 60%, 58%)

另外,本工具还提供了颜色预览功能,可以直观的看到所选颜色的最终效果。