色彩调配在线测试

CSS3 RGBA 色彩代码

rgb(255,255,0,0.4);r红-g绿-b蓝
rgba(255,255,0,0.4);r红-g绿-b蓝-a透明
hsl(30, 50%, 80%) //“H:色相”，“S：饱和度”，“L：亮度”;
hsla(30, 50%, 80%,0.5) //“H:色相”，“S：饱和度”，“L：亮度”,A:透明度;

css3属性详解

前面我们一起探讨了一下CSS3 Gradient（css3 渐变），今天我们一起来探讨一下CSS3中的RGBA。RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需要讨论的RGBA。如果需要更详细的解说，大家就跟着我一起往下看吧。

语法:

R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间

[色彩属性]——HSL

hsl(30, 50%, 80%) //“H:色相”，“S：饱和度”，“L：亮度”;

HSL给我们带来了一个更直观的颜色控制，我们时常需要让一个颜色比另一个颜色更暗一点可者说更亮一点。比如说“a:hover”状态下我们需要把一个颜色变暗一点，那么使用“HSL”是非常方便的，反而我们使用十六进制那就需要更多的时间调试。而这个“HSL”他只是一个简单的数量变化。

“HSL”所表示的是“H:色相”，“S：饱和度”，“L：亮度”。色相是在色盘上的颜色（见下图），颜色的选择是使用饱和度：“0度是红色”，“120度为绿色”和“240度为蓝色”。

image

而且我们同时可以使用不同的亮度来控制这个颜色。其中“0%”表示的是一个灰度，不使用任何的色彩，而“100%”是指在充分使用的一个颜色。我们一起来看一个具体的使用：

     .elm {
      background: hsl(30, 50%, 80%);
    }

如果我们想把一个颜色变暗或者变量，我们只需要改变最后一个亮度参数就可以。

HSL的扩展阅读：

HSL Colors
HSL color selector using HTML5 and CSS
HSL: light vs saturation
color value
HSL(Hue-Saturation-Lightness)
Using Colors in CSS
CSS3 HSL & HSLA
HSL color Picker
HSL color picker

[色彩属性]——HSLA

hsla(30, 50%, 80%,0.5) //“H:色相”，“S：饱和度”，“L：亮度”,A:透明度;
这个“HSLA”其实很简单的，就像“RGBA”和“RGB”的关系一样。此处的“HSLA”就是在“HSL”的基础上增加了一个透明度的通道。

     .elm {
      background: hsla(30, 50%, 80%, 0.5);
    }

上面的实例就是在前面展示的实例基础中增加了一个透度明为“50%”的设置。

HSLA的扩展阅读

HSLA(Hue-Saturation-Lightness-Alpha)
RGBa & HSLa CSS Color
HSLA - Color with Transparency
Coding Colors Easily Using CSS3 hsl() Notation
An Introduction to HSL and HSLa
Colors in CSS3
Yay for HSLa
RGBa & HSLa CSS Generator for Internet Explorer
HSLA Explorer

当然。“HSL”和“HSLA”只支持在较新版本的“Firefox”，“Opear”，“Safari”，“Chrome”。而在“IE”浏览器下现在是无法解决的。而“Opacity”和“RGBA”我们在“IE”浏览器下还可以使用滤镜来实现。但是我相信总有一天，这些属性在各浏览器下都能正常运行，因为技述总是一天比一天强大的。那么我们就一起期待这一天的到来。有了这些新技术，给我们Web制作带来无穷的方便与好处。

取值：

 ：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；

 ：Saturation(饱和度)。 取值为0%到100%之间的值；

 ：Lightness(亮度)。 取值为0%到100%之间的值；

 ：alpha(透明度)。 取值在0到1之间；

说明：

RGB色彩模式（也翻译为“红绿蓝”，比较少用）是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。

RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数，取值在0~1之间，不可为负值。

浏览器的兼容性：

image

如果庞统说rgba是制作透明色（透明背景色、透明边框色、透明前景色等），大家不由会想起opacity 这个东西。他在我们CSS2中制作背景色通常用到，可是要用他来制作边框色或都说前景色的话，那他就只能在边上站着了，有心无力呀。

现在我们先来看一个rgba和opacity的对比实例
HTML代码：


  Opacity效果
  
   100%
   80%
   60%
   40%
   20%
   0
  
  CSS3的RGBA效果
  
   1
   0.8
   0.6
   0.4
   0.2
   0

我们分别给这两上ul中的li应用相关样式，在li.opacity中我用使用CSS2中的opacity而在li.rgba中我们使用CSS3的rgba新属性

Opacity样式

  li.opacity{
    float: left;
    width: 50px;
    height: 50px;
  }
  li.opacity1 {
     background: rgb(255,255,0);
     opacity: 1;
     filter:alpha(opacity=100);
  }
  li.opacity2 {
    background: rgb(255,255,0);
    opacity: 0.8;
    filter:alpha(opacity=80);
  }
  li.opacity3 {
    background: rgb(255,255,0);
    opacity: 0.6;
    filter:alpha(opacity=60);
  }
  li.opacity4 {
    background: rgb(255,255,0);
    opacity: 0.4;
    filter:alpha(opacity=40);
  }
  li.opacity5 {
    background: rgb(255,255,0);
    opacity: 0.2;
    filter:alpha(opacity=20);
  }
  li.opacity6 {
    background: rgb(255,255,0);
    opacity: 0;
    filter:alpha(opacity=0);
  }

RGBA样式

  li.rgba {
    float: left;
    width: 50px;
    height: 50px;
  }
  li.rgba1 {
    background: rgba(255,255,0,1);
  }
  li.rgba2 {
    background: rgba(255,255,0,0.8);
  }
  li.rgba3 {
    background: rgba(255,255,0,0.6);
  }
  li.rgba4 {
    background: rgba(255,255,0,0.4);
  }
  li.rgba5 {
    background: rgba(255,255,0,0.2);
  }
  li.rgba6 {
    background: rgba(255,255,0,0);
  }

image.png

css rgba色彩调配

CSS3 RGBA 色彩代码

[色彩属性]——HSL

[色彩属性]——HSLA

Opacity样式

RGBA样式

你可能感兴趣的:(css rgba色彩调配)