前端学习5：HTML颜色（什么是RGB、HEX、HSL）

已于 2023-05-21 14:25:18 修改
阅读量3k 收藏 8
点赞数 1
分类专栏： HTML 文章标签： 学习 html 前端
于 2023-04-11 16:46:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62029216/article/details/130086590
版权
本文介绍了HTML中颜色表示的三种方式：RGB、HEX和HSL。RGB通过红绿蓝三种颜色的组合创建颜色，HEX使用十六进制表示颜色，而HSL则涉及色相、饱和度和亮度。文章还提到了颜色值、颜色名以及Web安全色的概念。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

一、什么是RGB、HEX、HSL？

1.RGB

 补充

2.HEX

3.HSL

二、颜色值

 三、颜色名

四、Web安全色

一、什么是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.47元/天 解锁文章
【超级常用RGB颜色对照表（适用于HTML等前端开发中）】附：如何成长为一名合格的前端开发工程师？| 前端颜色实战
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
12-23 1530
拿走不谢！ 网上资料良莠不齐，下面这个表中多个颜色的RGB取值以及颜色代码在html、js、css等前端开发中还是比较常用滴！
HTML 颜色名：网页设计的调色板
wjs2024的博客
06-16 613
HTML 颜色名是一组预定义的颜色名称，可以直接在 HTML 和 CSS 代码中使用。这些颜色名通常是基于颜色的英文单词，如 "red"、"blue"、"green" 等。HTML 颜色名共有 140 个标准颜色，这些颜色覆盖了从基本颜色到更复杂的色调。
色值HEX码及与RGB色对照
02-06
色值HEX码及与RGB色对照
【HTML 基础教程】HTML 颜色值
最新发布
书成日记，日记便成了一本书
04-02 915
颜色由红(R)、绿(G)、蓝(B)组成。
hex和rgb色值转换-色彩加深减淡
分享互联网的有趣知识~
12-22 4616
我们在做主题订制的时候，一般都会选一种主题色，该颜色以主题色为主导，颜色依次变浅，用于做主题色下的关联色统一，例如文字激活、激活的背景色、菜单背景色等，我门将在这篇文章讨论色值转换的问题。
RGB 转 Hex 和 Hex 转 RGB
总结，交流，记录，成长
06-03 462
hex转rgb颜色 const hexToRgb = hex => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16).toString(), g: parseInt(result[2], 16).toString(), b: parseInt(result[
htmlcss颜色画板
q412406513的博客
06-26 293
【代码】htmlcss颜色画板。
记一次HEX和RGB互换算法的思考及应用
趣谈前端
08-19 1647
由于笔者最近在开发可视化平台,所以对动态编辑器这块做了一段时间的研究, 发现其中有个小模块的知识点比较有意思,所以在这里分享一下.作为前端工程师, 我们平时在对接设计稿的时候, 是不是经...
stylelint-color-format：自动化HEX转RGB/HSL的Stylelint插件
资源摘要信息:"stylelint-color-format是一个专门为Stylelint设计的插件，其核心功能是将CSS样式中的HEX颜色格式转换成RGB或HSL格式。这一插件对前端开发者在样式文件中维护统一的颜色表示法提供了便利，同时也支持...
PostCSS颜色格式转换神器：一插件搞定HEX, RGB, HSL及关键字
资源摘要信息:"postcss-color-converter是一个PostCSS插件，它可以实现HEX、RGB、HSL和CSS颜色关键字之间的互相转换。PostCSS是一个处理CSS的强大工具，它允许开发者使用JavaScript插件来转换样式表。postcss-color-...
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
薇眠winter的博客
08-03 1311
W3school：CSS基础：CSS注释、颜色（颜色、RGB、HEX、HSL）、背景（背景、背景图像、背景重复、背景附着、简写背景属性）
屏幕中获取HTML、HEX、RGB颜色值软件
01-23
屏幕中获取HTML、HEX、RGB颜色值软件非常实用的一个前端工具，一直在用。
HTML背景颜色板
a420344的专栏
05-11 1233
保存HTML背景颜色板 <tr><td colspan="4" style="color:blue\;background-color:Aquamarine\;font-size:30px">
html标题显示hex,HTML特殊字符显示, HTML实体,HTML Entity, HTML Entity Code, HTML Css Code ,HTML Hex Code...
weixin_34847198的博客
06-17 4450
在设计和开发网页时，需要用到一些特殊符号，比如：?，?，℃，?，? 等等，有些上网找半天不一定能找到。HTML特殊符号编码有很多种 unicode、十六进位码(hex code)，html 实体编码(entity code)，还有我们熟知的html 实体(html entity) ，为了在css content属性中使用，还有对应的 css code。你可以在HTML标签中直接插入十六进位码(he...
【前端】使用javascript开发一个在线RGB颜色转换
小5聊的博客
01-10 3108
目前已经有很多网页版在线小工具，之前很多窗体化的工具也逐渐网页化，比如：PS画图软件，也都能直接网页化进行设计， 网页真的是无所不能了。 由于自己实际项目经常会用到颜色转换，所以直接自己开发个简单版的在线颜色转换小工具。
RGB颜色大全（HEX、对照表、Matplotlib、plt、好看的颜色）
热门推荐
Le0v1n 的博客
12-14 2万+
KeyWords：HEX、对照表、Matplotlib、plt、好看的颜色
RGB、HSL、Hex网页色彩码，看完这篇全懂了
web前端开发
10-18 2012
来源 | https://juejin.im/post/6844903845366071310网页使用到的色彩标示方法中，从早时期大家都在用的16进位码（#000000）、RGB色值标示...
RGB、Hex等颜色的匹配
Gfqwy2021
09-24 2608
源于百度百科 英文代码形像颜色HEX格式RGB格式LightPink 浅粉色 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 猩红 #DC143C 220,20,60 LavenderBlush 脸红的淡紫色 #FFF0F5 255,240,245 PaleVioletRed 苍白的紫罗兰红色 #DB7093 219,112,14...
HTML 的颜色表示, 理解 RGB，HEX，HSL，RGBA 和 HSLA
2402_87605821的博客
09-24 2343
理解RGB, HEX, HSL, RGBA, and HSLA
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值