HTML中style/css/color设置颜色值(RGB值)的几种方法(常见颜色和色值)
一般成体系的前端开发,会有UED给出具体的值,也会统一一个表达方式,所以开发不用关心值的问题。
但日常仍然会遇到很多表达方式的不同,尤其是十进制和十六进制转换太麻烦,所以特别记录下不同的表达方式。
颜色是UI中必不可少的组成部分,所以color属性使用很频繁,比如文字(color
)、背景色(background-color
)、边框色(border-color
)等。
这里只记录几种常见的表达方式,所有支持的方式可参考 1:
方式 | 样例 | 说明 |
---|---|---|
颜色英文 | color:blue |
从css1 ~css3 ,支持的颜色种类越来越多了,具体可以参考 2 ;注意不同浏览器对颜色的渲染可能有所不同 |
RGB值 |
color:rgb(100,100,100) |
三原色:r代表red红色,g代表green绿色,b代表blue蓝色 括号中值依次为红绿蓝(每个值范围在0~255之间) |
十六进制 | color:#C3B2A1 |
每个颜色占两位、顺序依次为红绿蓝; * #CCBBAA可简写为#CBA |
自用取色工具推荐:
- 查看常用色值:http://www.5tu.cn/colors/yansezhongwenming.html
- 取色、色值说明:https://encycolorpedia.cn/。感谢进阶的JFarmer的分享(https://blog.csdn.net/weixin_43896318/article/details/103393190)