十六进制下的(6+2) 8位数颜色代码
十六进制下的(6+2) 8位数颜色代码
8位数十六进制颜色代码
平常我们在写代码用到颜色的时候,经常写的是,六位十六进制代码
例如:
白色:#FFFFFF
黑色:#000000
网易云红色:#E20000
如果要加上颜色透明度,可能会用到opacity
常见写法
同时设置背景色和透明度
<div className={'color'} style={{backgroundColor: '#E20000',opacity: '0.2'}}><span>文字</span>
</div>
改进写法
<div className={'color'} style={{backgroundColor: '#E2000033'}}><span>文字</span>
</div>
#E2000033
最后两位33
就表示设置该颜色的透明度为20%。
十六进制颜色不透明度对照表
不透明度 - 代码
100% - FF
99% - FC
98% - FA
97% - F7
96% - F5
95% - F2
94% - F0
93% - ED
92% - EB
91% - E8
90% - E6
89% - E3
88% - E0
87% - DE
86% - DB
85% - D9
84% - D6
83% - D4
82% - D1
81% - CF
80% - CC
79% - C9
78% - C7
77% - C4
76% - C2
75% - BF
74% - BD
73% - BA
72% - B8
71% - B5
70% - B3
69% - B0
68% - AD
67% - AB
66% - A8
65% - A6
64% - A3
63% - A1
62% - 9E
61% - 9C
60% - 99
59% - 96
58% - 94
57% - 91
56% - 8F
55% - 8C
54% - 8A
53% - 87
52% - 85
51% - 82
50% - 80
49% - 7D
48% - 7A
47% - 78
46% - 75
45% - 73
44% - 70
43% - 6E
42% - 6B
41% - 69
40% - 66
39% - 63
38% - 61
37% - 5E
36% - 5C
35% - 59
34% - 57
33% - 54
32% - 52
31% - 4F
30% - 4D
29% - 4A
28% - 47
27% - 45
26% - 42
25% - 40
24% - 3D
23% - 3B
22% - 38
21% - 36
20% - 33
19% - 30
18% - 2E
17% - 2B
16% - 29
15% - 26
14% - 24
13% - 21
12% - 1F
11% - 1C
10% - 1A
9% - 17
8% - 14
7% - 12
6% - 0F
5% - 0D
4% - 0A
3% - 08
2% - 05
1% - 03
0% - 00
前端颜色的几种写法
六位十六进制代码(最常用)
例如:#FFFFFF(白色),#000000(黑色)
八位十六进制代码(加透明度)
例如:#FFFFFF99(白色),#00000099(黑色)
三位十六进制代码
用三位数是有条件限制的,也就是说当三位数等价于六位数时才可以用。
1.当6位数全部相同时,可以简写为3位数
例如:#FFFFFF(白色) = #FFF,#000000(黑色) = #000
1.当6位数共三组相同的两个数字时,可以简写为3位数
例如:#112233 = #123,#FF2255 = #F25
rgb/rgba写法
RGB颜色值与十六进制颜色码转换工具
rgb的三位数字和rgba的前三位数字需要根据转换工具(见上)来转换。
黑色:rgb(0,0,0)
不透明度为50%的黑色:rgba(0,0,0,0.5)
或者,仍采用十六进制:
不透明度为20%的白色:rgba($color: #ffffff, $alpha: 0.2);
英文单词法(没必要,不建议写)
例如红色:color: red;
例如白色:color: white;
hsla模式(陌生)
例如:background: hsla(0, 0%, 100%, .5);
H是色度,取值在0度~360度之间,0度是红色,120度是绿色,240度是蓝色。360度也是红色。
S是饱和度,是色彩的纯度,是一个百分比的值,取值在0%~100%,0%饱和度最低,100%饱和度最高
L是亮度,也是一个百分比值,取值在0%~100%,0%最暗,100%最亮。
A是不透明度,取值在0.0~1.0,0.0完全透明,1.0完全不透明。
总结
#FFFFFF /*白色*/
#FFFFFF99 /*不透明度为60%的白色*/
#112233 = #123
rgb(0,0,0) /*黑色*/
rgba(0,0,0,0.5) /*不透明度为50%的黑色*/
rgba($color: #ffffff, $alpha: 0.2)
red /*红色*/
十六进制下的(6+2) 8位数颜色代码相关推荐
- 二进制颜色代码大全(含图)透明度与十六进制代码转换
原文地址:http://blog.csdn.net/shakespeare001/article/details/7816022 http://blog.csdn.net/sky1203850702/ ...
- 数据可视化_科学统计图表8——ggplot颜色代码详解
这章不讲画图的代码,只对颜色选取进行介绍. Ggplot有自己的颜色代码,其形式为#nnnnnn.其中n->0 : F(十六进制) 前两个n对应RGB中的R,中间的对应G,最后两个n对应B. 两 ...
- 颜色代码六位十六进制字符_8位十六进制颜色
颜色代码六位十六进制字符 One of the most requested capabilities in my early days of web development was the abil ...
- 如何使用正则表达式验证十六进制颜色代码
十六进制颜色代码正则表达式模式 ^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$ 描述 ^ #start of the line# # must constains a " ...
- 十六进制颜色 rgb颜色_轻松获取十六进制和RGB颜色代码
十六进制颜色 rgb颜色 Do you find yourself needing a color code for the website work that you are doing and j ...
- linux下 C编程改变输出字体颜色
linux下 C编程改变输出字体颜色 分类: Linux基础编程 Linux操作系统 2012-09-19 10:53 1409人阅读 评论(0) 收藏 举报 linux编程c 格式: echo &q ...
- qt int转换成qstring_「QT界面编程实例」创建颜色下拉框并改变窗体颜色(调色板)...
[实例]Qt创建窗体下拉框并改变窗体颜色:QPalette.QColor.QPixmap.QSize.QIcon.QStringList.QString 本例是想创建一个颜色下拉框(颜色是自动从QCo ...
- 如何使用.NET从十六进制颜色代码中获取颜色?
如何从十六进制颜色代码(例如#FFDFD991 )中获得颜色? 我正在读取文件,并且正在获取十六进制颜色代码. 我需要为十六进制颜色代码创建相应的System.Windows.Media.Color实 ...
- 关于Pycharm主题Darcula下使用jupyter显示图片的颜色错误
关于Pycharm主题Darcula下使用jupyter显示图片的颜色错误 问题描述 在亮色主题下显示图片正确,但在暗色主题下显示图片时,图片的底色发生变化. 解决方法 File -> Sett ...
- EXCEL设置下拉选项,选项带颜色
EXCEL设置下拉选项,选项带颜色 老是要用,但是老是记不起来,这次自己记录下. 第一步:表格中设置你要的选项,以及对应选项的颜色. 第二步: 选中你要下拉的选项列,数据 - 插入下拉选项 - 对话框 ...
最新文章
- 一元夺宝类项目的被拒
- 计算机房电磁辐射防护,计算机房电磁屏蔽
- UINavigationController 返回到各级目录
- php基础教程 第一步 环境配置及helloworld
- 点评老师freeeim
- Linux 运维人最常用 150 个命令汇总
- 【Flink】Flink检查点时间太小导致Exceeded checkpoint tolerable failure threshould
- javascript、jquery获取网页的高度和宽度
- mooc c语言第三周作业,2017moocC语言第七周答案
- Python_Day10_进程、线程、协程
- php类微博源码,类微博功能设计
- python桌面程序臃肿_Python自动化整理文件“大升级”,任意路径下文件,都给你整理的明明白白!...
- 饿了么UI框架表单验证
- opencv+VS2005安装说明
- 极光推送 简书android,极光推送 (具体步骤,指导操作,推送成功)
- 量子多体理论怎么样理解,多体系统的量子理论
- android 百度地图走动轨迹,百度地图实现小车规划路线后平滑移动功能
- VUE中toast的使用与开发
- VirtualBox 调整屏幕分辨率
- Python关于人脸图片转换128/512维度向量的两种做法