jQuery之家:

CSS3中使用的HSL颜色指南:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503281590.html

要理解HSL颜色,你首先需要从另一个角度来理解颜色。注意观察上面的色盘,你可以看到红、绿和蓝三种颜色。红色在最是那干嘛,被设置为0度,绿色是120度,蓝色是240度。它们将色盘分为三个部分。在它们的中间分别是黄色、青色和洋红(CMYK颜色系统)。它们的角度分别为60度、180度和300度。

从色盘的顶部开始顺时针方向旋转,是彩虹的七彩颜色。从60度开始,分别是:黄色、绿色、青色、蓝色、洋红和红色。

HSL颜色就是指上面颜色色盘中的多少度的颜色值。

例如,紫色在蓝色(240°)和洋红(300°)之间,所以他的HSL颜色是hsl(270,100%,50%)。如果想要紫色偏蓝,就要往色盘蓝色方向移动角度值,得到hsl(255,100%,50%)

你会注意到角度后面还有两个百分比的值,第一个值是颜色的饱和度,也就是值颜色的“强度”。在色盘的最外层,颜色的饱和度为100%,最外层的颜色是最有“色彩”的。色盘越往中心移动颜色越灰。所以饱和度也可以理解为:颜色距离灰色有多远?HSL颜色的饱和度为0%时就都变为相同的灰色。

亮度是指颜色偏向于白色还是黑色。50%的亮度值表示颜色位于黑色和白色中间,这时颜色会基本保持原来的颜色不变。减少亮度会增加黑色调:当亮度为0%时颜色变为黑色。增加亮度会增加白色调:当亮度值为100%时颜色变为白色。

css3--之HSL颜色的更多相关文章

  1. CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性(转)

    CSS2中色彩模式只有RGB色彩模式(RGB即RED.Green.BLue)和十六进制(Hex)模式,为了能支持 透明opacity 的Alpha值,CSS3又增加了RGBA色彩模式(RGBA即RED ...

  2. html5--6-14 CSS3中的颜色表示方式

    html5--6-14 CSS3中的颜色表示方式 实例 每个参数 (red.green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100% ...

  3. html5--6-13 CSS3中的颜色表示方式

    html5--6-13 CSS3中的颜色表示方式 学习要点 掌握选择器的优先级问题 掌握CSS3中新增的颜色表示方式 选择器的优先级问题 原则上:元素选择器<类选择器< ID选择器< ...

  4. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

  5. css3 input placeholder颜色修改方法

    css3 input placeholder颜色修改方法<pre> input::-webkit-input-placeholder { /* placeholder颜色 */ color ...

  6. css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  7. 总结CSS3新特性(颜色篇)

    颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数 ...

  8. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  9. CSS3实现背景颜色渐变

    CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...

  10. CSS3 颜色值HSL表示方式&简单实例

    HSL色彩模式:就是色调(Hue).饱和度(Saturation).亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色,色调(Hue)色调最大值360,饱和度和亮度有百分 ...

随机推荐

  1. Android Studio 工具窗口浮动与布局恢复【申明:来源于网络】

    Android Studio 工具窗口浮动与布局恢复[申明:来源于网络] http://bbs.chinaunix.net/thread-4182438-1-1.html

  2. HDOJ HDU 1850 Being a Good Boy in Spring Festival

    Description 一年在外 父母时刻牵挂 春节回家 你能做几天好孩子吗 寒假里尝试做做下面的事情吧 陪妈妈逛一次菜场 悄悄给爸爸买个小礼物 主动地 强烈地 要求洗一次碗 某一天早起 给爸妈用心地 ...

  3. el表达式用==和eq的注意事项

    eq和==一般是一样的,但是注意el表达式中使用==判断的时候不允许有空格,例如: ${job.jobName==requestScope.user.job.jobName?"selecte ...

  4. day10 十 函数、形参和实参

    一.形参和实参 1.形参:在函数定义()中出现的参数形参就是拷贝实参的值,随着函数的调用才产生,随着函数调用结束而销毁 def fn(a, b, c): print(a) print(b) print ...

  5. [No0000CE]检测非空格字符作为密码的密码强度

    Regex.Replace(pwd, "^(?:([a-z])|([A-Z])|([0-9])|(.)){6,}|(.)+$", "$1$2$3$4$5").L ...

  6. [No0000CD]shell 中的单行注释和多行注释

    1. 单行注释 众所周知,#  比如想要注释:echo “ni” # echo "ni" 2. 多行注释 法一: : << ! 语句1 语句2 语句3 语句4 ! 例如 ...

  7. delphi string.split 按照任意字符串分割语句

    delphi string.split 按照任意字符串分割语句 1.就是把一个指定的字符串用指定的分割符号分割成多个子串,放入一个 TStringList 中 function ExtractStri ...

  8. java 流程控制--猜数字

    import java.util.Scanner; import java.util.Random; public class GuessNum{ public static void main(St ...

  9. 洛谷P3311 [SDOI2014]数数 AC自动机+dp

    正解:AC自动机+dp 解题报告: 传送门! 首先看到多串匹配balabala显然想到建个AC自动机? 然后可以用一点儿数位dp的思想地想下(,,,其实并不算QAQ 幸运数可以分为两类:位数<n ...

  10. oracle中,将两个select语句的结果作为一个整体显示出来

    如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或称为联合)的作用是将多个结果合并在一起显示出来.union和union ...