RGB颜色模型解释

RGB颜色模型就是一种描述某个颜色里面有多少红、绿、蓝三原色的量的方法,就像把水彩颜料或油彩颜料混合起来得到某种我们想要的真实色彩一样。

想象下如果你要配出一个纯蓝色,为了实现这个,你就不能把红色和绿色放进这个颜色里。所以我们就把红、绿设置为0%,把绿设置为100%:
 

CSS Code复制内容到剪贴板
  1. rgb(0%, 0%, 100%)  

结果:

但如果你想要的不是蓝色而是紫红色,那该怎么办呢?我们可以通过将100%的红和100%的蓝混合起来得到紫红色:
 

CSS Code复制内容到剪贴板
  1. rgb(100%, 0%, 100%)  

结果:

从基础的色彩理论,我们知道了没有任何颜色就是黑色。所以为了得到黑色我们可以通过设置红、绿、蓝三原色为0%来实现:
 

CSS Code复制内容到剪贴板
  1. rgb(0%, 0%, 0%)  

结果:
如何确定RGB颜色的值

我们可以使用Photoshop的拾色器功能来获取特定色彩的红、绿、蓝三原色的数值,但也有免费的网上工具比如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. }  
标签:
CSS,RGB

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“CSS中对RGB颜色的使用详解”

暂无“CSS中对RGB颜色的使用详解”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。