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. Navicat相关应用及注意事项

    一.MySQL数据类型 1.数值型 SMALLINT: 2个字节 INT: 4个字节      // age int(10) INTEGER:INT的同义词 BIGINT : 8个字节 FLOAT : ...

  2. RestfulAPI超简单入门

    简单入门 REST -- REpresentational State Transfer,英语的直译就是"表现层状态转移" 是目前最流行的 API 设计规范,用于 Web 数据接口 ...

  3. visual studio 2013 下ef6 CodeFirst 使用SQL Lite 数据库

    今天系统的来记录一下再vs2013下,使用ef6 codefirst功能,来操作SQL lite数据库 本来我以为sqlite数据库用的这么多,ef6肯定支持,结果,使用过程中很多坑,现在我把具体的配 ...

  4. js 复制粘贴

    input输入框<div id="top-title" style="position: relative"> <img class=&quo ...

  5. form图片上传遇到错误

    org.springframework.web.multipart.MultipartException: The current request is not a multipart request ...

  6. css3之transform属性实现div不定宽高垂直水平居中

    transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...

  7. JavaSE——线程通信

    线程通信: 如果线程A和线程B持有同一个MyObject类的对象object,这两个线程会去调用不同的方法,但是它们是同步执行的,比如:线程B需要等待线程A执行完了methodA()方法之后,它才能执 ...

  8. windows 服务器MYSQL 数据库安装配置

    一.到官网下载MYSQL 打开官网地址:www.mysql.com, 选择 DOWNLOADS,进入到MySQL的下载页面,在页面的底部有一个MySQL Community Edition, 并且下面 ...

  9. Azure 中 Windows 虚拟机的大小

    本文介绍可用于运行 Windows 应用和工作负荷的 Azure 虚拟机的可用大小和选项. 此外,还提供在计划使用这些资源时要考虑的部署注意事项. 本文也适用于 Linux 虚拟机. 类型 大小 说明 ...

  10. Sql server中的 nvarchar(max) 到底有多大?(转载)

    问题: SQL server中的nvarchar(max)最大的长度是4000个字吗? 如果字段的内容超过4000个字时用什么类型呢?text 还是binary?他们的最大长度是多少?比如字段放的是长 ...