国外做水广告网站大全,株洲网站排名优化价格,官方网站的必要性,用vs做网站 怎么安装你好#xff0c;我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛#xff0c;大专生#xff0c;2年时间从1800到月入过万#xff0c;工作5年买房。 分享成长心得。 HTML 颜色在网页设计中扮演着重要角色#xff0c;给网页增加颜色可以增强用户体验#xff0c;…你好我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛大专生2年时间从1800到月入过万工作5年买房。 分享成长心得。 HTML 颜色在网页设计中扮演着重要角色给网页增加颜色可以增强用户体验提升页面的吸引力和可读性。
本次桃将介绍 HTML 中颜色的 5 种表示方式一起来看看吧。
颜色表示法
1、十六进制表示法Hexadecimal使用固定 3 位或者 6 位十六进制数字表示颜色每两位表示红、绿、蓝RGB分量的值范围从 00 到 FF。它有 2 种表示方法
a) 六位十六进制表示法使用六位十六进制数字来表示颜色每两位表示红、绿、蓝RGB分量的值范围从 00 到 FF。例如红色表示为#FF0000绿色表示为#00FF00。
b) 三位十六进制表示法这种简写形式将每个 RGB 分量的两位相同的数字简写为一个数字只能表示一些基本颜色。例如#RGB 等效于 #RRGGBB其中 R、G、B 分别代表红、绿、蓝分量的值。例如#F00 等效于 #FF0000表示红色。再比如下面这个色块我演示了从#000 纯黑依次到#fff,这 16 个值的色块是不是还挺有规律的哈哈。 这 6 位排列组合以后可以表示 16^6 16,777,216 种颜色。例如红色表示为#FF0000绿色表示为#00FF00。这里给你一个链接可以拖动试试看。https://color.adobe.com/zh/create/color-wheel 2、 RGB 表示法Red Green Blue使用红、绿、蓝三个颜色通道的值来表示颜色每个通道的值范围从 0 到 255。例如红色表示为rgb(255, 0, 0)绿色表示为rgb(0, 255, 0)。
3、RGBA 表示法Red Green Blue Alpha涉及到透明度的元素就用这个来表示。类似于 RGB 表示法但增加了一个表示透明度的通道Alpha范围从 0 到 10 表示完全透明1 表示完全不透明。例如半透明红色表示为rgba(255, 0, 0, 0.5)。
4、颜色名称表示法 这种表示法使用一些常见颜色的名称来表示颜色比如 red 表示红色 blue 表示蓝色 green 表示绿色以此类推。这种表示方法看起来很简单易懂。然而颜色名称表示法有其局限性因为它只能表示少数常见的颜色而且在浏览器差异问题可读性问题所以不建议用这种。
5、HSLA 表示法HSLA 表示法是基于色相Hue、饱和度Saturation、亮度Lightness的颜色模式其中的 A 同样表示 Alpha 透明度通道控制颜色的透明度和 RGBA 里的 A 取值类似。色相值的范围是 0 到 360 度饱和度和亮度的取值范围是 0%到 100%而透明度的取值范围是从 0 到 1。
以下是一个包含六种颜色表示方法的 HTML 案例
!DOCTYPE html
htmlheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleColor Examples/titlestyle/* 六位十六进制表示法 */.hex-color {color: #ff0000; /* 红色 */background-color: #00ff00; /* 绿色 */}/* 三位十六进制表示法 */.short-hex-color {color: #0f0; /* 绿色 */background-color: #00f; /* 蓝色 */}/* RGB表示法 */.rgb-color {color: rgb(255, 0, 255); /* 紫色 */background-color: rgb(0, 128, 128); /* 青色 */}/* RGBA表示法 */.rgba-color {color: rgba(255, 165, 0, 0.5); /* 半透明橙色 */background-color: rgba(0, 0, 255, 0.2); /* 蓝色背景半透明 */}/* 颜色名称表示法 */.txt-color {color: pink; /* 粉色 */}/* HSLA表示法 */.hsla-color {color: hsla(240, 100%, 50%, 0.8); /* 半透明蓝色 */background-color: hsla(60, 100%, 50%, 0.5); /* 半透明黄色 */}/style/headbodyp classhex-color使用六位十六进制表示法的文字颜色和背景色。/pp classshort-hex-color使用三位十六进制表示法的文字颜色和背景色。/pp classrgb-color使用RGB表示法的文字颜色和背景色。/pp classrgba-color使用RGBA表示法的文字颜色和背景色。/pa href# classhex-color使用六位十六进制表示法的链接颜色。/aa href# classrgba-color使用RGBA表示法的链接颜色。/ap classtxt-color使用颜色名称表示法的链接颜色。/pp classhsla-color使用HSLA表示法的文字颜色和背景色。/p/body
/html效果如图 注意事项
那你可能会说这么多种颜色都要用么
不是的在实际开发中更推荐使用前 3 种十六进制表示法、RGB 表示法、RGBA 表示法这3种方法具有更强的灵活性、可读性、兼容性和扩展性能够更好地满足设计需求和编码规范。
而后 2 者了解就好。 总结
HTML 颜色的应用可以大大提升网页的视觉效果和用户体验因此合理地运用颜色是网页设计中的重要一环。
你可能会问这么多颜色需要一个一个记住么不必你只需要知道它的写法就可以了。我们工作流程的前一还是设计她会给定好我们设计稿。我们只负责在 设计软件 Photoshop(PS) 或者借助吸色工具吸取就可以了。 在使用颜色时需要注意搭配、可访问性等方面的考虑。不过咱们不用担心颜色这个事不是由前端决定而是设计同学。如果有不确定的颜色和 UI 设计同学多确认就可以了。
OK以上本文完。
web前端25
web开发24
web前端开发21
html524
web前端 · 目录
上一篇飞书裁员20%
