应用视觉设计：「20」调整元素颜色的色相值

路条编程 2020-09-05

328

欢迎关注路条编程的公众号，通过学习应用视觉设计这一系列文章，你将会逐步掌握页面版式、色彩、图形、动画和布局相关的基础知识。

今天我们要介绍的内容是调整元素颜色的色相值。颜色具有多种特性，包括色相，饱和度和亮度。CSS3 引入了 hsl() 函数，hsl() 函数使用色相、饱和度、亮度来定义颜色。

色相是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。以颜色光谱为例，光谱左边从红色开始，移动到中间的绿色，一直到右边的蓝色，色相值就是沿着这条线的取值。在 hsl() 函数里面，色相用色轮来代替光谱，色相值就是色轮里面的颜色对应的从 0 到 360 度的角度值。饱和度是指色彩的纯度，也就是颜色里灰色的占比，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。亮度决定颜色的明暗程度，也就是颜色里白色或者黑色的占比，100% 亮度是白色， 0% 亮度是黑色，而 50% 亮度是“一般的”。

以下是将 hsl（）函数与完全饱和的正常亮度颜色一起使用的一些示例：

颜色值          HSL
红色      hsl（0，100％，50％）
橙色      hsl（39，100％，76％）
绿色      hsl（120，100％，50％）
蓝绿色    hsl（180，100％，50％）
蓝色      hsl（240，100％，50％）
树莓红色   hsl（330，100％，56％）

在文章 “应用视觉设计：「19」将多种元素的颜色调整为互补色” 代码的基础中，使用 hsl() 函数将之前气球 3 模块位置的 3 个圆角矩形对应背景色的类 .orange、.cyan、.raspberry 调整为对应的 HSL值分别为 hsl(60，100％，50％)、hsl(180，100％，50％)、hsl(330，100％，56％)。在页面 style 区调整代码如下所示：

<style type="text/css">
  .orange {
    background-color: hsl(39, 100%, 76%);
  }


  .cyan {
    background-color: hsl(180, 100%, 50%);
  }


  .raspberry {
    background-color: hsl(330, 100%, 56%);
  }


  .p-hue {
    font-size:17px;
  }


  .mt-10 {
    margin-top: 10px;
  }


  .span-round {
    display: inline-block;
    font-size: 17px;
    text-align: center;
    padding: 40px auto;
    line-height: 80px;
    width: 80px;
    height: 80px;
    margin-left: 10px;
    border: 1px dotted #ccc;
    border-radius: 8px;
  }


 .header {
    z-index: 1000;
    background-color: #09A7A1;
  }
  .nav {
    z-index: 1000;
    background-color: #09A7A1;
  }
</style>

以上样式代码在标题栏及导航栏增加了 z-index 属性，默认值为 auto ，你可以简单将它等同于 z-index: 0 。当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。修复了固定标题栏和导航栏在图片或圆角矩形下面的显示问题。

html 代码调整如下所示：

<li>
<div class="img-wrap">
  <span class="span-round orange">橙色</span>
  <span class="span-round cyan">蓝绿色</span>
  <span class="span-round raspberry">树莓红色</span>
  <div class="mt-10">
    <p style="color: hsl(39, 100%, 76%);"  class="p-hue">橙色：hsl(39, 100%, 76%)</p>
    <p style="color: hsl(180, 100%, 50%);" class="p-hue">蓝绿色：hsl(180，100％，50％)</p>
    <p style="color: hsl(330, 100%, 56%);" class="p-hue">树莓红色：hsl(330，100％，56％)</p>
  </div>
</div>
<div class="mt-10">
  <p style="font-size: 16px;"><span style="color:#FF0000;">红色（#FF0000）</span> 和 <span style="color:#00FFFF">青色（#00FFFF）</span></p>
  <p style="font-size: 16px;"><span style="color:#00FF00;">绿色（#00FF00）</span> 和 <span style="color:#FF00FF;">洋红（#FF00FF）</span></p>
  <p style="font-size: 16px;"><span style="color:#0000FF;">蓝色（#0000FF）</span> 和 <span style="color:#FFFF00;">黄色（#FFFF00）</span></p>
</div>
</li>

以上代码在圆角矩形中增加了相应颜色的文字描述，在圆角矩形下面增加了颜色及 hsl() 函数的说明，在互补色的 div 增加了 10 像素外边距。

保存页面，大家可以通过示例页面或下面的完整效果图比较下应用样式的效果，调整页面效果如下：

重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。

作者：路条编程（转载请获本公众号授权，并注明作者与出处）

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

应用视觉设计：「20」调整元素颜色的色相值

评论