当前位置: 首页 > news >正文

前端学习:HTML颜色(什么是RGB、HEX、HSL)

一、什么是RGB、HEX、HSL?

 

 无论是RGB、HEX、HSL,它们的作用只有一个:用数字表达出一种颜色。

1.RGB

RGB通过输入的数值,将红色、绿色和蓝色的光源以一定的量混合在一起,形成颜色。

软件中通常让你输入Red、Green、Bule对应的三个整数的数值,且范围必须在0-255之间。所以按道理来说通过调节RGB的值,可以得到256*256*256=16777216种颜色!

以下表列出一些常用颜色的数值:

只要三色值相等即可,值越接近255,就越接近白色,反之亦然

颜色RGB
红色(255, 0, 0)
橙色(255, 128, 0)
黄色(255, 255, 0)
绿色(0, 255, 0)
蓝色(0, 0, 255)
紫色(170, 0, 255)
黑色(0, 0, 0)
白色(255, 255, 255)
灰色(128, 128, 128)

 补充

 

有些时候,除了Red, Green, Blue以外,还会有一个需要设置的数值,那就是Alpha(不透明度)。这时候我们把它们叫做RGBA,Alpha通常可有可无。Alpha值通常在0.0与1.0之间,1.0表示完全不透明,0.0表示完全透明。

2.HEX

HEX原理和RGB相似,都是用Red、Green、Bule相混合所产生的颜色,只不过换成了十六进制。

HEX格式:#rrggbb

3.HSL

HSL表示色相(Hue)、饱和度(Saturation)、亮度(Lightness)。结构是:hsl(hue, saturation%, lightness%)。其中饱和度和亮度是百分比,不是数值。

二、颜色值

颜色由十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00),最大值255(十六进制#FF)。

 三、颜色名

仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

如果需要使用其他的颜色,需要使用十六进制的颜色值。

下面是HTML官网给出的颜色名部分列表(侵权删):

四、Web安全色

数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。

最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。

下面是HTML官网给出的216跨平台色(侵权删):

http://www.lryc.cn/news/59894.html

相关文章:

  • zookeeper + kafka集群搭建详解
  • 【数据结构与算法】 - 双向链表 - 详细实现思路及代码
  • 面试官在线点评4份留学生简历! 这些坑你中了几个?如何写项目描述才能被大厂发面试?转专业简历该咋写 | 还有优秀简历展示!
  • 一觉醒后ChatGPT 被淘汰了
  • spring框架的事务
  • Spring配置数据源
  • 【前端之旅】Vue入门笔记
  • WPF教程(二)--Application WPF程序启动方式
  • snmp 自定义子代理mib库
  • 一文说透安全沙箱技术
  • Java多线程基础面试总结(二)
  • NS32F407VGT6 NS32F407VET6软硬件通用STM32F407VGT6 407VET6
  • Openstack: network: ovs: dpif/show 实例分析:interface
  • 必要的项目管理软件因素
  • 大学刚毕业,用10000小时,走进字节跳动拿了offer
  • docker 安装 redis
  • Ceph常见问题
  • Android---Jetpack之Paging
  • gensim.models.word2vec() 参数详解
  • 光栅和矢量图像处理SDK:Graphics Mill 11.7Crack
  • 阿里云的客服 锻炼你心性的 一种方式 !!!
  • Linux常用的网络命令有哪些?快速入门!
  • PMP认证价值在哪?这个证书有什么用?
  • 一条更新语句的执行流程又是怎样的呢?
  • promise异步编程指南
  • 20230411----重返学习-网易云音乐首页案例-git远程仓库
  • Ansys Zemax | 模拟 AR 系统中的全息光波导:第二部分
  • 常用Git命令
  • 新手程序员被职场PUA的时候正确的化解姿势
  • LINUX_kali学习笔记