网页中表示颜色的常见方法有:
1.Color Name(颜色名称)用颜色名称来指定颜色,这种方法简洁直观,一看就知道是什么颜色,但最大的缺点是颜色的名称太少,不能有效的表示一些较丰富的颜色
2.RGB(RGB记法)
3.HEX(十六进制记法)
RGB记法和十六进制记法都能很好的表示出一些较为丰富的颜色,但是我们用到16进制的比较多,语法为#RRGGBB,下面说下我刚研究出来的转换方法:
我们都知道
RGB记法rgb(255,255,255)=十六进制记法#FFFFFF,都表示白色
RGB记法rgb(0,0,0)=十六进制记法#000000,都表示黑色
那么RGB记法rgb(100,150,245)=十六进制记法#??????
RGB的取值都是0~255,HEX的取值为0123456789ABCDEF这16个字符,下面看看RGB-HEX对照表
RGB | HEX |
0 | 00 |
1 | 01 |
2 | 02 |
3 | 03 |
4 | 04 |
5 | 05 |
6 | 06 |
7 | 07 |
8 | 08 |
9 | 09 |
10 | 0A |
11 | 0B |
12 | 0C |
13 | 0D |
14 | 0E |
15 | 0F |
16 | 10 |
17 | 11 |
18 | 12 |
19 | 13 |
20 | 14 |
21 | 15 |
22 | 16 |
23 | 17 |
24 | 18 |
25 | 19 |
26 | 1A |
27 | 1B |
28 | 1C |
29 | 1D |
30 | 1E |
31 | 1F |
32 | 20 |
33 | 21 |
34 | 22 |
35 | 23 |
36 | 24 |
37 | 25 |
38 | 26 |
39 | 27 |
40 | 28 |
41 | 29 |
42 | 2A |
43 | 2B |
44 | 2C |
45 | 2D |
46 | 2E |
47 | 2F |
48 | 30 |
49 | 31 |
50 | 32 |
51 | 33 |
52 | 34 |
53 | 35 |
54 | 36 |
55 | 37 |
56 | 38 |
57 | 39 |
58 | 3A |
59 | 3B |
60 | 3C |
61 | 3D |
62 | 3E |
63 | 3F |
64 | 40 |
65 | 41 |
66 | 42 |
67 | 43 |
68 | 44 |
69 | 45 |
70 | 46 |
71 | 47 |
72 | 48 |
73 | 49 |
74 | 4A |
75 | 4B |
76 | 4C |
77 | 4D |
78 | 4E |
79 | 4F |
80 | 50 |
81 | 51 |
82 | 52 |
83 | 53 |
84 | 54 |
85 | 55 |
86 | 56 |
87 | 57 |
88 | 58 |
89 | 59 |
90 | 5A |
91 | 5B |
92 | 5C |
93 | 5D |
94 | 5E |
95 | 5F |
96 | 60 |
97 | 61 |
98 | 62 |
99 | 63 |
100 | 64 |
101 | 65 |
102 | 66 |
103 | 67 |
104 | 68 |
105 | 69 |
106 | 6A |
107 | 6B |
108 | 6C |
109 | 6D |
110 | 6E |
111 | 6F |
112 | 70 |
113 | 71 |
114 | 72 |
115 | 73 |
116 | 74 |
117 | 75 |
118 | 76 |
119 | 77 |
120 | 78 |
121 | 79 |
122 | 7A |
123 | 7B |
124 | 7C |
125 | 7D |
126 | 7E |
127 | 7F |
128 | 80 |
129 | 81 |
130 | 82 |
131 | 83 |
132 | 84 |
133 | 85 |
134 | 86 |
135 | 87 |
136 | 88 |
137 | 89 |
138 | 8A |
139 | 8B |
140 | 8C |
141 | 8D |
142 | 8E |
143 | 8F |
144 | 90 |
145 | 91 |
146 | 92 |
147 | 93 |
148 | 94 |
149 | 95 |
150 | 96 |
151 | 97 |
152 | 98 |
153 | 99 |
154 | 9A |
155 | 9B |
156 | 9C |
157 | 9D |
158 | 9E |
159 | 9F |
160 | A0 |
161 | A1 |
162 | A2 |
163 | A3 |
164 | A4 |
165 | A5 |
166 | A6 |
167 | A7 |
168 | A8 |
169 | A9 |
170 | AA |
171 | AB |
172 | AC |
173 | AD |
174 | AE |
175 | AF |
176 | B0 |
177 | B1 |
178 | B2 |
179 | B3 |
180 | B4 |
181 | B5 |
182 | B6 |
183 | B7 |
184 | B8 |
185 | B9 |
186 | BA |
187 | BB |
188 | BC |
189 | BD |
190 | BE |
191 | BF |
192 | C0 |
193 | C1 |
194 | C2 |
195 | C3 |
196 | C4 |
197 | C5 |
198 | C6 |
199 | C7 |
200 | C8 |
201 | C9 |
202 | CA |
203 | CB |
204 | CC |
205 | CD |
206 | CE |
207 | CF |
208 | D0 |
209 | D1 |
210 | D2 |
211 | D3 |
212 | D4 |
213 | D5 |
214 | D6 |
215 | D7 |
216 | D8 |
217 | D9 |
218 | DA |
219 | DB |
220 | DC |
221 | DD |
222 | DE |
223 | DF |
224 | E0 |
225 | E1 |
226 | E2 |
227 | E3 |
228 | E4 |
229 | E5 |
230 | E6 |
231 | E7 |
232 | E8 |
233 | E9 |
234 | EA |
235 | EB |
236 | EC |
237 | ED |
238 | EE |
239 | EF |
240 | F0 |
241 | F1 |
242 | F2 |
243 | F3 |
244 | F4 |
245 | F5 |
246 | F6 |
247 | F7 |
248 | F8 |
249 | F9 |
250 | FA |
251 | FB |
252 | FC |
253 | FD |
254 | FE |
255 | FF |
通过这张表我们可以发现rgb中的0对应HEX的00,1对应01……9对应09
10则对应0A,11对应0B……15对应0F
16对应了10
这里总共17对,除去一对特殊的0对应00,剩下的16对
大家都应该发现规律了吧,rgb的数值是16乘以HEX的第一位加上HEX的第二位,数字10一下的RGB和HEX都是相同的,不同的是HEX是两位数,在前面补0就可以了,10对应A,11对应B,12对应C,13对应D,14对应E,15对应F,下面通过例子来说明RGB到HEX的换算办法
例1:rgb(11,111,222)=#??????
11÷16=0余11 11对应B 前面补0那么HEX的数据为0B
111÷16=6余15 15对应F 那么HEX的数据为6F
222÷16=13余14 13对应D 14对应E 那么HEX的数据为DE
合起来HEX的数据就为#0B6FDE
例2:rgb(0,16,255)=#??????
0直接对应00
16÷16=1余0 则HEX的数据为10
255÷16=15余15 15对应F则HEX的数据为FF
合起来HEX的数据就为#0010FF
HEX转换RGB不用说了吧,倒过来就行了