常用颜色参考表

分类:常用对照表
本工具列出了各种常用颜色的名称和颜色值,并提供了十六进制颜色值和对应的 RGB 表示法,是 UI / UE 设计师、产品经理、前端开发人员必备的参考工具之一。

W3C 基本颜色 W3C Basic Colors

说明:下面列出了 W3C 在「CSS 颜色(Level 3)」中定义的基本颜色值常量,一共 16 个。

W3C 扩展颜色 W3C Extended Colors

说明:1、下面列出了 W3C 在「CSS 颜色(Level 3)」中定义的扩展颜色值常量(也称为 X11 颜色名称),这些颜色被大多数主流浏览器支持,可用于 CSS 各种颜色属性。可以按 Ctrl + F 键快速查找指定颜色;2、下面列表的颜色,是以十六进制和 RGB 格式表示,如需查看颜色值的 HSLHSV 表示,可以使用本站提供的 颜色转换 工具,可一键把颜色值转换成多种格式。

颜色大全 Color List

说明:下面按由浅及深的顺序列出了常用的颜色值参考,数据较多,请按 Ctrl + F 键快速查找指定颜色。

工具介绍

通常,一个颜色值可以有多种表示方式,如:十六进制表示法、RGB 表示法、HSL 表示法、HSV 表示法等,每种颜色表示还可以支持透明度。下面给出了十六进制颜色和 RGB 颜色互转的 JS 实现:

/**
 * 十六进制转 RGB 方法,支持透明度
 * @param  {string} hex     颜色值的十六进制表示
 * @param  {float} opacity  颜色透明度
 * @return {string}         颜色的 RGB 表示
 */
function hexToRgba(hex, opacity = 1) {
    let red = parseInt("0x" + hex.slice(1, 3)),
        green = parseInt("0x" + hex.slice(3, 5)),
        blue = parseInt("0x" + hex.slice(5, 7))

    return `rgba(${red},${green},${blue},${opacity})`;
}

/**
 * RGB 转十六进制
 * @param  {string} r 红色值
 * @param  {string} g 绿色值
 * @param  {string} b 蓝色值
 * @return {string}   颜色的16进制表示
 */
function rgbToHex(r, g, b) {
    return ((r << 16) | (g << 8) | b).toString(16);
}

如果希望把 RGB 或十六进制颜色转换成 HSL 和 HSV 表示,请参考本站提供的 颜色转换工具