「#ffffff」って何?

WordPressなどHTMLで、文字や背景の色を指定する機会は多いと思いますが、そのときに用いる「#ffffff」といった文字列の意味がよくわからない、といった方もいるのではないでしょうか。

この「#ffffff」のような文字列は、「RGBカラーコード」と呼ばれています。今回はRGBカラーコードに関する説明と主要な例について紹介いたします。

RGBカラーコードとは

RGBカラーコードは、赤 (Red)、緑 (Green)、青 (Blue) の三色を、それぞれどれくらいの割合で混ぜ合わせたかを表しています。#の後の1~2文字目が赤、3~4文字目が緑、5~6文字目が青を表していて、各2文字は「16進数で表した色の量」になります。例えば、全く含まない場合は「00」、目一杯含む場合は「ff」(10進数だと255)、その半分の場合は「80」(10進数だと128)とします。

つまり、赤を表す場合は「#ff0000」、緑を表す場合は「#00ff00」、青を表す場合は「#0000ff」とすればいいわけです。

  • 「#ff0000」で文字の色を指定した例
  • 「#00ff00」で文字の色を指定した例
  • 「#0000ff」で文字の色を指定した例

では、赤と緑を混ぜれば茶色になるから「#ffff00」は茶色…かと思われるかもしれませんが、「#ffff00」は黄色になります。これは、絵具などで色を混ぜるときは「減法混色」という法則に従うのに対し、RGBカラーコードの場合は「加法混色」という法則に従うためです。詳しく知りたい方は「加法混色」で調べてみるといいでしょう。

この「加法混色」が普段の生活では馴染みが薄いこともあって、RGBカラーコードを見ただけではどんな色かが分かりにくくなっています。そのため、出したい色のカラーコードを知るためには、変換ツールや色見本などが必要になります。

以下に簡単なカラーコード変換ツールと主要な色の例を用意しましたので、そちらもご確認ください。

色見本につきましては、RGBカラーコード色サンプルという記事でも紹介させていただいていますので、そちらも併せてご確認ください。

それらのツールや例で足りない場合は、「カラーコード変換」や「色見本」などで検索してみてください。

カラーコード変換ツール

「RGBカラーコード」に「#ffffff」のようにRGBカラーコードを入力し、「色変換」を押すと、「文字色」「背景色」がそれぞれ変化します。「RGBカラーコード」を正しく入力しないと色は変化しないので注意してください。

RGBカラーコード文字色背景色
サンプル 

主要な色の例

以下に主要な色の色名とRGBカラーコード、表示される色を示します。

なお、以下の色はRGBカラーコードの代わりに色名を入れることで、HTMLで文字や背景の色の指定が可能です。状況に応じて活用ください。

色名RGBカラーコード文字色背景色
white#ffffffサンプル
silver#c0c0c0サンプル
gray#808080サンプル
black#000000サンプル
red#ff0000サンプル
maroon#800000サンプル
lime#00ff00サンプル
green#008000サンプル
blue#0000ffサンプル
navy#000080サンプル
yellow#ffff00サンプル
olive#808000サンプル
aqua#00ffffサンプル
teal#008080サンプル
fuchsia#ff00ffサンプル
purple#800080サンプル

まとめ

以上、今回はRGBカラーコードに関する説明と主要な例についてご紹介させていただきました。

状況に応じて適切な色を使いこなすのは、ページを見やすくしたり、重要なポイントを印象付けたりするのに重要です。皆さんもRGBカラーコードを理解し、色を使いこなしてください。





おすすめの記事