RGB

三原色,Red, Green,Bule的简称。

在实际前端style中使用的时候是这样的
举个栗子

<div style="background-color: rgb(255,0,0); width: 10px; height: 10px;"></div>

效果就是一个红色的小方块,其中的rgb可以作为颜色的取值工具,或者函数来理解。
变化范围为0~255,三个分别对应三原色的程度,都是零就是没有颜色,没有色彩就是一片黑暗,也就是黑色。对应的全为255则为白色。

不同程度的搭配可以得到以万为单位的颜色种类。

RGBA

多出来的 a 表示的是透明度,和上面的用法一样,但是需要注意的是,其默认值为0,取值范围为0~1之间,可以为小数。

颜色的十六进制表示方法

十六进制 0到9为止使用正常的数字表示,从10开始使用字母A-F分别表示10~15,加上0就是十六个数,当F也就是15再加一的时候重新变为0,上一位进一。
颜色中也可以使用十六进制表示,上面的案例也可以写为

<div style="background-color: #F00; width: 10px; height: 10px;"></div>

同样表示一个红色的小方块。
以 # 开头,后面跟三位或者六位(#FF0000)效果是一致的,但是推荐使用三位表示。要是喜欢也可以使用六位的方式。

十六进制也就是让一位可以表示十六种状态,也就是二的四次方,两位就是相乘的效果,二的八次方,十六乘十六也就是二百五十六,和数字表示的范围是一致的。

前端专题 RGB和RGBA( rgb 和 rgba ),及十六进制 颜色介绍相关推荐

  1. JS十六进制颜色(#fff)与RGB, HSL颜色的相互转换 (实用、赞)

    原文出处:https://www.haorooms.com/post/color_rgb_transform 延伸阅读:用js生成全色系调色盘的算法 前言 今天做了这个需求,就是前端支持rgba设置, ...

  2. js中RGB与十六进制颜色转换

    一.关于颜色的表示 颜色的表示方式不知一种,从photoshop的取色面板就可以看出,如下: 上图共显示了5种颜色的表示方法:HSB,lab,RGB,CMYK与十六进制表示法 在CSS中,我们也经常与 ...

  3. HTML中style/css/color设置颜色值(RGB值)的几种方法(常见颜色和色值)

    一般成体系的前端开发,会有UED给出具体的值,也会统一一个表达方式,所以开发不用关心值的问题. 但日常仍然会遇到很多表达方式的不同,尤其是十进制和十六进制转换太麻烦,所以特别记录下不同的表达方式. 颜 ...

  4. JavaScript随机生成颜色以及十六进制颜色 与RGB颜色值的相互转换

    /*** 随机生成颜色* @return 随机生成的十六进制颜色 */function randomColor(){var colorStr=Math.floor(Math.random()*0xFF ...

  5. JS 处理十六进制颜色渐变算法-输入颜色,输出渐变rgb数组

    html颜色有几种表示方式: 英文单词颜色值:background-color:Blue: 十六进制颜色值:background-color:#FFFFFF:  RGB颜色值三元数字:backgrou ...

  6. 在线RGB和HEX十六进制颜色互转工具

    在线RGB和HEX十六进制颜色互转工具 在线RGB和HEX十六进制颜色互转工具 本工具支持在线RGB和十六进制颜色互转,请直接修改左边的RGB值,对应的十六进制颜色值会自动改变,或者修改16进制值,R ...

  7. 十六进制颜色转换ARGB/RGB

    开发中,我们用的的颜色都是不是 百分之百纯色 ,UI 可能会说,这个颜色(0x FFFFFF) 20%,那个颜色(ff323232)60%,遇到懂得 点技术的 UI 他会直接给你 #66000000 ...

  8. 十六进制颜色和RGB互转

    2019独角兽企业重金招聘Python工程师标准>>> dd //颜色互转 //十六进制颜色值域RGB格式颜色值之间的相互转换//-------------------------- ...

  9. matlab yuy2转rgb,YUY2转RGB(或BGR)

    //YUY2视频转化RGB格式 inline void YUY2_RGB(BYTE *YUY2buff,BYTE *RGBbuff,int dwSize) { //B = 1.164(Y - 16) ...

最新文章

  1. 关于String.Intern()的一道题
  2. linux测试怎样看,linux入门篇:如何查看centos版本
  3. android高级编程实操期末机试试题,《网络高级编程》201001机考试题A
  4. MIT研究生解说数学体系
  5. Java中高维数组或高维矩阵构建及运算
  6. 【算法】剑指 Offer 36. 二叉搜索树与双向链表
  7. 如果孩子早恋是支持还是反对?
  8. mysql from_unixtime(_MySQL 数据库中日期与时间函数 FROM_UNIXTIME(), UNIX_TIME()
  9. 如何保持连接_酒店厨房设备如何保养清洗?
  10. 嵌入式单片机STM32元器件晶振选型参考
  11. php . 和..,?php?和??
  12. 图解eclipse+myelcipse开发EJB
  13. 扇贝有道180925每日一句
  14. 数据清洗----缺失值处理
  15. iOS 知名公司资讯汇集~招聘内推
  16. 24h的编程比赛总结
  17. python -白白入门篇
  18. C语言猜数字游戏及关机程序
  19. 关于若依框架多级菜单的设置
  20. MYSQL5.7(64位)安装包及安装步骤

热门文章

  1. 日本某地发生凶杀案,警察通过排查确定杀人凶手必为4个嫌疑犯中的一个
  2. 中兴管理层换血 5G时代复兴静待爆发
  3. 信息化课堂怎么控屏教学的
  4. 贝加莱使用教程1-创建X20工程和点亮LED灯
  5. ethercat环境搭建(igh安装)
  6. RM-6623云台电机使用心得
  7. YSlow开发:自定义规则集
  8. 推荐个好用的安卓记事本便签软件
  9. SQLHelper助手类【代码】
  10. 微信聊天记录中搜索红包