CSS——HSL色彩模式

最新推荐文章于 2025-09-13 11:11:24 发布
原创 最新推荐文章于 2025-09-13 11:11:24 发布 · 735 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS

本文介绍了CSS中的HSL色彩模式，包括Hue、Saturation和Lightness三个要素。Hue代表色调，如0（或360）对应红色，120对应绿色，240对应蓝色。Saturation表示饱和度，范围从0.0%到100.0%，而Lightness则定义了颜色的亮度，其取值也在0.0%到100.0%之间。

相关代码

在头部编写style

<style type="text/css">
  table{
    border:solidlpxred;
    background:#eee;
    padding:6px;
  }
  th{
    color:red;
    font-size:12px;
    font-weight:normal;
  }
  td{
    width:80px;
    height:30px;
  }
  /*第1行 第4个tr标签 以此类推*/
  tr:nth-child(4) td:nth-of-type(1){background:hsl(0,100%,100%);}/*第1列*/
  tr:nth-child(4) td:nth-of-type(2){background:hsl(0,75%,100%);}/*第2列*/
  tr:nth-child(4) td:nth-of-type(3){background:hsl(0,50%,100%);}/*第3列*/
  tr:nth-child(4) td:nth-of-type(4){background:hsl(0,25%,100%);}/*第4列*/
  tr:nth-child(4) td:nth-of-type(5){background:hsl(0,0%,100%);}/*第5列*/
  /*第2行*/
  tr:nth-child(5) td:nth-of-type(1){background:hsl(0,100%,88%);}/*第1列*/
  tr:nth-child(5) td:nth-of-type(2){background:hsl(0,70%,88%);}/*第2列*/
  tr:nth-child(5) td:nth-of-type(3){background:hsl(0,50%,88%);}/*第3列*/
  tr:nth-child(5) td:nth-of-type(4){background:hsl(0,25%,88%);}/*第4列*/
  tr:nth-child(5) td:nth-of-type(5){background:hsl(0,0%,88%);}/*第5列*/
  /*第3行*/
  tr:nth-child(6) td:nth-of-type(1){background:hsl(0,100%,75%);}/*第1列*/
  tr:nth-child(6) td:nth-of-type(2){background:hsl(0,70%,75%);}/*第2列*/
  tr:nth-child(6) td:nth-of-type(3){background:hsl(0,50%,75%);}/*第3列*/
  tr:nth-child(6) td:nth-of-type(4){background:hsl(0,25%,75%);}/*第4列*/
  tr:nth-child(6) td:nth-of-type(5){background:hsl(0,0%,75%);}/*第5列*/
  /*第4行*/
  tr:nth-child(7) td:nth-of-type(1){background:hsl(0,100%,63%);}/*第1列*/
  tr:nth-child(7) td:nth-of-type(2){background:hsl(0,70%,63%);}/*第2列*/
  tr:nth-child(7) td:nth-of-type(3){background:hsl(0,50%,63%);}/*第3列*/
  tr:nth-child(7) td:nth-of-type(4){background:hsl(0,25%,63%);}/*第4列*/
  tr:nth-child(7) td:nth-of-type(5){background:hsl(0,0%,63%);}/*第5列*/
  /*第5行*/
  tr:nth-child(8) td:nth-of-type(1){background:hsl(0,100%,50%);}/*第1列*/
  tr:nth-child(8) td:nth-of-type(2){background:hsl(0,70%,50%);}/*第2列*/
  tr:nth-child(8) td:nth-of-type(3){background:hsl(0,50%,50%);}/*第3列*/
  tr:nth-child(8) td:nth-of-type(4){background:hsl(0,25%,50%);}/*第4列*/
  tr:nth-child(8) td:nth-of-type(5){background:hsl(0,0%,50%);}/*第5列*/
  /*第6行*/
  tr:nth-child(9) td:nth-of-type(1){background:hsl(0,100%,38%);}/*第1列*/
  tr:nth-child(9) td:nth-of-type(2){background:hsl(0,70%,38%);}/*第2列*/
  tr:nth-child(9) td:nth-of-type(3){background:hsl(0,50%,38%);}/*第3列*/
  tr:nth-child(9) td:nth-of-type(4){background:hsl(0,25%,38%);}/*第4列*/
  tr:nth-child(9) td:nth-of-type(5){background:hsl(0,0%,38%);}/*第5列*/
  /*第7行*/
  tr:nth-child(10) td:nth-of-type(1){background:hsl(0,100%,25%);}/*第1列*/
  tr:nth-child(10) td:nth-of-type(2){background:hsl(0,70%,25%);}/*第2列*/
  tr:nth-child(10) td:nth-of-type(3){background:hsl(0,50%,25%);}/*第3列*/
  tr:nth-child(10) td:nth-of-type(4){background:hsl(0,25%,25%);}/*第4列*/
  tr:nth-child(10) td:nth-of-type(5){background:hsl(0,0%,25%);}/*第5列*/
  /*第8行*/
  tr:nth-child(11) td:nth-of-type(1){background:hsl(0,100%,13%);}/*第1列*/
  tr:nth-child(11) td:nth-of-type(2){background:hsl(0,70%,13%);}/*第2列*/
  tr:nth-child(11) td:nth-of-type(3){background:hsl(0,50%,13%);}/*第3列*/
  tr:nth-child(11) td:nth-of-type(4){background:hsl(0,25%,13%);}/*第4列*/
  tr:nth-child(11) td:nth-of-type(5){background:hsl(0,0%,13%);}/*第5列*/
  /*第9行*/
  tr:nth-child(12) td:nth-of-type(1){background:hsl(0,100%,0%);}/*第1列*/
  tr:nth-child(12) td:nth-of-type(2){background:hsl(0,70%,0%);}/*第2列*/
  tr:nth-child(12) td:nth-of-type(3){background:hsl(0,50%,0%);}/*第3列*/
  tr:nth-child(12) td:nth-of-type(4){background:hsl(0,25%,0%);}/*第4列*/
  tr:nth-child(12) td:nth-of-type(5){background:hsl(0,0%,0%);}/*第5列*/  
</style>
主体内容
<table class="hslexample">
  <tbody>
    <tr>
      <th>&nbsp;</th>
      <th colspan="5">色相： H=0 Red</th>
    </tr>
    <tr>
      <th>&nbsp;</th>
      <th colspan="5">饱和度 (&rarr;)</th>
    </tr>
    <tr>
      <th>亮度(&darr;)</th>
      <th>100%</th>
      <th>75%</th>
      <th>50%</th>
      <th>25%</th>
      <th>0%</th>
    </tr>
    <tr>
      <th>100</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>88</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>75</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>63</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>50</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>38</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>25</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>13</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th>0</th>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>   
  </tbody>    
</table>

在这里插入图片描述

注意

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360S：Saturation(饱和度)。取值为：0.0% - 100.0%L：Lightness(亮度)。取值为：0.0% - 100.0%

在 CSS 中使用 HSL 颜色
liuhao9999的博客
07-25 944
最近，我开始看到更多HSL颜色的使用，但是，我仍然认为HSL的全部潜力被忽视了。请记住，值越高，越轻。使用HSL，我们可以为第二种颜色使用相同的颜色但具有不同的亮度值。，我们可以获得与基础颜色相似的饱和度和亮度的颜色。我们可以将其替换为自定义白色，该白色源自我们拥有的颜色的非常浅的阴影。首先，我们像往常一样从颜色选择器中选择颜色，并确保获得它的HSL值。这种白色很无聊，我们可以用我们拥有的颜色的非常浅的阴影来代替它。当特定组件中的颜色需要在悬停时显得更暗时，HSL颜色可能是完美的选择。...
css零到一基础教程009：CSS HSL 颜色
kerryqpw的博客
03-18 956
HSL 值 在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下： hsla(hue, saturation, lightness) 色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。 饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。 亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色。 请通过混合以下 HSL 值来进行实验： 实例 &lt..
RGB HSL颜色模式转换
01-04
rgb hsl 六个滑块，直观了解各值对颜色的影响，拖动任意滑块即时观察颜色转换效果
HSL色彩模式
Merryhyl的专栏
03-26 3550
CSS3中，HSL色彩模式的表示语法：hsl(<length>,<percentage>,<percnetage>)参数值说明： <length>：表示色调(Hue)。衍生于色盘，可以取其任意值。其中该值除以360所得的余数为0表示红色，为60表示黄色，为120表示绿色，为240表示蓝色，为300表示洋红色。 <percentage>：表示饱和度(Saturation)。表示色调确定的颜色的浓度，即
HSL
07-24 732
1颜色HSL编辑 H: Hue 色相 S：Saturation 饱和度 L Lightness 明度 概述 HSL色彩模式使用HSL模型为图像中每一个像素的HSL分量分配一个0~255范围内的强度值。HSL图像只使用三种通道，就可以使它们按照不同的比例混合，在屏幕上重现16777216种颜色。 在 HSL 模式下，每种 HSL 成分都可使用从 0到 255的值。（其中L是从黑...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7300
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
CSS基础教程（五十四）颜色：色计课，你的网站颜色值几个亿？——深度分析CSS颜色，附硬核示例
jxf_jxfcsdn的博客
09-12 624
你以为CSS颜色只是#FFF和red？Too young！本文将深入剖析CSS颜色系统的十八般武艺——从经典十六进制到人类直觉的HSL，从高端Lab到未来派LCH。附带炫酷示例，让你用颜色说话，让设计值几个亿！256字带你解锁CSS颜控的终极奥义。
html.rar_CSS3
09-23
同时，HSL和HSLA颜色模式提供了基于色相、饱和度和亮度的色彩控制，能更好地模拟火苗的暖色调。 5. **2D/3D转换**：CSS3的转换功能可以对元素进行旋转、缩放、移动和平移，甚至可以在2D和3D空间中进行操作。在蜡烛...
超级取色精灵——设计师口袋里的色彩管家
Start_mswin的博客
04-25 1038
当大多数取色软件还在用臃肿身躯占据硬盘空间时，这款工具的体积却令人惊叹地控制在1MB以内。无需繁琐的安装流程，双击EXE文件即可瞬间唤醒这个色彩探测器。
CSS基础教程（五十七）颜色十六进制值：#FF3399！—— 解码CSS十六进制的百万色域，让你的网页不再“好色”！
最新发布
jxf_jxfcsdn的博客
09-13 123
你以为#FF0000只是红色的代号？不！它是程序员与显示器之间关于夕阳、玫瑰与热辣火锅的终极加密通话！本文将带你破译这场“颜色阴谋”，从#000到#FFF，深入剖析十六进制颜色的每一个字节。你会发现，调色不再是玄学，而是精准的科学与幽默的艺术。附完整代码示例，让你一键复制，瞬间成为调色大师！
CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义
09-24
CSS3色彩模式有哪些？这篇文章主要介绍了CSS3色彩模式是什么？告诉大家HSL色彩模式的定义、语法，感兴趣的小伙伴们可以参考一下
PS插件CameraRaw-HSL色彩模式
weixin_34235105的博客
10-25 493
一、HSL百度百科 HSL色彩模式是工业界的一种颜色标准，是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色相，饱和度，明度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。 上面是百度百科的原话，我用自己的话来解释一下这3个东西的意思 色相（H）：色彩的相貌，也就是我们普遍表...
hsl是什么css属性
yiguoxiaohai的博客
09-30 784
hsl是什么css属性
【CSS Tricks】在css中尝试一种新的颜色模型HSL
qbbmnnnnnn的博客
09-19 1082
在日常开发过程中，大多数情况下UI提供的颜色值为rgb或者hex格式，有些设计网站会直接提供hsl格式的色值。通过这篇文章主要想阐述一个事实，那就是hsl相对于rgb在前端开发领域是有很大优势的，尤其是编码层面上。使用hsl会使css的编码更加清晰，得到的颜色大概率不会偏离预期。可能现阶段大家用的不是很多，所以会有所抵触，在使用一段时间后，相信你会爱上这种颜色模式。
css中hsl()函数【2021.11.30】
masierty的博客
12-01 541
hsl()函数在CSS中使用时主要用更改色相、饱和度、明度。
CSS的颜色用HSL可以做到
Fairy的博客
10-30 606
 CSS 中的颜色可以由RGB色彩空间和HSL色彩空间两种方式来表述。其中我们常用的是RGB色彩空间，RGB色彩空间的颜色表示方式有：十六进制颜色（如红色：#FF0000）、RGB颜色（如红色：rgb(255,0,0)）,RGBA颜色（如半透明的红色rgba(255,0,0,0.5)），此外常见的颜色可以直接写颜色名（如红色：red）。HSL色彩，是一种工业界的色彩标准，因为它能涵盖到人类视觉所能...
css3--之HSL颜色
weixin_34268579的博客
07-03 202
jQuery之家： CSS3中使用的HSL颜色指南：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503281590.html 要理解HSL颜色，你首先需要从另一个角度来理解颜色。注意观察上面的色盘，你可以看到红、绿和蓝三种颜色。红色在最是那干嘛，被设置为0度，绿色是120度，蓝色是240度。它们将色盘分为三个部分。在它们的...
CSS 的 hsl() 和 hsla() 函数（设置颜色的方式之一）
单枪匹码
11-07 5404
一：CSS中的 hsl()函数： 1、定义与用法：hsl() 函数使用色相、饱和度、亮度来定义颜色。 HSL 即：色相（Hue）、饱和度（Saturation）、亮度（Lightness）。 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0 ~ 100%的数值。 亮度（L），取0 ~ 100%，增加亮度，颜色会向白...
css 中hsl(),CSS hsl() Function
weixin_36056010的博客
08-04 385
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...
自动调节图片HSL颜色实现QQ换肤效果
标题和描述提到了关于图片处理的一个技术点——HSL颜色调节，以及这个技术如何被应用在“仿QQ换肤”的效果上。为了详细解释这些知识点，我们需要从以下几个方面来讨论：HSL颜色模式的基础知识、HSL颜色调节的原理、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值