css中主要有六种方法指定颜色:

1.十六进制颜色

2.RGB颜色

3.RGBA颜色

4.HSL色彩

5.HSLA颜色

6.预定义/跨浏览器的颜色名称

前三种是我们最常见的,也是用的最多的,而后三种对于初学者来说简直就是“什么鬼?”。但是!不用怕,今天我们就来好好聊聊css中的这六位小成员的事儿。

一、十六进制颜色

十六进制颜色是个比较温和惹人爱的成员,深受所有浏览器的喜爱,它的组成部分是“#RRGGBB”,其中RR(red红色),GG(green绿色),BB(blue蓝色)。但是它也是有限制的,它的所有值必须介于0~9、A~F(a~f),不区分大小写。

div{
background-color:#8e236b;
}

下面炒几个特殊颜色的小栗子:

  • #ff0000值呈现的是红色,因为红色的组成设置为最高(ff),而其他设置为0

(同理#00ff00为绿色,#0000ff为蓝色)

  • #000000值为黑色
  • #ffffff值为白色

二、RGB颜色

RGB颜色也是个被所有浏览器宠爱的成员,区别于十六进制颜色的是,RGB颜色值更具体一点,由于值的范围扩大,展现出的颜色也更加丰富一点。它的指定是RGB(红,绿,蓝)。每个参数定义颜色的亮度,取值范围为0~255之间的整数,或者一个从0%~100%之间的整数百分比值。

跟上一位成员一样,当它三个参数中的某个参数达到最高值的时候,它将表现为该参数的纯色。

#word{
color:rgb(255,255,153);
}

下面上图一个百度爸爸给的附带RGB的十六进制颜色码

三、RGBA颜色

这个成员就比较挑剔了,是个“不尊爱老人”的主儿,专挑青壮年以下的下手,只有IE9, Firefox3+, Chrome, Safari,和Opera10+能被宠幸。它和上面那个唯一的区别就是它的参数多了一个A:alpha通道的延伸,指定对象的透明度,让原本就多的颜色更多了一个区分通道,自然颜色也多了。

alpha参数是一个只取小数点后一位,介于0.0(完全透明)和1.0(完全不透明)之间的参数。

下面上一组RGB参数相同,A参数不同的对比图(多余样式我就不写了,主要看效果)

div{
background: rgba(223,106,95,.3);
}

div{
background: rgba(223,106,95,.9);
}

注意:当写alpha参数时,小数点前面的0可直接省去。

四、HSL颜色

说到这个成员就厉害了,作为工业街的一种颜色标准,它的色彩几乎包括了人类实力所能感知的所有颜色,是目前运用最广的颜色系统之一。这么厉害的角色,自然也是有所挑剔的,只有IE9, Firefox, Chrome, Safari,和Opera 10+能支持。

HSL是css3才出现的表现格式,代表色相、饱和度和亮度,使用色彩圆柱坐标表示。下面来看百度爸爸的解释。

1.H(hue)色相:

代表的是人眼所能感知的颜色范围,这些颜色分布在一个平面的色相环上,取值范围是0°到360°的圆心角,每个角度可以代表一种颜色。色相值的意义在于,我们可以在不改变光感的情况下,通过旋转色相环来改变颜色。在实际应用中,我们需要记住色相环上的六大主色,用作基本参照:360°/0°红、60°黄、120°绿、180°青、240°蓝、300°洋红,它们在色相环上按照60°圆心角的间隔排列。大致按照红橙黄绿青蓝紫的顺序,定好大致颜色后再根据所在角度选取就好啦!

是不是不懂?上图你就明白了

当六种主色排列融合后,我们就能随便写角度选颜色啦~

2.S(saturation)分量

指的是色彩的饱和度,它用0%至100%的值描述了相同色相、明度下色彩纯度的变化。数值越大,颜色中的灰色越少,颜色越鲜艳,呈现一种从理性(灰度)到感性(纯色)的变化。

 
3.L(lightness)分量
      指的是色彩的明度,作用是控制色彩的明暗变化。它同样使用了0%至100%的取值范围。数值越小,色彩越暗,越接近于黑色;数值越大,色彩越亮,越接近于白色。
div{
background-color:hsl(120,65%,75%);
}

这里要注意的是S和L,S控制的是颜色的鲜艳度,值越大颜色越鲜艳;而L控制的是颜色的亮度,当值为50%的时候是正常亮度。只看最大最小值就能很明显的区分出二者的不同。

 
据张鑫旭大神所说,在取色器中,HSL颜色非常管用,有助于迅速选取我们想要的颜色值。或者根据现有颜色得到近似色。比方说我们要实现一个hover效果,hover一个色块,然后颜色加深,怎么搞?使用RGB很头疼,而使用hsl则很简单,我们只要把l也就是亮度微调低一点就可以。
 
十六进制颜色、RGB和HSL之间可以相互转化,过程比较复杂,在这我就不说了,有兴趣的可以查一下。
五、HSLA颜色
      RGB有兄弟RGBA,那么HSL有姐妹HSLA自然也不奇怪。功能也跟前一对兄弟一样,A控制透明度,属性一切参照RGBA中的。这就不多说了。
div{
background-color:hsl(120,65%,75%,.5);
}

六、预定义/跨浏览器的颜色名称

147是在HTML和css颜色规范预定义的颜色名称,是所有浏览器都支持的。147包括17种标准色(浅绿色,黑色,蓝色,紫红色,灰色,灰色,绿色,石灰,栗色,海军,橄榄,紫,红,银,蓝绿色,白色和黄色) 和130多个其他。

附一个菜鸟网址,里面有详细颜色。http://www.runoob.com/cssref/css-colornames.html

结束语:

关于颜色的主要分类就是以上几种了,平时用的话没有什么太大区别,主要是表达形式的不同,其实也没有多难,结合图片看几遍就明白了。还有一些关于颜色的小知识暂时我还没有涉及到,所以就先写到这吧,如果有什么不好的请多包涵。

以上内容都是通过百度搜索,w3c,菜鸟等网站参考而来,如果有什么不对的地方欢迎指出。

 

css里颜色的那些事儿(合法颜色值)的更多相关文章

  1. CSS:CSS 合法颜色值

    ylbtech-CSS:CSS 合法颜色值 1.返回顶部 1. CSS 颜色 可以用以下方法来规定 CSS 中的颜色: 十六进制色 RGB 颜色 RGBA 颜色 HSL 颜色 HSLA 颜色 预定义/ ...

  2. 熟悉css/css3颜色属性

    颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...

  3. css之颜色表示法

    css之颜色表示法 十六进制颜色 所有浏览器都支持十六进制颜色值. 十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色).GG(绿色).BB(蓝色)十六进制整数规定了颜色的成分.所有值必须介 ...

  4. 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

    最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...

  5. CSS里的pointer-events属性

    现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清.比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框.而本文要说的pointer-ev ...

  6. CSS之颜色英文代码全集

    ColorHex在线颜色查询 <head> <title>CSS之颜色英文代码全集</title> <style type="text/css&qu ...

  7. CSS背景颜色、背景图片、平铺、定位、固定

    CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:u ...

  8. CSS里的 no-repeat 是什么意思

    CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平铺或者重复 ...

  9. 一个CSS背景颜色问题

    div{ background: rgba(0,0,0,.1);     background-color: #19FFFFFF; } 安卓下会显示上面的透明颜色,而在iOS上则显示下面的颜色,并且其 ...

随机推荐

  1. C# Windows程序窗口置前台的几种方法

    这个是从别的地方看来的,放我这里 第一种:SetForegroundWindow,这个方法时灵时不灵.有人说,在自己的程序里把自己的窗口之前一般就不灵,而置前其它程序的窗口就灵.我觉得这是有原因的:当 ...

  2. 浅谈sql中的in与not in,exists与not exists的区别以及性能分析

    1.in和exists in是把外表和内表作hash连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询,一直以来认为exists比in效率高的说法是不准确的.如果查询的两个表 ...

  3. $.each()和$(selector).each()

    转载:http://www.jb51.net/article/65215.htm $.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的 ...

  4. oracle安装与备份导入

    win10安装oracle因运行版本问题导致安装时提示错误(可能win10未被甲骨文公司认证)  跳过的问题 需要更改配置文件: 配置位置在 : 具体操作如下图: 在安装时win10跳过了 许是因为环 ...

  5. 山东省第四届acm解题报告(部分)

    Rescue The PrincessCrawling in process... Crawling failed   Description Several days ago, a beast ca ...

  6. Java_万年历(简单)

    1.方法,需要一个年份,一个月份.然后在控制台输出日历 // 输入一个年份和一个月份显示日历 public static void printCalendar(int year, int month) ...

  7. HDU3715(二分+2-SAT)

    Go Deeper Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  8. python学习之老男孩python全栈第九期_day011知识点总结

    # 装饰器的形成的过程:最简单的装饰器:有返回值的:有一个参数的:万能参数# 装饰器的作用# 原则:开放封闭原则# 语法糖# 装饰器的固定模式:# def wrapper(f): # 装饰器函数,f是 ...

  9. Linux服务器开启ssh服务,实现ssh远程登陆!

    最近在学linux,使用ssh远程登陆linux,记录下来! 首先进入/etc目录下,/etc目录存放的是一些配置文件,比如passwd等配置文件,要想使用ssh远程登陆,需要配置/etc/ssh/s ...

  10. css3 content 特殊字符和符号

    基本形状 ▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 2605 ...