CSS：颜色的三种表示方式

原创 于 2025-05-16 18:51:16 发布 · 600 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

文章目录

一、rgb和rgba方式

10进制表示方法
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

二、HEX和HEXA方式（推荐）

就是16进制表示法
在这里插入图片描述
在这里插入图片描述

三、hsl和hsla方式

在这里插入图片描述
语法：hsl(hue, saturation%, lightness%)
‌红色‌：hsl(0, 100%, 50%)
‌绿色‌：hsl(120, 100%, 50%)
‌蓝色‌：hsl(240, 100%, 50%)
‌灰色‌：hsl(0, 0%, 50%)

四、颜色名方式

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
在这里插入图片描述

css零到一基础教程008：CSS HEX 颜色
kerryqpw的博客
03-18 439
HEX 值 在 CSS 中，可以使用以下格式的十六进制值指定颜色： #rrggbb 其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。 例如，#ff0000 显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。 请通过混合以下十六进制值来进行实验： 实例： <!DOCTYPE html> <html> <body> <h1 style="backgroun..
css零到一基础教程007：CSS RGB 颜色
kerryqpw的博客
03-18 1004
RGB 值 在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值： rgb(red, green, blue) 每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。 例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。 要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。 要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。 实例： &
CSS-颜色
qq_53002037的博客
05-23 385
CSS
CSS基础教程：颜色（二）
最新发布
m0_65012566的博客
05-06 1368
此颜色值使用rgb()属性指定。它需要三个值，红色、绿色和蓝色各一个。值可以是0到255之间的整数或百分比。注意：所有浏览器都不支持颜色的rgb()属性，因此建议不要使用它。以下是使用RGB值显示几种颜色的示例。如下示例：#rgbvaluergb;padding;
css 中的几种颜色格式
qq_42880714的博客
07-07 1126
从个人来说,我更倾向于使用HSL，虽然十六进制非常简洁、易于在设计软件时在不同模块代码之间复制/粘贴并且通用。但是它其实非常难解读，比如#FF0000是什么颜色？而hsl可以非常容易理解，并且与我们思考色彩的方式密切相关，比如想要颜色更暗一点，就可以减少亮度百分比。
CSS中的颜色值与颜色属性
jimojianghu的专栏
02-03 2274
本文介绍CSS中颜色的5种取值类型，以及CSS中的各种颜色属性，并会顺带介绍颜色模型相关的知识。这块内容对于我们写出更好的CSS代码也能带来重要的帮助，是前端开发中需要熟悉的知识。
CSS教程：网页颜色的几种表示
09-27
本文将详细讲解CSS中网页颜色的三种主要表示方式：颜色名称、RGB值和十六进制代码。 首先，颜色名称是最简单直观的方式。CSS预定义了17种基本颜色，分别是：aqua、black、blue、fuchsia、gray、green、lime、maroon...
css3新增颜色表示方式分享
09-25
CSS3在原有的颜色表示方式基础上引入了新的表达方法，极大地扩展了颜色的可表示范围，并且引入了透明度控制，使得网页设计更加丰富多彩。以下是关于CSS1&2以及CSS3颜色表示方式的详细说明。 一、CSS1&2颜色表示方式...
painter.css:著名画家的 CSS 颜色库
06-17
"Painter.css"是一个独特的CSS颜色库，它将著名的画家风格融入到了网页设计中，为设计师们提供了一种创新的方式来表达他们的艺术理念。这个库不仅是一个工具，更是一种将艺术与技术结合的尝试，让网页设计充满了无限...
css-click:css 伪类
07-12
在纯CSS中，我们通常使用`:active`伪类来表示元素被按下时的状态。`:active`适用于按钮、链接或其他可点击元素，当用户按下鼠标键但还未释放时，这个元素就会呈现`:active`状态。 以下是一些关于CSS伪类和`:active`...
【前段基础入门之】=＞CSS 中对颜色数值的四种表达方式！
学而不思则罔,思而不学则殆
09-30 692
总结归纳了 css 中有关于颜色取色值的多种取值方式范围
【CSS颜色】
qq_50563459的博客
03-13 1650
学习笔记
CSS背景颜色设置透明度的两种方法（8位hex和rgba）
热门推荐
sriting的博客
06-05 2万+
目录一、 6位HEX转RGBA二、8位HEX 在写微信小程序的时候，有个需求是按背景颜色background-color要设透明度0.85，让背景图片background-image透一点出来，而且background-color的值是后端传过来的动态数据，背景颜色动态改变，UI同学给的数据全是6位HEX，需要我自己设置透明度。 设置透明度首先会想到用opacity，但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度，我需要子元素不透明，opacity就不能用了。 接下来讲两个实际可用性比
CSS3 经典教程系列——CSS3 RGBA 用法详解
weixin_33948416的博客
01-29 289
　　CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。今天这篇文章我们一起来探讨一下 CSS3 中的 RGBA 属性。RGB 对于大家来说一点不陌生，他就是 Red（红色） Green（绿色）和 Blue（蓝色），那么现在我们所说的 RGBA 又是什么呢？ 您可能感兴趣的相关文章 Web 开发人员和设计师必读文章推...
css颜色的五种表示方法
weixin_30415113的博客
10-28 766
一、最简单、最古老的颜色类型在CSS颜色的关键词，如red blue等。 二、十六进制值，如#0000。 三、RGB: rgb(255,0,0),这是给定的三个参数表示的红色，绿色和蓝色通道的颜色值每个通道不是由两个十六进制数字表示的，而是由0到255之间的十进制数表示的。 四、HSL:该hsl( )函数接受色相、饱和度以及明度值 色调：颜色的底色调。这个值在0到360之间，表示色轮周...
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
薇眠winter的博客
08-03 1383
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
CSS基础常用属性之颜色（如果想知道CSS的颜色知识点，那么只看这一篇就足够了！）
秋刀鱼不做梦的编程日常
04-18 3708
CSS基础常用属性之颜色（如果想知道CSS的颜色知识点，那么只看这一篇就足够了！）
HTML+CSS基础——CSS颜色控制（RGB值、十六进制编码、颜色名称）
weixin_66547608的博客
12-29 1058
这段代码是一个简单的 HTML 文件，它定义了一个具有不同颜色背景的 pH 度量表。pH 值是用于表示溶液酸碱性的指标，范围从 0 到 14。在这个代码中，p 标签的类名对应于不同 pH 值的背景颜色。例如，p 类名为 “zero” 的段落具有非常酸性的背景颜色（红色），而 p 类名为 “seven” 的段落具有中性的背景颜色（绿色）。
常见颜色表示方式
ai520587的博客
11-03 1万+
颜色组成这些原理不用讲了，度娘就行，之讲讲常见的表示方式 一、单词表示法： 英文单词表示法，这个还需要讲吗？如：red,yellow,blue 二、16进制表示法 16进制表示的方法分为两种： 1. 以”0x“开头表示，这种表示方法才是标准的16进制的表示方法。例如“0x00ffffff”或"0xffffff" 2.以“#”开头表示，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值