CSS颜色

最新推荐文章于 2024-08-12 16:19:20 发布

XiaoSaurus77

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量33

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_50149096/article/details/133849495

版权

本文介绍了颜色在网页设计中常见的四种表示方法：RGB/RGBA通过红绿蓝三原色和透明度定义颜色，HEX与HEXA使用16进制编码表示，而HSL和HSLA则通过色相、饱和度和亮度描述。作者通过示例代码展示了这些颜色模式的使用和特性。

摘要由CSDN通过智能技术生成

颜色名
- 编写方式：直接使用颜色对应的英文单词，编写比较简单，例如：
  - 红色：red
  - 绿色：green
  - 蓝色：blue
  - 紫色：purple
  - 橙色：orange
  - 灰色：gray
  - …
  - 颜色名这种方式，表达的颜色比较单一，所有用的并不多
  - 具体颜色名参考MDN官方文档

RGB与RGBA

编写方式：使用红、绿、蓝三种光的三原色进行组合
- r表示红色
- g表示绿色
- b表示蓝色
- a表示透明度

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色_第二种表示_RGB与RGBA</title>
    <style>
        .title1 {
            color: rgb(255, 0, 0);
        }
        .title2 {
            color: rgb(0, 255, 0);
        }
        .title3 {
            color: rgb(0, 0, 255);
        }
        .title4 {
            color: rgb(255, 255, 255);
            background-color: black;
        }
        .title5 {
            color: rgb(0, 0, 0);
        }
        .title6 {
            color: rgba(0, 0, 255, 0.5);
        }
        .title7 {
            color: rgba(188, 188, 188, 0.4);
        }
    </style>
</head>
<body>
    <h2 class="title1">红色</h2>
    <h2 class="title2">绿色</h2>
    <h2 class="title3">蓝色</h2>
    <h2 class="title4">白色</h2>
    <h2 class="title5">黑色</h2>
    <h2 class="title6">半透明蓝色</h2>
    <h2 class="title7">半透明灰色</h2>
    <h2 class="title8"></h2>
    <h2 class="title9"></h2>
    <h2 class="title10"></h2>
</body>
</html>

小规律：

若三种颜色值相同，呈现的是灰色，值越大，灰色越浅
rgb(0,0,0)是黑色，rgb(255,255,255)是白色
对于rgba来说，前三位的rgb形式要保持一致，要么都是 0~255 的数字，要么都是百分比

HEX与HEXA

HEX的原理同RGB一样，依然是通过：红、绿、蓝色进行组合，只不过要用6位（分成3组）来表达
格式为： #RRGGBB

每一位数字的取值范围是：0 ~ F

所以每一种光的最小值是：00

最大值是：FF

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色_第三种表示_HEX与HEXA</title>
    <style>
        .title1 {
            color: #FF0000;
        }
        .title2 {
            color: #00FF00;
        }
        .title3 {
            color: #0000FF;
        }
        .title4 {
            color: #87CEEB88;
        }
        .title5 {
            color: #FCD8;
        }

    </style>
</head>
<body>
    <h2 class="title1">红色</h2>
    <h2 class="title2">绿色</h2>
    <h2 class="title3">蓝色</h2>
    <h2 class="title4">半透明浅蓝色</h2>
    <h2 class="title5">半透明粉色</h2>
</body>
</html>

注意点：IE浏览器不支持HEXA，但支持HEX

HSL与HSLA

HSL是通过：色相、饱和度、亮度，来表示一个颜色的，格式为：hsl(色相,饱和度,亮度)
- 色相：取值范围： 0 ~ 360 度，具体度数对应的颜色如下图：
- 饱和度：取值范围： 0% ~ 100% ，（向色相中对应颜色添加灰色，0%全灰，100%没有灰）
- 亮度：取值范围是： 0% ~ 100% ，（0%亮度没有了，所以是黑色。100%亮度太强，所以是白色）
HSLA其实就是在HSL的基础上，添加了透明度

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色_第四种表示_HSL与HSLA</title>
    <style>
        .title1 {
            color: hsl(0deg, 100%, 50%);
        }
        .title2 {
            color: hsl(60deg, 100%, 50%);
        }
        .title3 {
            color: hsl(120deg, 100%, 50%);
        }
        .title4 {
            color: hsl(180deg, 100%, 50%);
        }
        .title5 {
            color: hsl(240deg, 100%, 50%);
        }
        .title6 {
            color: hsl(300deg, 100%, 50%);
        }
        .title7 {
            color: hsl(360deg, 100%, 50%, 50%);
        }
        .title8 {
            color: hsl(0deg, 0%, 50%);
        }
        .title9 {
            color: hsl(0deg, 100%, 0%);
        }
        .title10 {
            color: hsl(0deg, 100%, 100%);
            background-color: hsl(0deg, 100%, 0%);
        }
    </style>
</head>
<body>
    <h2 class="title1">红色</h2>
    <h2 class="title2">黄色</h2>
    <h2 class="title3">绿色</h2>
    <h2 class="title4">青色</h2>
    <h2 class="title5">蓝色</h2>
    <h2 class="title6">粉色</h2>
    <h2 class="title7">半透明红色</h2>
    <h2 class="title8">灰色</h2>
    <h2 class="title9">黑色</h2>
    <h2 class="title10">白色</h2>
</body>
</html>