css零到一基础教程009：CSS HSL 颜色

最新推荐文章于 2022-10-04 09:02:05 发布
最新推荐文章于 2022-10-04 09:02:05 发布
阅读量1k 收藏 6
点赞数 1
分类专栏： java 后端 文章标签： java 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67392126/article/details/123598429
版权
java 同时被 2 个专栏收录
273 篇文章 5 订阅
订阅专栏
后端
12 篇文章 0 订阅
订阅专栏

HSL 值

在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：

hsla(hue, saturation, lightness)

色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。

饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。

亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。

请通过混合以下 HSL 值来进行实验：

实例

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

<p>在 HTML 中，您可以使用 HSL 值来设置颜色。</p>

</body>
</html>

饱和度

饱和度可以描述为颜色的强度。

100％ 是纯色，没有灰色阴影

50％ 是 50％ 灰色，但是您仍然可以看到颜色。

0％ 是完全灰色，您无法再看到颜色。

实例

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

<p>通过 HSL 颜色，设置更少的饱和度意味着更少的颜色，0% 为全灰。</p>

</body>
</html>

亮度

颜色的明暗度可以描述为要赋予颜色多少光，其中 0％ 表示不亮（黑色），50％ 表示 50％ 亮（既不暗也不亮），100％ 表示全明（白）。

实例

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>
<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p>通过 HSL 颜色，亮度 0% 显示黑色，亮度 100 显示白色。</p>

</body>
</html>

通常通过将色调和饱和度设置为 0 来定义灰色阴影，并将亮度从 0％ 到 100％ 进行调整可以得到更深/更浅的阴影：

实例

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1>
<h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1>
<h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1>
<h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1>
<h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1>
<h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1>

<p>利用 HSL 颜色，可通过将饱和度设置为 0％，并根据灰色的暗/亮程度调整亮度来制作灰阶。</p>

</body>
</html>

HSLA 值

HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。

HSLA 颜色值指定为：

hsla(hue,saturation,lightness,alpha)

_alpha_参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：

请通过混合以下 HSLA 值进行实验：

实例 ：

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

<p>您可使用 HSLA 颜色值生成透明色。</p>

</body>
</html>


<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

<p>您可使用 HSLA 颜色值生成透明色。</p>

</body>
</html>

m0_67392126
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中常用的颜色格式
南城
06-28 678
对于不同的颜色格式，它们之间存在一些重要的区别。本文将带您深入了解这些选项，包括它们的工作原理、如何解析它们以及如何灵活应用
网站开发进阶（六十七）浅谈css中hsl()和hsla()设置颜色值的方法与应用_css hsl域亮度值设置
2401_84412357的博客
05-10 436
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】HSL是CSS3引进的一种将RGB色彩模型中的点在坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构RGB更加直观。hsl()函数使用色相饱和度亮度来定义颜色。HSL 即色相饱和度亮度。
颜色HSL（色调，饱和度，亮度）
yacper的专栏
10-29 6375
面的每一个表代表一种色调。每个色调以30度间隔从色环取得。表中的X轴代表饱和度(100%, 75%, 50%, 25%, 0%)。Y轴代表亮度。50% 属于 正常。 0度   红   100%75%50%25%0%100#FFFFFF#FFFFFF#FFFFFF#FFFFFF#FFFFF
CSS 的 hsl() 和 hsla() 函数（设置颜色的方式之一）
单枪匹码
11-07 4370
一：CSS中的 hsl()函数： 1、定义与用法：hsl() 函数使用色相、饱和度、亮度来定义颜色。 HSL 即：色相（Hue）、饱和度（Saturation）、亮度（Lightness）。 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0 ~ 100%的数值。 亮度（L），取0 ~ 100%，增加亮度，颜色会向白...
CSS高级篇——HSL颜色
老梁的专栏
10-04 1001
我们已经学习过——名称、RGB 以及 16 进制值。CSS3 又带来了另一种颜色定义方式——，三个字母分别表示色相（Hue）、饱和度（Saturation）和亮度（Lightness）。HSL 和 RGBa (“a” 表示 “alpha” 值) 适用于任何表示颜色的属性，例如color,,和box-shadow。
CSS——HSL色彩模式
Zjaun的博客
02-13 635
相关代码 在头部编写style &amp;lt;style type=&quot;text/css&quot;&amp;gt; table{ border:solidlpxred; background:#eee; padding:6px; } th{ color:red; font-size:12px; font-weight:normal; } td{ ...
CSS教程：网页颜色的几种表示
09-27
在网页设计中，CSS（Cascading Style Sheets）是一种强大的工具，用于定义和控制网页的样式，包括颜色。本文将详细讲解CSS中网页颜色的三种主要表示方式：颜色名称、RGB值和十六进制代码。 首先，颜色名称是最简单...
CSS3中各种颜色属性的使用教程
09-24
在CSS3中，颜色属性的使用变得更加丰富多样，特别是引入了RGBA、HSL和HSLA等新特性，使得网页设计的颜色控制更加精确且具有表现力。以下将详细讲解这些颜色属性及其用法。 首先，RGBA（Red, Green, Blue, Alpha）是...
黑马程序员前端小白零基础入门HTML5+CSS3
最新发布
06-19
本教程"黑马程序员前端小白零基础入门HTML5+CSS3"专为初学者设计，旨在帮助那些对前端开发感兴趣的朋友们从零开始学习这两门技术。 HTML5是超文本标记语言的最新版本，它的出现极大地增强了网页的交互性和表现力。...
html5与css3基础教程（第八版）源码
01-20
这份"HTML5与CSS3基础教程（第八版）源码"提供了丰富的实例和代码，帮助初学者深入理解这两种技术。 HTML5是超文本标记语言的最新版本，其核心在于增强网页的语义性和可访问性。以下是一些HTML5的关键知识点： 1. ...
CSS_01_Css学习教程_
09-29
在CSS（层叠样式表）学习教程中，我们将深入探讨这一关键的前端技术，它用于控制网页的布局和视觉表现。CSS与HTML紧密配合，使开发者能够实现丰富的样式设计和用户体验。以下是一些核心的CSS知识点，这些内容通常会...
css中的HSLA
weixin_42460304的博客
04-09 316
今天canvas做随机粒子的时候看到了一个陌生的东西、 HSLA CSS 中的颜色可以由RGB色彩空间和HSL色彩空间两种方式来表述。其中我们常用的是RGB色彩空间，RGB色彩空间的颜色表示方式有：十六进制颜色（如红色：#FF0000）、RGB颜色（如红色：rgb(255,0,0)）,RGBA颜色（如半透明的红色rgba(255,0,0,0.5)），此外常见的颜色可以直接写颜色名（如红色：red）...
CSS hsla函数
ScottePerk的博客
09-22 433
hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。HSLA 即色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。色相（H)是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。饱和度（S )是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。亮度（L）取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。透明度（A）取值 0~1 之间， 代表透明度。
css中hsl()函数【2021.11.30】
masierty的博客
12-01 482
hsl()函数在CSS中使用时主要用更改色相、饱和度、明度。
css 中hsl(),CSS hsl() Function
weixin_36056010的博客
08-04 271
CSS hsl() FunctionThe CSS hsl() function can be used to provide a color value when using CSS. It allows you to specify a color value by specifying the hue, saturation, and light components of the colo...
在 CSS 中使用 HSL 颜色
liuhao9999的博客
07-25 851
最近，我开始看到更多HSL颜色的使用，但是，我仍然认为HSL的全部潜力被忽视了。请记住，值越高，越轻。使用HSL，我们可以为第二种颜色使用相同的颜色但具有不同的亮度值。，我们可以获得与基础颜色相似的饱和度和亮度的颜色。我们可以将其替换为自定义白色，该白色源自我们拥有的颜色的非常浅的阴影。首先，我们像往常一样从颜色选择器中选择颜色，并确保获得它的HSL值。这种白色很无聊，我们可以用我们拥有的颜色的非常浅的阴影来代替它。当特定组件中的颜色需要在悬停时显得更暗时，HSL颜色可能是完美的选择。...
CSS中hsla的用法
暗影刀客的博客
12-24 3096
记下来，周末再写
CSS 中的 HSL 和 HSLA 与 RGB 和 RGBA
分享身边生活经验blog
09-29 917
如果您了解 CSS 的工作原理，您可能还知道命名颜色、十六进制颜色和 RGB 颜色。它们三个都代表颜色及其在 CSS 中的用法。命名颜色是预定义的颜色值，例如 black, white, red, green等。命名颜色的问题在于它们是有限的，没有办法对其进行调整以获得各种颜色。十六进制模型没有该义务，允许您使用十六进制代码选择颜色。但是，该模型本身缺乏颜色处理的灵活性。这就是 RGB 和 HSL 介入的地方。
CSS入门教程：理解基础与实战技巧
"这是一份适合CSS初学者的教程，涵盖了CSS的基础概念、样式引用方式、规则和选择符、具体性和层叠性、度量...这份CSS基础教程全面介绍了CSS的核心概念和实践技巧，对于想要学习和掌握CSS的初学者来说是一份宝贵的资源。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值