カスタマイズなどの際に色コードが6桁と3桁そしてRBGの３種類があって困った経験はないですか？
結局のところどれを使っても結果は同じになるんです。
何を使うかは【CSS】内で使うのか【HTML】内の<style>で使うのかなど『どこで使うのか』で決まります。
この記事では<style="color: #903>の様なタグに必要な【3桁のカラーコード216色】一覧を用意しました。
WindowsとMacのシステムパレットのうち共通に存在する216色である【Webセーフカラー216色】となります。
【はてなブログ】で用意されているWebアイコンを利用する際に利用できます。
- スポンサーリンク -
【3桁カラーコード】WinとMacで共通216色Webセーフカラー
【3桁カラーコード】は4,000以上あります。
ここではWinとMac共通カラー216色に絞ってお届けします。
6桁と3桁カラーコードの違い
6桁と3桁のカラーコードは、結果は同じ色です。
とは、どういう仕組みなのかをお届けします。
＊省略：コード前には【＃】を付けます
| 色 | 6桁 | 3桁 |
|---|---|---|
| ff9900 | f90 | |
| ccff99 | cf9 | |
| ffcccc | fcc |
6桁と3桁の関係が見えてきましたね。
オレンジの場合：【ｆｆ】【９９】【００】
１つずつ取って【ｆ】【９】【０】が3桁となります。
必ず同じ２つが1セットでないと3桁には出来ません。
Webセーフカラー216色一覧
WindowsとMacのシステムパレットのうち共通に存在する216色を【Webセーフカラー】と呼びます。
■TIPS■
コードのおススメコピー方法：
- コード上でWクリック
- 【Ctrl＋C】（コピー）
Webセーフカラー216色一覧
| 色 | 6桁 | 3桁 |
|---|---|---|
| ff0000 | f00 | |
| ff0033 | f03 | |
| ff0066 | f06 | |
| 990000 | 900 | |
| cc0000 | c00 | |
| cc0033 | c03 | |
| 993333 | 933 | |
| cc3333 | c33 | |
| ff3333 | f33 | |
| 996666 | 966 | |
| cc6666 | c66 | |
| ff6666 | f66 | |
| cc9999 | c99 | |
| ff9999 | ff9 | |
| ffcccc | fcc | |
| 660000 | 600 | |
| ff3300 | f30 | |
| ff3366 | f36 | |
| 990033 | 903 | |
| cc3366 | c36 | |
| ff6699 | f69 | |
| 663333 | 633 | |
| cc0066 | c06 | |
| 993366 | 936 | |
| 663366 | 636 | |
| 330033 | 303 | |
| 660033 | 603 | |
| ff99cc | f9c | |
| 990066 | 906 | |
| cc3399 | c39 | |
| ff66cc | f6c | |
| cc0099 | c09 | |
| cc6699 | c69 | |
| 996699 | 969 | |
| 330066 | 306 | |
| 660066 | 606 | |
| ff0099 | f09 | |
| 990099 | 909 | |
| cc00cc | c0c | |
| ff00ff | f0f | |
| ff00cc | f0c | |
| 993399 | 939 | |
| cc33cc | c3c | |
| ff33ff | f3f | |
| ff3399 | f39 | |
| cc66cc | c6c | |
| ff66ff | f6f | |
| cc99cc | c9c | |
| ff99ff | f9f | |
| ffccff | fcf | |
| cc00ff | c0f | |
| 9900cc | 90c | |
| cc33ff | c3f | |
| ff33cc | f3c | |
| 9933cc | 93c | |
| cc66ff | c6f | |
| 9900ff | 90f | |
| 660099 | 609 | |
| 6600cc | 60c | |
| 663399 | 639 | |
| 9933ff | 93f | |
| 9966cc | 96c | |
| cc99ff | c9f | |
| 0000ff | 00f | |
| 0000cc | 00c | |
| 0033ff | 03f | |
| 0066ff | 06f | |
| 0033cc | 03c | |
| 0099cc | 09c | |
| 0066cc | 06c | |
| 330099 | 309 | |
| 3300ff | 30f | |
| 00cccc | 0cc | |
| 000099 | 009 | |
| 003399 | 039 | |
| 0099ff | 09f | |
| 333366 | 336 | |
| 333399 | 339 | |
| 3333cc | 33c | |
| 3333ff | 33f | |
| 666699 | 669 | |
| 6666cc | 66c | |
| 6666ff | 66f | |
| 9999cc | 99c | |
| 9999ff | 99f | |
| ccccff | ccf | |
| 3366ff | 36f | |
| 6633cc | 63c | |
| 9966ff | 96f | |
| 3300cc | 30c | |
| 3366cc | 36c | |
| 6699ff | 69f | |
| 3399ff | 39f | |
| 003366 | 036 | |
| 000033 | 003 | |
| 336699 | 369 | |
| 6633ff | 63f | |
| 6699cc | 69c | |
| 99ccff | 9cf | |
| 000066 | 006 | |
| 006699 | 069 | |
| 3399cc | 39c | |
| 66ccff | 6cf | |
| 33ccff | 3cf | |
| 6600ff | 60f | |
| 003333 | 033 | |
| 000066 | 006 | |
| 336666 | 366 | |
| 000099 | 009 | |
| 339999 | 399 | |
| 669999 | 699 | |
| 00ccff | 0cf | |
| 33cccc | 3cc | |
| 66cccc | 6cc | |
| 99cccc | 9cc | |
| 00ffff | 0ff | |
| 33ffff | 3ff | |
| 66ffff | 6ff | |
| 99ffff | 9ff | |
| ccffff | cff | |
| 00ffcc | 0fc | |
| 00cc99 | 0c9 | |
| 33ffcc | 3fc | |
| 00ff99 | 0f9 | |
| 33cc99 | 3c9 | |
| 66ffcc | 6fc | |
| 00ff00 | 0f0 | |
| 00cc00 | 0c0 | |
| 009900 | 090 | |
| 003300 | 030 | |
| 00ff33 | 0f3 | |
| 009933 | 093 | |
| 006633 | 063 | |
| 00cc66 | 0c6 | |
| 33cc66 | 3c6 | |
| 66ff99 | 6f9 | |
| 00cc33 | 0c3 | |
| 33ff66 | 3f6 | |
| 33ff99 | 3f9 | |
| 99ffcc | 9fc | |
| 009966 | 096 | |
| 336633 | 363 | |
| 00ff66 | 0f6 | |
| 339933 | 393 | |
| 669966 | 696 | |
| 339966 | 396 | |
| 33cc33 | 3c3 | |
| 66cc66 | 6c6 | |
| 99cc99 | 9c9 | |
| 66cc99 | 6c9 | |
| 33ff33 | 3f3 | |
| 66ff66 | 6f6 | |
| 99ff99 | 9f9 | |
| ccffcc | cfc | |
| 33ff00 | 3f0 | |
| 33cc00 | 3c0 | |
| 66ff33 | 6f3 | |
| 339900 | 390 | |
| 66cc33 | 6c3 | |
| 99ff66 | 9f6 | |
| 66ff00 | 6f0 | |
| 336600 | 360 | |
| 669933 | 693 | |
| 66cc00 | 6c0 | |
| 99cc66 | 9c6 | |
| 99ff33 | 9f3 | |
| ccff99 | cf9 | |
| 99ff00 | 9f0 | |
| 669900 | 690 | |
| 99cc33 | 9c3 | |
| ccff66 | cf6 | |
| 99cc00 | 9c0 | |
| ccff33 | cf3 | |
| ccff00 | cf0 | |
| 333300 | 330 | |
| 666600 | 660 | |
| 666633 | 663 | |
| 999900 | 990 | |
| 999933 | 993 | |
| 999966 | 996 | |
| cccc00 | cc0 | |
| cccc33 | cc3 | |
| cccc66 | cc6 | |
| cccc99 | cc9 | |
| ffff00 | ff0 | |
| ffff33 | ff3 | |
| ffff66 | ff6 | |
| ffff99 | ff9 | |
| ffffcc | ffc | |
| ffcc00 | fc0 | |
| cc9900 | c90 | |
| ffcc33 | fc3 | |
| 996600 | 960 | |
| cc9933 | c93 | |
| ffcc66 | fc6 | |
| ff9900 | f90 | |
| 663300 | 630 | |
| cc6600 | c60 | |
| cc9966 | c96 | |
| ff9933 | f93 | |
| ffcc99 | fc9 | |
| ff6600 | f60 | |
| 993300 | 930 | |
| cc6633 | c63 | |
| ff9966 | f96 | |
| cc3300 | 69c | |
| ff6633 | f63 | |
| 330000 | 300 | |
| 996633 | 963 | |
| 333333 | 333 | |
| 666666 | 666 | |
| 999999 | 999 | |
| cccccc | ccc | |
| ffffff | fff | |
| 000000 | 000 |
- スポンサーリンク -
【3桁カラーコード】216色Webセーフカラーまとめ
【Webセーフカラーコード】を載せているサイトが少ないので作りました。
必要な方のお役に立てたら嬉しいです。
