当前位置: 首页 > 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跨平台色(侵权删):

相关文章:

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

一、什么是RGB、HEX、HSL? 无论是RGB、HEX、HSL,它们的作用只有一个:用数字表达出一种颜色。 1.RGB RGB通过输入的数值,将红色、绿色和蓝色的光源以一定的量混合在一起,形成颜色。 软件中通常让你输入Red、Green、B…...

zookeeper + kafka集群搭建详解

目录 1.消息队列介绍 1.为什么需要消息队列 (MO) 2.使用消息队列的好处 3.消息队列的两种模式 2.Kafka相关介绍 1.Kafka定义 2.Kafka简介 3. Kafka的特性 3.Kafka系统架构 1. Broker(服务器) 2. Topic(一个队…...

【数据结构与算法】 - 双向链表 - 详细实现思路及代码

目录 一、概述 二、双向链表 三、双向链表实现步骤  📌3.1 C语言定义双向链表结点  📌3.2 双向链表初始化  📌3.3 双向链表插入数据  📌3.4 双向链表删除数据  📌3.5 双向链表查找数据  📌3.6 双向链…...

面试官在线点评4份留学生简历! 这些坑你中了几个?如何写项目描述才能被大厂发面试?转专业简历该咋写 | 还有优秀简历展示!

我们给大家展示一下 从材料的准备 也就是说到底包含哪些具体的项目 为什么说这些项目是不错的 第二呢就是说在陈述上 在整个这个简历的结构 他的完备性他的准确性 他的正确性 以及最后他的具体的这种项目的描述 那讲完了这个好的简历呢 我们另外搜集了几份简历 那这些简历呢其实…...

一觉醒后ChatGPT 被淘汰了

OpenAI 的 Andrej Karpathy 都大力宣传,认为 AutoGPT 是 prompt 工程的下一个前沿。 近日,AI 界貌似出现了一种新的趋势:自主人工智能。 这不是空穴来风,最近一个名为 AutoGPT 的研究开始走进大众视野。特斯拉前 AI 总监、刚刚回归…...

spring框架的事务

1.什么是事务? 事务:是数据库操作的最小工作单元,是作为单个逻辑工作单元执行的一系列操作;这些操作作为一个整体一起向系统提交,要么都执行、要么都不执行;事务是一组不可再分割的操作集合(工作逻辑单元…...

Spring配置数据源

Spring配置数据源数据源的作用环境准备手动创建c3p0数据源封装抽取关键信息,手动创建c3p0数据源使用Spring容器配置数据源数据源的作用 数据源(连接池)是提高程序性能如出现的 事先实例化数据源,初始化部分连接资源 使用连接资源时从数据源中获取 使用完…...

【前端之旅】Vue入门笔记

一名软件工程专业学生的前端之旅,记录自己对三件套(HTML、CSS、JavaScript)、Jquery、Ajax、Axios、Bootstrap、Node.js、Vue、小程序开发(Uniapp)以及各种UI组件库、前端框架的学习。 【前端之旅】Web基础与开发工具 【前端之旅】手把手教你安装VS Code并附上超实用插件…...

WPF教程(二)--Application WPF程序启动方式

1.Application介绍 WPF与WinForm一样有一个 Application对象来进行一些全局的行为和操作,并且每个 Domain (应用程序域)中仅且只有一个 Application 实例存在。和 WinForm 不同的是WPF Application默认由两部分组成 : App.xaml 和 App.xaml.…...

snmp 自定义子代理mib库

测试环境:centos8 1、安装软件 yum install -y net-snmp net-snmp-utils yum install -y net-snmp-perl net-snmp-devel net-snmp-libs 2、创建用户 net-snmp-create-v3-user 输入用户名 soft 输入密码 123456 输入密码 654321 service snmpd restart 3、创建…...

一文说透安全沙箱技术

在数字经济的东风中,数据安全至关重要。目前已经颁布了包括《数据安全法》、《个人信息保护法》和《数据安全管理办法》在内的国家政策,以促进整个数据要素的发展。 而近年来,随着移动应用程序的普及和小程序技术的崛起,安全沙箱…...

Java多线程基础面试总结(二)

创建三种线程的方式对比 使用实现Runnable、Callable接口的方式创建多线程。 优势 Java的设计是单继承的设计,如果使用继承Thread的方式实现多线程,则不能继承其他的类,而如果使用实现Runnable接口或Callable接口的方式实现多线程&#xf…...

NS32F407VGT6 NS32F407VET6软硬件通用STM32F407VGT6 407VET6

NS32F407VGT6 NS32F407VET6 器件基于高性能的 ARM Cortex-M4 32 位 RISC 内核,工作频率高达 168MHz 。 Cortex-M4 内核带有单精度浮点运算单元 (FPU) ,支持所有 ARM 单精度数据处理指令和数据类型。它还 具有一组 DSP 指令和提高应用安全性的一…...

Openstack: network: ovs: dpif/show 实例分析:interface

[TOC 实例 [cbis-adminovercloud–13 (overcloudrc) ~]$ sudo ovs-appctl dpif/show systemovs-system: hit:75198007884 missed:109924265 br-ex: br-ex 65534/3: (internal) ,65534 是port number; OpenFlow port number; 3 是 ofp_port_to_odp_port(ofproto, o…...

必要的项目管理软件因素

什么样的项目管理软件好?对于一个项目团队来说,从项目开始到项目结束,需要多个部门的配合。每个成员可能会参与一个以上的项目,这通常需要并行的多个项目。据介绍,国外90%以上的项目是用软件管理的,而中国只…...

大学刚毕业,用10000小时,走进字节跳动拿了offer

前言: 没有绝对的天才,只有持续不断的付出。对于我们每一个平凡人来说,改变命运只能依靠努力幸运,但如果你不够幸运,那就只能拉高努力的占比。 2020年7月,我有幸成为了字节跳动的一名测试开发&#xff0c…...

docker 安装 redis

搜索镜像 docker search redis 拉取最新版本 Docker pull redis Docker挂载配置文件 docker run --restartalways --log-opt max-size100m --log-opt max-file2 -p 6379:6379 --name myredis -v /opt/myredis/redis.conf:/etc/redis/redis.conf -v /opt/myredis/data:/d…...

Ceph常见问题

1. CephFS问题诊断 1.1 无法创建 创建新CephFS报错Error EINVAL: pool ‘rbd-ssd’ already contains some objects. Use an empty pool instead,解决办法: ceph fs new cephfs rbd-ssd rbd-hdd --force1.2 mds.0 is damaged 断电后出现此问题。MDS进…...

Android---Jetpack之Paging

目录 Paging 组件的意思 Paging 支持的架构类型 Paging 的工作原理 PositionalDataSource PagekeyedDataSource ItemKeyedDataSource BoundaryCallback Paging 组件的意思 分页加载是在应用程序开发过程中十分常见的需求,Paging 就是 Google 为了方便 Andr…...

gensim.models.word2vec() 参数详解

1. Word2vec简介 Word2vec是一个用来产生词向量的模型。是一个将单词转换成向量形式的工具。 通过转换,可以把对文本内容的处理简化为向量空间中的向量运算,计算出向量空间上的相似度,来表示文本语义上的相似度。 2.Word2vec参数详解 class…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求&#xff…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能

指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...

负载均衡器》》LVS、Nginx、HAproxy 区别

虚拟主机 先4,后7...

命令行关闭Windows防火墙

命令行关闭Windows防火墙 引言一、防火墙:被低估的"智能安检员"二、优先尝试!90%问题无需关闭防火墙方案1:程序白名单(解决软件误拦截)方案2:开放特定端口(解决网游/开发端口不通)三、命令行极速关闭方案方法一:PowerShell(推荐Win10/11)​方法二:CMD命令…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾: 在上一篇《React入门第一步》中,我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目,并修改了App.jsx组件,让页面显示出我们想要的文字。但是,那个页面是“死”的,它只是静态…...