颜色单位：

在CSS中可以直接使用颜色名来设置各种颜色

比如：red ,orange.yellow......

但是在CSS中直接使用颜色名是非常不方便的，一是因为颜色名字太多，我们不一定可以一一准确的记住，第二是因为有些颜色我们没有办法去准确的进行描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.abc{width: 100px;height: 200px;background-color: red;}</style>
</head>
<body><div class="abc"></div>
</body>
</html>

RGB 值

RGB通过三种颜色的不同浓度来调配出不同的颜色

R red G green B blue

每一种颜色的范围在0~255（0%~100%）之间

语法：RGB（红色，绿色，蓝色）

另一方面，使用RGB这种数字颜色对于计算机来说是非常好的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.abc{width: 100px;height: 200px;background-color: rgb(100, 200, 200);}</style>
</head>
<body><div class="abc"></div>
</body>
</html>

RGBA

就是在rgb的基础上增加了一个a表示不透明度

需要四个值，前三个和rgb一样，第四个表示不透明度

1表示不透明，0表示完全透明，.5表示半透明（也就是说透明度值在0到1之间）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.abc{width: 100px;height: 200px;background-color: rgba(200, 100, 200, 0.2)}</style>
</head>
<body><div class="abc"></div>
</body>
</html>

十六进制的RGB

语法：#红色绿色蓝色

颜色浓度通过00~ff

如果颜色两位重复可以进行简写（如：#aabbcc-->abc,但是需要注意的是必须是两位重复的才可以进行简写）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.abc{width: 100px;height: 200px;background-color: #ff0000;</style>
</head>
<body><div class="abc"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.abc{width: 100px;height: 200px;background-color: #ff0</style>
</head>
<body><div class="abc"></div>
</body>
</html>

HLS值，HLSA值

H:色相（0~360）

S:饱和度，颜色的浓度（0%~100%）

L:亮度，颜色的亮度（0%~100%）

HLSA就是在HLS上增加了个透明度A

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.abc{width: 100px;height: 200px;background-color: hsl(10, 20%, 30%)</style>
</head>
<body><div class="abc"></div>
</body>
</html>

什么是RGB值，RGBA以及十六进制的RGB相关推荐

pyplot学习笔记（一）：使用scatter画彩色图像三维散点图，点坐标为RGB值，点颜色为RGB值决定的颜色（彩色图像色彩分布图）
前言前段时间朋友叫我帮他画一个彩色图像色彩分布图.也就是以彩色图像的RGB值为坐标值,然后用该RGB值对应的颜色来标点,以此形成一幅色彩分布图.pyplot是一个很丰富的可视化工具,笔者趁机学习 ...
CSS 中的 HSL 和 HSLA 与 RGB 和 RGBA
CSS 中的 HSL 颜色已经存在了十多年,但我发现它们仍然经常未被充分利用. 尽管它非常实用,但由于浏览器支持有限,许多开发人员避免使用 HSL CSS 功能. 随着浏览器对 HSL 颜色模型的支持 ...
CSS（长度单位，RGB值，盒子模型）
目录一.长度单位二.RGB值 -RGBA:在RGB的基础上增加一个a元素表示不透明(1表示不透明 0表示全透明 .5表示半透明) -十六进制的RGB值三.HSL 四.盒子模型 - 组成 ...
使用RGB值显示颜色
Use RGB values to Color Elements 在 CSS 中表示颜色的另一个方法是使用 rgb 值. 代表黑色的 RGB 值看起来是下面的样子: rgb(0, 0, 0) 代表白色 ...
Java获取图片RGB值
前言图片对比获取坐标的方法很多,我选择了比较简单的方法:对比rgb值.要想对比rgb值,就得先获取图片的rgb值.运用的是BufferedImage里的getRGNB方法. 解决方案首先用.get ...
Android常用颜色RGB值以及中英文名称
Android常用颜色RGB值以及中英文名称颜色 RGB值英文名中文名 #FFB6C1 LightPink 浅粉红 #FFC0CB Pink 粉红 #DC143C Crimson 深 ...
Android 常用RGB值及名称
Android 常用RGB值及名称颜色 RGB值英文名中文名 #FFB6C1 LightPink 浅粉红 #FFC0CB Pink 粉红 #DC143C Crimson 深红/猩红 #F ...
JS - 将十六进制的颜色值转成rgb、rgba格式
JS - 将十六进制的颜色值转成rgb.rgba格式 /**hex -> rgb* @param {Object} hex*/ export function hexToRgb(hex) {re ...
最让人舒服的11种颜色RGB值和十六进制值
最让人舒服的11种颜色RGB值和十六进制值序号名称 RGB 十六进制 1 豆沙绿 (199, 237, 204) #C7EDCC 2 银河白 (255, 255, 255) #FFFFFF 3 杏 ...

什么是RGB值，RGBA以及十六进制的RGB