CSS中对RGB色调的应用详解

日期:2021-01-20 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

RGB色调实体模型解释

RGB色调实体模型便是1种叙述某个色调里边有是多少红、绿、蓝3原色的量的方式,就像把水彩颜料或油彩颜料混和起来获得某种大家要想的真正颜色1样。

想像下假如你要配出1个纯蓝色,以便完成这个,你就不可以把鲜红色和翠绿色放进这个色调里。因此大家就把红、绿设定为0%,把绿设定为100%:
 

CSS Code拷贝內容到剪贴板
  1. rgb(0%, 0%, 100%)  

結果:

但假如你要想的并不是蓝色而是紫鲜红色,那应该怎么办呢?大家能够根据将100%的红和100%的蓝混和起来获得紫鲜红色:
 

CSS Code拷贝內容到剪贴板
  1. rgb(100%, 0%, 100%)  

結果:

从基本的颜色基础理论,大家了解了沒有任何色调便是黑色。因此以便获得黑色大家能够根据设定红、绿、蓝3原色为0%来完成:
 

CSS Code拷贝內容到剪贴板
  1. rgb(0%, 0%, 0%)  

結果:
怎样明确RGB色调的值

大家可使用Photoshop的拾色器作用来获得特殊颜色的红、绿、蓝3原色的标值,但也是有完全免费的在网上专用工具例如Color Slider和The RGB Color Calculator。

w3school上对RGB色调的解释:

RGB 色调

全部访问器都适用 RGB 色调值。

RGB 色调值是这样要求的:rgb(red, green, blue)。每一个主要参数 (red、green 和 blue) 界定色调的强度,能够是介于 0 与 255 之间的整数金额,或是百分比值(从 0% 到 100%)。

举例说,rgb(0,0,255) 值显示信息为蓝色,这是由于 blue 主要参数被设定为最高值(255),而别的被设定为 0。

一样地,下面的值界定了同样的色调:rgb(0,0,255) 和 rgb(0%,0%,100%)。
案例

CSS Code拷贝內容到剪贴板
  1. p   
  2. {   
  3. background-color:rgb(255,0,0);   
  4. }