色、いろいろ - 色彩心理学からファッション、調査・分析、雑学まで、色の意味や分類・使われかたなど、色にまつわるいろいろなこと。

◆ Webカラーコードと変換ツール

ホームページに表示される色を表現するためには二通りのコードがある。
htmlなどで色のコードを示す場合、「#FFFFFF」といった#の後に数字が続く表記をする。一方で画像ソフトなでは、「R255、G255、B255」といった番号で色を示す。「#FFFFFF」と「R255、G255、B255」は同じ色。



ホームページを作るためにhtmlコードを書き、画像を作る時は、同じ色がそれぞれ違う表記なので面倒だけれど、これは「#FFFFFF」と表記するウェブカラーが16進法を使用し、画像のRGBコードは10進法であるため。

#を使った16進法の色の指定方法では、一部の色は「#red」などと色名でも代用できる。また、3桁で表示することもある。「#FFFFFF」→「#FFF」。6桁の数字も続いて書かれているだけでそれぞれRGBを示しているらしい。範囲は00~FFまで。

10進法のRGB表記の方は、0~255までの範囲。こちらは元々htmlに限らず使われていた色指定方法で、ExcelやWordのカラーパレットもこれに準じている。

画像を作成する時は、コードを表記しなくても色を抽出する機能で同じ色を選ぶことができるが、片方の色から片方には16進法-10進法の変換でコードを出すこともできる。

それぞれの成り立ちが違うために差異があり、Web制作やWebデザインのプロの人は、基本はどちらかの専門であり、今更この差異を気にもせずに使いこなしているのだろうけれど、私のような素人にはいちいち面倒くさいと感じることのひとつ…。

 16進法:10進法変換


半角でコードを入力して、それぞれに変換すると変換後の数値になる、はず。
(データは画面に表示されるだけで保存はされません。変換し直す場合は一度リセットボタンを押してください)

16進法 (00~FFの範囲で#6桁)

   
10進法 (0~255の範囲の数字)
R: G: B:


 [おまけ]エンティティコード変換


Webで記事などを書く時に特殊記号を入力するとコード扱いされてしまう場合、エンティティコードに変換して表記する。
全部をエンティティ化してスパム避けするなどの利用法もあるけれど、こちらは「&」「"」「<」「>」「'」「←」「→」「»」「«」のみ変換。コードを入れて変換を押すと該当部分のみエンティティコードに変換される。戻るで逆変換も可能。
(データは画面に表示されるだけで保存はされません)







関連記事: