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

news2024/9/24 11:27:28

一、什么是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.coloradmin.cn/o/430931.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Unity编写Shader基本知识

返回目录 大家好,我是阿赵。 这里通过手写一个最简单的shader,来介绍一下在Unity里面编写Shader的一些基础知识。 一、Shader基本结构 新建一个shader,把里面的内容都删掉,然后输入下面这些内容 shader "testShader"…

GeoIP2:检验IP地址位置识别的实用性

文章目录前言安装环境软件版本说明libmaxminddb 环境安装ngx_http_geoip2_module 安装GeoLite2 数据库下载定时更新测试定位安装模块应用场景重点仅限中国访问,国外禁止仅限中国访问,但放开国外部分IP不同国家展示不同页面IP地址解析总结前言 GeoIP2是一…

我好像发现了PMP通关密码,这14页纸直接背!

备考PMP的宝子们一定要用上这份通关口诀哦! 一周就能背完的PMP考试技巧只有14页纸,共分成了4大模块,完全不用担心看不懂,需要的朋友可以戳下面的卡片在群文件下载,直接打印出来就能背哦,没有任何套路&…

Java每日一练(20230415)

目录 1. 扰乱字符串 🌟🌟🌟 2. 单词拆分 🌟🌟 3. 模拟计算器 ※ 🌟 每日一练刷题专栏 🌟 Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 扰乱字符…

Improved Knowledge Distillation via Teacher Assistant小陈读paper系列

算是经典了吧哈哈 1.他们发现了学生性能下降了,什么时候呢?就是老师模型和学生模型差的太多的时候有了很大gap(一个学生不能请一个维度跨越巨大的老师)(老师可以有效地将其知识转移到一定大小的学生,而不是…

Java导入导出

目录前端Apache POI引依赖导入导出工具类EasyExcel引依赖读Excel指定列名多个Sheet使用提供的转换器或自定义格式转换器对读取到的数据进行格式转换行头即列名写Excel指定导出列复杂头写入日期、数字或自定义格式转换对导出数据进行处理自定义样式合并单元格动态列表头自定义拦…

关于el-input-number 计数器 只能点击一次,之后点击没有效果

哈喽 大家好啊,今天使用计数器发现,点击一次了后就显示不了了 这里怎么点击都点击不了,只能点击一次 然后我发现我代码是这样写的: gitem是一个对象 gitem.saleNum gitem.reduceQuantity || 1;// 剩余可以编辑的数量 因为我这…

【SSL】ssl证书简介、ssl证书生成工具与ssl证书生成步骤

ssl证书简介、ssl证书生成工具与ssl证书生成步骤一、ssl证书是什么?二、ssl证书生成工具有哪些?2.1、工具一:CFSSL2.2、工具二:OpenSSL2.3、工具三:XCA三、ssl证书有什么用?四、ssl证书生成步骤4.1 步骤1&a…

01-SpringBoot入门应用

入门程序:使用SpringBoot开发一个web应用,浏览器发起请求/hello后,给浏览器返回字符串“Hello World ~” 1. 创建springboot工程,并勾选web开发相关依赖 由于我的idea没有Spring Initializr选项,所以我选择使用Maven…

ChatGPT常见术语清单;大厂ChatGPT混战汇总;提示工程技巧完全指南(中译);真机会VS假机会 | ShowMeAI日报

👀日报&周刊合集 | 🎡生产力工具与行业应用大全 | 🧡 点赞关注评论拜托啦! 🤖 『OpenAI/ChatGPT 高频常见词解释清单』一份速查表搞懂最热门 AI 术语 OpenAI 和 ChatGPT 的爆火,以超高的频率将大量AI术…

ISE的仿真库编译步骤

Modelsim10.4与ISE14.7联合仿真 1、指定modelsim的安装位置 2、编译安装仿真库 (1)编译仿真库 点击“开始菜单 -> Xilinx ISE Design Suite 13.2 -> ISE Design Tools -> 64-bit Tools -> Simulation Library Compilation Wizard”&#xff…

Node 会话控制

文章目录Node 会话控制概述cookie运行流程设置cookie获取cookie删除cookiesession运行流程设置session获取session删除sessionsession和cookie的区别token运行流程JWT创建token校验tokenNode 会话控制 概述 所谓会话控制就是 对会话进行控制。 HTTP 是一种无状态的协议&…

DAY 38 LINUX iptables防火墙

所谓防火墙也称之为防护墙,它是一种位于内部网络与外部网络之间的网络安全系统。一项信息安全的防护系统。按照给定的规则,允许或者限制网络报文通过 硬件防⽕墙:通过硬件和软件的组合,基于硬件的防⽕墙保护整个内部网络安全。&a…

如何使用Win10搭建我的世界Minecraft服务器

简单几步在windwos搭建我的世界服务器,并通过cpolar工具将本地服务暴露到公网连接 1. Java环境搭建 以windows10系统为例,配置java环境,搭建我的世界服务器,下载最新版java版本 Java Downloads | Oracle 选择exe文件,下载完成后双击安装包…

JVM程序计数器到底存储的是当前执行的指令地址,还是下一条指令的地址

JVM程序计数器到底存储的是当前执行的指令地址,还是下一条指令的地址? 说法一:chatgpt 程序计数器(Program Counter,PC)存储的是下一条指令的地址。在CPU执行指令时,程序计数器始终跟踪着当前已…

【机器人仿真Webots教程】-Webots安装

Webots安装 文章目录Webots安装1. Webots简介2. Webots安装2.1 系统要求2.2 验证显卡驱动2.3 安装3. Webots仿真3.1 world文件3.2 Controller文件3.3 Supervisor Controller4. 启动方式1. Webots简介 webots是一个开源3D移动机器人仿真框架。其为Cyberbotics公司旗下研发开源框…

Fastjson反序列化漏洞复现(实战案例)

本文转载于:https://blog.csdn.net/jinzezhi/article/details/124274123 漏洞介绍 FastJson在解析json的过程中,支持使用autoType来实例化某一个具体的类,并调用该类的set/get方法来访问属性。通过查找代码中相关的方法,即可构造出…

【Python_Opencv图像处理框架】图像基本操作+90bb5729-b33a-4e82-a0d9-faa3e5cbf621

写在前面 很幸运能选择Python语言进行学习,这是有关Opencv的图像处理的第一篇文章,讲解了有关图像处理的一些基础操作,作为初学者,我尽己所能,但仍会存在疏漏的地方,希望各位看官不吝指正❤️ 写在中间 1…

unity物体运动经过特定点并绘出轨迹

经过线如果有圆滑可以参考 Unity物体运动时画出轨迹_天人合一peng的博客-CSDN博客 并修改里面的数值轨迹会有变化 float angle Mathf.Min(1, Vector3.Distance(this.transform.position, targetPos) / distanceToTarget) * 45; this.transform.rotation this.t…

App灰度发布实现路径之小程序容器

灰度从字面意思理解就是存在于黑与白之间的一个平滑过渡的区域,所以说对于互联网产品来说,上线和未上线就是黑与白之分,而实现未上线功能平稳过渡的一种方式就叫做灰度发布。 灰度发布将新版本应用程序推送给一部分用户进行测试和反馈的过程…