整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
相信您已经熟悉颜色的 RGB 和 HEX 表示，因为这是大多数文章/教程在编写 CSS 颜色时使用的，但这些并不是在 CSS 中编写颜色的最佳方法。HEX 和 RGB 很难理解，使颜色变浅/变深或将颜色从红色转换为橙色并不容易。这就是 HSL 的用武之地。HSL 是一种更容易阅读的格式，它使更改颜色的亮度或色调等操作变得简单。
HSL 代表色相、饱和度和亮度。这类似于 RGB 如何通过将其红色、绿色和蓝色值组合在一起来表示颜色，但使用 HSL，这些值更直观。
颜色的色调由围绕一个圆圈的度数表示。试想一个色轮，0 度代表红色，180 度代表青色，360 度代表同样的红色。
饱和度由 0 到 100 之间的百分比表示，并确定颜色的灰色程度。如果颜色是 100% 饱和度，则根本没有灰色，而饱和度为 0% 的颜色将是没有颜色的灰色阴影。
亮度也用百分比表示，并确定颜色的白色或黑色。如果颜色是 50% 的亮度，那么这意味着没有额外的白色或黑色添加到颜色中。随着百分比增加到 50% 以上，它会在颜色中添加更多的白色，直到在 100% 亮度下达到完全白色。随着百分比降低到 50% 以下，它会为颜色添加更多黑色，直到在 0% 亮度下达到完全黑色
现在我们了解了 HSL 是什么，我们可以谈谈如何使用它。它的工作原理与 RGB 一样，您可以在 CSS 中调用该hsl函数来定义 HSL 颜色。
.class {
/* Pure red #FF0000 */
background-color: hsl(0, 100%, 50%);
}
传递给 hsl 的第一个值是色调，它是 0 到 360 之间的度数，第二个值是饱和度，它是 0% 到 100% 之间的百分比值，最后传递的最终值是亮度，它是一个百分比值在 0% 和 100% 之间。您还可以使用hsla来表示部分透明的颜色。这个函数接受第四个参数，它是一个介于 0 和 1 之间的值，其中 1 是完全不透明的，而 0 是完全透明的。
像这样写颜色可能看起来有点奇怪，因为你很可能习惯于 HEX 或 RGB，但是一旦你习惯了它，它会让写 CSS 变得更加愉快。以下是几个原因：
正如我在本文开头提到的，您经常需要在 CSS 中更改颜色的亮度或饱和度，以执行诸如为按钮引入悬停状态之类的操作。使用 HEX 可能会很痛苦，因为没有人知道暗 10% 的版本#FA652F是什么，但是暗 10% 的版本hsl(16, 95%, 58%)很容易计算。您只需将亮度值降低 10% 即可hsl(16, 95%, 48%)。
您甚至可以更进一步，使用calcCSS 中的自定义属性为您自动执行此操作。
.btn {
--background-hue: 200;
background-color: hsl(
var(--background-hue),
100%,
calc(50% + var(--lightness-offset))
);
}
.btn:hover {
--lightness-offset: -10%;
}
.btn:focus {
--lightness-offset: -20%;
}
.btn-danger {
--background-hue: 0;
}
使用这少量代码，我们设置了一个基本的 btn 类，它总是使背景在悬停时变暗 10%，在焦点上变暗 20%。我们也这样做了，以便我们可以更改其他类型按钮的按钮色调，我们甚至不需要修改这些新按钮类型的悬停和焦点状态，因为它们都是使用自定义属性和calc.
如果您熟悉任何颜色理论，那么您就会知道理解互补色、原色/次色、相似色等很重要。使用 RGB 或 HEX 很难找出这些不同类型的颜色，但使用 HSL 很容易找到诸如互补色之类的东西。这是因为互补色只是色轮另一侧的颜色，在 HSL 的情况下，这意味着它们的色调彼此相差 180 度。
这很重要，因为您可以使用这些知识在 CSS 中创建一个颜色主题，该主题使用数学来计算这些互补色，并允许您一次轻松地更改整个站点的颜色主题。下面是我建立的一个可以做到这一点的网站的例子。
最后，HSL 的最后一个重大胜利是它可以轻松更改颜色的色调。如果你想让你的红色更橙色一点，你可以通过让你的色调更大一点来做到这一点，因为橙色在色轮上的红色之后。这真的很有用，因为在设计和开发的早期阶段，像这样的小颜色变化非常普遍，并且能够轻松地制作它们可以节省大量时间。
HSL 是一种在 CSS 中表示颜色的不同方式，它不仅更易于阅读，而且更易于在 CSS 中修改和使用。在我看来，它是 CSS 中最好的颜色格式。
SS的颜色值有3种表示方式，为十六进制、RGB、颜色名称，用代码表示分别为：
color : #345456;
color : rgb(255,152,10);
color : red;
平时在编写CSS代码时，在设置颜色值时使用的最多的方式是十六进制。如果要对颜色值进行计算，就必须将十六进制的颜色值转换成RGB模式。那么如何进行转换呢？
别急，先来看看十六进制的颜色值和RGB颜色值之间的对应关系。比如上面的十六进制的颜色值：#345456，其中的前2位“34”对应R，中间2位“54”对应G，最后2位“56”对应B，有了这个对应关系那么剩下的就是进制转换的事了。
javascript中使用parseInt()方法可以将将第二个参数设置成16就可以将十六进制转换成十进制。需要注意的是，CSS中的十六进制颜色值支持简写，在转换的过程中要考虑到简写的处理办法。
下面是我写的一个将十六进制的颜色值转换成RGB的函数，该函数接受一个十六进制或RGB的CSS颜色值，返回的是一个包含了r、g、b三个颜色值的对象，这样就可以很方便的对颜色值进行计算了。
view sourceprint?
var parseColor = function( val ){
var r, g, b;
// 参数为RGB模式时不做进制转换，直接截取字符串即可
if( /rgb/.test(val) ){
var arr = val.match( /\d+/g );
r = parseInt( arr[0] );
g = parseInt( arr[1] );
b = parseInt( arr[2] );
}
// 参数为十六进制时需要做进制转换
else if( /#/.test(val) ){
var len = val.length;
// 非简写模式 #0066cc
if( len === 7 ){
r = parseInt( val.slice(1, 3), 16 );
g = parseInt( val.slice(3, 5), 16 );
b = parseInt( val.slice(5), 16 );
}
// 简写模式 #06c
else if( len === 4 ){
r = parseInt( val.charAt(1) + val.charAt(1), 16 );
g = parseInt( val.charAt(2) + val.charAt(2), 16 );
b = parseInt( val.charAt(3) + val.charAt(3), 16 );
}
}
else{
return val;
}
return {
r : r,
g : g,
b : b
}
};
下面是调用结果：
parseColor( '#009652' ); // { r = 0, g = 150, b = 82 }
parseColor( '#06c' ); // { r = 0, g = 102, b = 204 }
parseColor( 'rgb(255,10,102)' ); // { r = 255, g = 10, b = 102 }
文章地址：peixun.qietu.com
文/丁向明
做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833
http://dingxiangming.com
到对图片进行处理，我们经常会想到PS,美图秀秀这类的图像处理工具。作为前端,全栈开发者，我们经常会需要处理一些特效，例如根据不同的状态，让图片显示不同的颜色。或者是hover的时候，对图片的对比度，阴影进行处理。
你以为这些是经过PS软件处理出来的？不不不，只有一张图片,纯粹的是用css写出来的。
本文的目标就是：手把手教大家学习CSS滤镜（filter）属性,CSS滤镜提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。
使用CSS滤镜只需要如下5步:
1. 准备工作
2. 使用sublime快速书写HTML结构
3. 使用CSS选择器选中目标标签
4. CSS滤镜的基本用法
5. CSS滤镜实例演示
一、第一步 —— 准备工作
目标 : 下载并安装sublime以及准备一张图片素材
下载对应你操作系统的sublime编辑器，http://www.sublimetext.com/3
图片素材:
小结 : 准备好代码编辑器,比如sublime,hbuilder,vscode等编辑,都是可以的,再准备一张图片素材
二、第二步 —— 书写HTML结构
目标 : 使用sublime编辑器快速生成HTML5结构的页面
1. 安装sublime以后，并打开sublime.exe
2. 在电脑的某个目下新建一个空目录code，将我们的图片素材放一个images文件夹下，并把这个images文件夹也放在code中
3. 使用sublime打开我们刚准备好的code文件夹
4. 使用sublime新建一个HTML网页文件,后缀名需要为html
5. 接着输入一个英文输入状态下的!再按tab键,即可快速生成HTML5的基本结构!
6. 在网页中插入内容
小结 : 使用代码编辑器新建网页文件,并加入两张img图片标签,正确引入图片
三、第三步 —— 使用CSS选择器选中目标标签
目标：使用CSS类选择器选中我们页面中的目标图片标签, 格式 .类名
小结 : 使用 css类选择 格式: .类名 选中对应的目标标签
四、第四步 —— CSS滤镜的基本用法
目标：了解CSS滤镜的基本用法以及各方法之间效果差异
1. CSS滤镜基本语法
filter: function(param);
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() ;
提示:允许同时使用多个滤镜，多个滤镜效果之间使用空格分隔。
2. CSS滤镜支持的方法（function）有
– grayscale 灰度
– sepia 褐色
– saturate 饱和度
– hue-rotate 色相旋转
– invert 反色
– opacity 透明度
– brightness 亮度
– contrast 对比度
– blur 模糊
– drop-shadow 阴影
*请认真填写需求信息，我们会在24小时内与您取得联系。
