下記の表は、ホームページのスタイルシートを使う上で、コントラストの効果が生まれ見栄えが良くなる補色の関係にある色を見つけ易くするための表である。 OSがウインドウズの場合、標準の画像編集ソフトは、ペイントだと思うが、色の編集をして自分で色を作成する時、(ファイルメニュー→色→色の編集→「色の作成」ボタンをクリック)数値を入力して色を作成するとより正確な色を作成できる。(エクセルのファイルメニュー→ツール→「色」のタブ→「変更」ボタン→「ユーザー設定」のタブをクリックでも出来る) RGB方式といい、すべての色を「赤・緑・青」で表現する方法で作成する。 その3色の濃さを、それぞれ、「0」から「255」の256段階で設定します。 「255」が一番濃い(明るい)状態し、「0」が一番薄い(暗い)状態にします。 例えば、黒なら全ての数値が「0」になり、白は全ての数値が「255」になります。 次に補色について説明します。 先程のRGB方式の「赤・緑・青」の「各数値引く255の絶対値」(例えば、赤の数値に着目して、その数値を「R1」とすると、エクセルの関数の数式で表すと「=ABS(R1-255)」)に対応する。 また、ホームページを作成する際、色の名前で文字の色や背景で指定する場合、カッコ内の12色(aqua、black、 blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow)のように色の名前で指定する方法がある(他書籍にはもっとたくさんあるように書いてあるが、この12色だとほぼ、どのブラウザでも認識可能なようだ)。 しかし、これだと先程のRGB方式の全ての色を表現できないので、HTMLでのRGB方式で記述することになる。 先程とほとんど、同じなのだが、「赤・緑・青」の各数値「0」から「255」の数値を二桁の16進数の数値に変換したものを「#」マークの後ろに「赤・緑・青」の順番につないだ数値になる。 明るい緑(黄緑)にあたる色:limeは「赤・緑・青」の順番で「0」「255」「0」でペイントでは設定されるが、これをHTMLでは「#00ff00」と記述される。(もちろん、limeでもOK) このlimeの補色は「赤・緑・青」の順番で「255」「0」「255」とペイントでは設定され、HTMLでは「#ff00ff」と表される。 これくらいなら、目で見て、暗算でも出来るが、purple(#800080)などの補色となると頭が痛くなると思う。 そこで、エクセルの数式で「0」から「255」の数値を16進数に変換した。 「赤・緑・青」の各数値を「#」マークのある左から順番に対応させて使って下さい。 また、それに対応した色をペイントで作成する場合は、10進数の数値を入力してください。 「aqua、black、 blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow」をHTMLのRGB方式に直すと順番に「#00ffff、#000000、 #0000ff、 #ff00ff、 #808080、 #008000、 #00ff00、 #800000、 #000080、 #808000、#800080、 #ff0000、 #c0c0c0、 #008080、 #ffffff、 #ffff00」になる。 補色計算機へ |
RGBの何かの数値 | その補色 | |||
濃 さ | 10 進数 | 16 進数 | 16 進数 | 10 進数 |
0 | 00 | ff | 255 | |
1 | 01 | ef | 254 | |
2 | 02 | df | 253 | |
3 | 03 | cf | 252 | |
4 | 04 | bf | 251 | |
5 | 05 | af | 250 | |
6 | 06 | 9f | 249 | |
7 | 07 | 8f | 248 | |
8 | 08 | 7f | 247 | |
9 | 09 | 6f | 246 | |
10 | 0a | 5f | 245 | |
11 | 0b | 4f | 244 | |
12 | 0c | 3f | 243 | |
13 | 0d | 2f | 242 | |
14 | 0e | 1f | 241 | |
15 | 0f | 0f | 240 | |
16 | 10 | fe | 239 | |
17 | 11 | ee | 238 | |
18 | 12 | de | 237 | |
19 | 13 | ce | 236 | |
20 | 14 | be | 235 | |
21 | 15 | ae | 234 | |
22 | 16 | 9e | 233 | |
23 | 17 | 8e | 232 | |
24 | 18 | 7e | 231 | |
25 | 19 | 6e | 230 | |
26 | 1a | 5e | 229 | |
27 | 1b | 4e | 228 | |
28 | 1c | 3e | 227 | |
29 | 1d | 2e | 226 | |
30 | 1e | 1e | 225 | |
31 | 1f | 0e | 224 | |
32 | 20 | fd | 223 | |
33 | 21 | ed | 222 | |
34 | 22 | dd | 221 | |
35 | 23 | cd | 220 | |
36 | 24 | bd | 219 | |
37 | 25 | ad | 218 | |
38 | 26 | 9d | 217 | |
39 | 27 | 8d | 216 | |
40 | 28 | 7d | 215 | |
41 | 29 | 6d | 214 | |
42 | 2a | 5d | 213 | |
43 | 2b | 4d | 212 | |
44 | 2c | 3d | 211 | |
45 | 2d | 2d | 210 | |
46 | 2e | 1d | 209 | |
47 | 2f | 0d | 208 | |
48 | 30 | fc | 207 | |
49 | 31 | ec | 206 | |
50 | 32 | dc | 205 | |
51 | 33 | cc | 204 | |
52 | 34 | bc | 203 | |
53 | 35 | ac | 202 | |
54 | 36 | 9c | 201 | |
55 | 37 | 8c | 200 | |
56 | 38 | 7c | 199 | |
57 | 39 | 6c | 198 | |
58 | 3a | 5c | 197 | |
59 | 3b | 4c | 196 | |
60 | 3c | 3c | 195 | |
61 | 3d | 2c | 194 | |
62 | 3e | 1c | 193 | |
63 | 3f | 0c | 192 | |
64 | 40 | fb | 191 | |
65 | 41 | eb | 190 | |
66 | 42 | db | 189 | |
67 | 43 | cb | 188 | |
68 | 44 | bb | 187 | |
69 | 45 | ab | 186 | |
70 | 46 | 9b | 185 | |
71 | 47 | 8b | 184 | |
72 | 48 | 7b | 183 | |
73 | 49 | 6b | 182 | |
74 | 4a | 5b | 181 | |
75 | 4b | 4b | 180 | |
76 | 4c | 3b | 179 | |
77 | 4d | 2b | 178 | |
78 | 4e | 1b | 177 | |
79 | 4f | 0b | 176 | |
80 | 50 | fa | 175 | |
81 | 51 | ea | 174 | |
82 | 52 | da | 173 | |
83 | 53 | ca | 172 | |
84 | 54 | ba | 171 | |
85 | 55 | aa | 170 | |
86 | 56 | 9a | 169 | |
87 | 57 | 8a | 168 | |
88 | 58 | 7a | 167 | |
89 | 59 | 6a | 166 | |
90 | 5a | 5a | 165 | |
91 | 5b | 4a | 164 | |
92 | 5c | 3a | 163 | |
93 | 5d | 2a | 162 | |
94 | 5e | 1a | 161 | |
95 | 5f | 0a | 160 | |
96 | 60 | f9 | 159 | |
97 | 61 | e9 | 158 | |
98 | 62 | d9 | 157 | |
99 | 63 | c9 | 156 | |
100 | 64 | b9 | 155 | |
101 | 65 | a9 | 154 | |
102 | 66 | 99 | 153 | |
103 | 67 | 89 | 152 | |
104 | 68 | 79 | 151 | |
105 | 69 | 69 | 150 | |
106 | 6a | 59 | 149 | |
107 | 6b | 49 | 148 | |
108 | 6c | 39 | 147 | |
109 | 6d | 29 | 146 | |
110 | 6e | 19 | 145 | |
111 | 6f | 09 | 144 | |
112 | 70 | f8 | 143 | |
113 | 71 | e8 | 142 | |
114 | 72 | d8 | 141 | |
115 | 73 | c8 | 140 | |
116 | 74 | b8 | 139 | |
117 | 75 | a8 | 138 | |
118 | 76 | 98 | 137 | |
119 | 77 | 88 | 136 | |
120 | 78 | 78 | 135 | |
121 | 79 | 68 | 134 | |
122 | 7a | 58 | 133 | |
123 | 7b | 48 | 132 | |
124 | 7c | 38 | 131 | |
125 | 7d | 28 | 130 | |
126 | 7e | 18 | 129 | |
127 | 7f | 08 | 128 | |
128 | 80 | f7 | 127 | |
129 | 81 | e7 | 126 | |
130 | 82 | d7 | 125 | |
131 | 83 | c7 | 124 | |
132 | 84 | b7 | 123 | |
133 | 85 | a7 | 122 | |
134 | 86 | 97 | 121 | |
135 | 87 | 87 | 120 | |
136 | 88 | 77 | 119 | |
137 | 89 | 67 | 118 | |
138 | 8a | 57 | 117 | |
139 | 8b | 47 | 116 | |
140 | 8c | 37 | 115 | |
141 | 8d | 27 | 114 | |
142 | 8e | 17 | 113 | |
143 | 8f | 07 | 112 | |
144 | 90 | f6 | 111 | |
145 | 91 | e6 | 110 | |
146 | 92 | d6 | 109 | |
147 | 93 | c6 | 108 | |
148 | 94 | b6 | 107 | |
149 | 95 | a6 | 106 | |
150 | 96 | 96 | 105 | |
151 | 97 | 86 | 104 | |
152 | 98 | 76 | 103 | |
153 | 99 | 66 | 102 | |
154 | 9a | 56 | 101 | |
155 | 9b | 46 | 100 | |
156 | 9c | 36 | 99 | |
157 | 9d | 26 | 98 | |
158 | 9e | 16 | 97 | |
159 | 9f | 06 | 96 | |
160 | a0 | f5 | 95 | |
161 | a1 | e5 | 94 | |
162 | a2 | d5 | 93 | |
163 | a3 | c5 | 92 | |
164 | a4 | b5 | 91 | |
165 | a5 | a5 | 90 | |
166 | a6 | 95 | 89 | |
167 | a7 | 85 | 88 | |
168 | a8 | 75 | 87 | |
169 | a9 | 65 | 86 | |
170 | aa | 55 | 85 | |
171 | ab | 45 | 84 | |
172 | ac | 35 | 83 | |
173 | ad | 25 | 82 | |
174 | ae | 15 | 81 | |
175 | af | 05 | 80 | |
176 | b0 | f4 | 79 | |
177 | b1 | e4 | 78 | |
178 | b2 | d4 | 77 | |
179 | b3 | c4 | 76 | |
180 | b4 | b4 | 75 | |
181 | b5 | a4 | 74 | |
182 | b6 | 94 | 73 | |
183 | b7 | 84 | 72 | |
184 | b8 | 74 | 71 | |
185 | b9 | 64 | 70 | |
186 | ba | 54 | 69 | |
187 | bb | 44 | 68 | |
188 | bc | 34 | 67 | |
189 | bd | 24 | 66 | |
190 | be | 14 | 65 | |
191 | bf | 04 | 64 | |
192 | c0 | f3 | 63 | |
193 | c1 | e3 | 62 | |
194 | c2 | d3 | 61 | |
195 | c3 | c3 | 60 | |
196 | c4 | b3 | 59 | |
197 | c5 | a3 | 58 | |
198 | c6 | 93 | 57 | |
199 | c7 | 83 | 56 | |
200 | c8 | 73 | 55 | |
201 | c9 | 63 | 54 | |
202 | ca | 53 | 53 | |
203 | cb | 43 | 52 | |
204 | cc | 33 | 51 | |
205 | cd | 23 | 50 | |
206 | ce | 13 | 49 | |
207 | cf | 03 | 48 | |
208 | d0 | f2 | 47 | |
209 | d1 | e2 | 46 | |
210 | d2 | d2 | 45 | |
211 | d3 | c2 | 44 | |
212 | d4 | b2 | 43 | |
213 | d5 | a2 | 42 | |
214 | d6 | 92 | 41 | |
215 | d7 | 82 | 40 | |
216 | d8 | 72 | 39 | |
217 | d9 | 62 | 38 | |
218 | da | 52 | 37 | |
219 | db | 42 | 36 | |
220 | dc | 32 | 35 | |
221 | dd | 22 | 34 | |
222 | de | 12 | 33 | |
223 | df | 02 | 32 | |
224 | e0 | f1 | 31 | |
225 | e1 | e1 | 30 | |
226 | e2 | d1 | 29 | |
227 | e3 | c1 | 28 | |
228 | e4 | b1 | 27 | |
229 | e5 | a1 | 26 | |
230 | e6 | 91 | 25 | |
231 | e7 | 81 | 24 | |
232 | e8 | 71 | 23 | |
233 | e9 | 61 | 22 | |
234 | ea | 51 | 21 | |
235 | eb | 41 | 20 | |
236 | ec | 31 | 19 | |
237 | ed | 21 | 18 | |
238 | ee | 11 | 17 | |
239 | ef | 01 | 16 | |
240 | f0 | f0 | 15 | |
241 | f1 | e0 | 14 | |
242 | f2 | d0 | 13 | |
243 | f3 | c0 | 12 | |
244 | f4 | b0 | 11 | |
245 | f5 | a0 | 10 | |
246 | f6 | 90 | 9 | |
247 | f7 | 80 | 8 | |
248 | f8 | 70 | 7 | |
249 | f9 | 60 | 6 | |
250 | fa | 50 | 5 | |
251 | fb | 40 | 4 | |
252 | fc | 30 | 3 | |
253 | fd | 20 | 2 | |
254 | fe | 10 | 1 | |
255 | ff | 00 | 0 |