当前位置:首页 > 前端开发 > CSS的六种颜色模式

CSS的六种颜色模式

7个月前 (05-26)54

1.关键字

CSS颜色关键字包括命名颜色、transparent、currentColor属性值

  CSS支持17种合法命名颜色(标准颜色):aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal

  color: transparent用来表示文本的颜色纯透明,可以近似认为是rgba(0,0,0,0)

  currentColor顾名思义指当前颜色,准确来讲指当前的文字颜色

2.16进制

16进制是设置颜色值的常用方式,将三个介于00-FF的十六进制数连接起来,若16进制的3组数各自成对,则可简写为3位

web安全颜色是指在256色计算机系统上总能避免抖动的颜色,表示为RGB值20%和51(相应的16进制值为33)的倍数。因此,采用16进制时,使用00\33\66\99\cc\ff认为是Web安全色,一共6*6*6=216种

3.RGB模式

通过组合不同的红色、绿色、蓝色分量创造出的颜色成为RGB模式的颜色。显示器是由一个个像素构成,利用电子束来表现色彩。像素把光的三原色:红色(R)、绿色(G)、蓝色(B)组合起来。每像素包含8位元色彩的信息量,有0-255的256个单元,其中0是完全无光状态,255是最亮状态

4.RGBA模式

rgba模式是在RGB基础上增加了alpha通道,用来设置颜色的透明度,其中这个通道值的范围是0-1。0代表完全透明,1代表完全不透明

5.HSL模式

HSL模式是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL标准几乎可以包括人类视力所能感知的所有颜色

      h:色调(hue)可以为任意整数。0(或360或-360)表示红色,60表示黄色,120表示绿色,180表示青色,240表示蓝色,300表示洋红(当h值大于360时,实际的值等于该值模360后的值)

    s:饱和度(saturation),就是指颜色的深浅度和鲜艳程度。取0-100%范围的值,其中0表示灰度(没有该颜色),100%表示饱和度最高(颜色最鲜艳)

    l:亮度(lightness),取0-100%范围的值,其中0表示最暗(黑色),100%表示最亮(白色)

6.HSLA模式

HSLA模式是HSL的扩展模式,在HSL的基础上增加一个透明通道alpha来设置透明度

作者:十点差三分yn
来源链接:https://www.cnblogs.com/szy0102/p/15586008.html

标签: css

“CSS的六种颜色模式” 的相关文章

CSS 标签居中

宽高未知 在不知道div或者其他标签宽度的时候,在完成在父级元素中居中. .father { position: relative;...

css总结4:input 去掉外边框,placeholder的字体颜色、字号

css总结4:input 去掉外边框,placeholder的字体颜色、字号

1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;o...

轮廓颜色 | outline-color (Basic User Interface)

  CSS 中文开发手册 轮廓颜色 | outline-color (Basic User Interface) - CSS 中文开发手册...

CSS基础的文字样式

CSS基础的文字样式

1.文字样式 1.文字颜色        color:属性值;        其中...

css3的颜色线性渐变属性:几种颜色之间的平稳过渡(附完整代码)

css3的颜色线性渐变属性:几种颜色之间的平稳过渡(附完整代码)

当下web网页开发的过程中更多在意的是人机交互和用户体验,最直观的体现在网页色彩的多样化上面。本篇文章给大家带来的内容是关于如何使用css3实现颜色线性渐变属性,有一定的参考...

css基础之line-height

css基础之line-height

    什么是line-height(行高)?line-height设置1.5和150%有什么区别?这是一个比较常见的css面试题,带着这个问题往下看。所谓行高是指一...

css实现图片背景颜色变灰变白

css实现图片背景颜色变灰变白

黄色图片为原图 1、下图是图片变为灰色 下图是图片变为白色 css代码实现 /*优惠券图片变为灰色 */ .change{...

html文本边框颜色代码,CSS 文本字体颜色(CSS color)

一、认识CSS 颜色(CSS color)   -   TOP 这里要介绍的是网页设置颜色包含有哪些;网页颜色规定规范。 1、常...

CSS给button添加背景颜色并给button中字体也添加颜色

CSS给button添加背景颜色并给button中字体也添加颜色

CSS可以将设置字体大小和设置字体样式的代码写上 在HTML文件中: <button id="xxx" style="backgroun...

css边框颜色渐变

css边框颜色渐变

先上效果图 <!DOCMENT HTML> <html> <head> <style...