深圳网站建设明细报价表,wordpress.html,关于公司做网站供比价报告,营销型网站建设套餐欢迎来到《小5讲堂》 大家好#xff0c;我是全栈小5。 这是是《前端》序列文章#xff0c;每篇文章将以博主理解的角度展开讲解#xff0c; 特别是针对知识点的概念进行叙说#xff0c;大部分文章将会对这些概念进行实际例子验证#xff0c;以此达到加深对知识点的理解和掌… 欢迎来到《小5讲堂》 大家好我是全栈小5。 这是是《前端》序列文章每篇文章将以博主理解的角度展开讲解 特别是针对知识点的概念进行叙说大部分文章将会对这些概念进行实际例子验证以此达到加深对知识点的理解和掌握。 温馨提示博主能力有限理解水平有限若有不对之处望指正 目录 背景RGB转HEX效果代码 HEX转RGB效果代码 什么是RGBRGB原理HEX16 背景
目前已经有很多网页版在线小工具之前很多窗体化的工具也逐渐网页化比如PS画图软件也都能直接网页化进行设计 网页真的是无所不能了。 由于自己实际项目经常会用到颜色转换所以直接自己开发个简单版的在线颜色转换小工具。
RGB转HEX
效果 代码
html
headmeta charsetutf-8 /title颜色在线转换/titlestyle typetext/css/style
/head
body!----div styledisplay: flex; margin-top: 100px;div styledisplay:flex;width:260px;div stylewidth:60px;height: 35px;line-height: 35px;text-align: center;background: #ccc;spanRGB/span/divdiv stylewidth:200px;height: 33px;line-height: 33px;border: 1px solid #ccc;input idtxtRgb placeholder请输入RGB值 如:255,255,255 stylewidth:100%;padding: 7px 7px;outline: none;background: none;border: none;/div/divdiv styleheight: 35px; line-height: 35px;padding:0 10px;span转为/span/divdiv styledisplay:flex;width:260px;div stylewidth:60px;height: 35px;line-height: 35px;text-align: center;background: #ccc;spanHEX/span/divdiv stylewidth:200px;height: 33px;line-height: 33px;border: 1px solid #ccc;input idtxtHex readonlyreadonly stylewidth:100%;padding: 7px 7px;outline: none;background: none;border: none;/div/div/div/body
/htmlscript typetext/javascriptvar rgb document.getElementById(txtRgb);var hex document.getElementById(txtHex);rgb.onkeyup function () {if (rgb.value rgb.value.split(,).length 3) {var hexValue rgbToHex(rgb( rgb.value ));hex.value hexValue;}}//function rgbToHex(rgb) {// 使用正则表达式提取出数字部分var rgbArray rgb.match(/\d/g);// 将 RGB 分量转换为十六进制并补零var r parseInt(rgbArray[0]).toString(16).padStart(2, 0);var g parseInt(rgbArray[1]).toString(16).padStart(2, 0);var b parseInt(rgbArray[2]).toString(16).padStart(2, 0);// 将结果拼接为 HEX 格式var hex # r g b;return hex;}/scriptHEX转RGB
效果 代码
html
headmeta charsetutf-8 /title颜色在线转换/titlestyle typetext/css/style
/head
body!----div styledisplay: flex; margin-top: 50px;div styledisplay: flex; width: 260px;div stylewidth:60px;height: 35px;line-height: 35px;text-align: center;background: #ccc;spanHEX/span/divdiv stylewidth: 200px; height: 33px; line-height: 33px; border: 1px solid #ccc;input idtxtHex2 placeholder请输入HEX值 如:#FFFFFF stylewidth:100%;padding: 7px 7px;outline: none;background: none;border: none;/div/divdiv styleheight: 35px; line-height: 35px;padding:0 10px;span转为/span/divdiv styledisplay: flex; width: 260px;div stylewidth:60px;height: 35px;line-height: 35px;text-align: center;background: #ccc;spanRGB/span/divdiv stylewidth: 200px; height: 33px; line-height: 33px; border: 1px solid #ccc;input idtxtRgb2 readonlyreadonly stylewidth:100%;padding: 7px 7px;outline: none;background: none;border: none;/div/div/div/body
/htmlscript typetext/javascriptvar hex2 document.getElementById(txtHex2);var rgb2 document.getElementById(txtRgb2);hex2.onkeyup function () {if (hex2.value.length 7) {var rgbValue hexToRgb(hex2.value);rgb2.value rgbValue;}}//function hexToRgb(hex) {// 去掉 # 号并分割成 r、g、b 三个部分var hexValue hex.replace(#, );var r parseInt(hexValue.substring(0, 2), 16);var g parseInt(hexValue.substring(2, 4), 16);var b parseInt(hexValue.substring(4, 6), 16);// 返回 RGB 格式字符串var rgb rgb( r , g , b );return rgb;}/script什么是RGB
RGB红绿蓝是一种让我们能够创造出各种色彩的加法色彩模式。 在 RGB 模式下颜色是通过混合三种红、绿、蓝的颜色成分来实现的。 这三种颜色可以以不同的深浅程度混合在一起从而形成数百万种不同的颜色。 在前端开发中RGB 经常被用来指定网页或者应用程序中的颜色。
RGB原理
RGB红绿蓝颜色模型是一种加法颜色混合模式通过调节三种颜色的亮度来实现。 每种颜色有一个亮度范围从 0 到 2550 表示完全暗255 表示最亮。通过调节红色、绿色和蓝色的值可以创建出所有的其他颜色。 当三种原色的值都为最小值时即为0得到的是黑色。当三种原色的值都为最大值时即为255得到的是白色。 通过增加或减少其中一种或多种原色的值可以得到任意其他颜色。
例如红色可以通过将红色分量设置为最大值 255而将绿色和蓝色分量设置为最小值 0 来创建。 类似地绿色和蓝色都可以分别单独设置为最大值来得到纯绿和纯蓝颜色。
在 CSS 中颜色值可以使用 RGB 表示 例如 rgb(255, 0, 0) 表示纯红色。 第一个参数是红色分量值 第二个参数是绿色分量值 第三个参数是蓝色分量值。 通过调整这些分量的值可以获得所需的颜色。
HEX16
十六进制英文名称Hexadecimal 十六进制颜色值HEX16是指由六个十六进制数字组成的颜色编码用于表示 RGB 颜色空间中的颜色。 每个十六进制数字可以取 0 到 9 的数字以及 A 到 F 的字母表示 16 种可能的值因此称为十六进制值。
在 HTML 和 CSS 中常用的表示十六进制颜色值的方法是在 “#” 符号后面附加六个十六进制字符。 例如红色的十六进制颜色值是 #FF0000其中前两个字符表示红色分量的值后面的四个字符分别表示绿色和蓝色分量的值。 通过将每个分量的十六进制值转换为十进制即从 16 进制到 10 进制的转换可以得到每个分量的值进而得到完整的 RGB 值。
HEX16 色全名是十六进制颜色值的完整名称。这些名称是根据对应的颜色值或者颜色特征而命名的。以下是一些常见的 HEX16 色全名示例
#FF0000: 红色#00FF00: 绿色#0000FF: 蓝色#FFFFFF: 白色#000000: 黑色#FFFF00: 黄色#FF00FF: 品红色#00FFFF: 青色#808080: 灰色#FFA500: 橙色
这只是一小部分例子实际上可以使用数百种不同的 HEX16 色全名来描述各种颜色。每种颜色都有其特定的 HEX16 色全名用于更准确地识别和描述颜色。 总结温故而知新不同阶段重温知识点会有不一样的认识和理解博主将巩固一遍知识点并以实践方式和大家分享若能有所帮助和收获这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。
