HTML や CSS でカラーを設定するときの記述方法をまとめてみました。本記事では CSS の color プロパティでのカラー設定を例にまとめてみます。
ちなみに CSS で、カラーを記述するところ（カラーに限らず）を「値（Value）」と呼びます。
カラー指定の記述方法は
とりあえず３つ
覚えとけってんでぃ！
①カラーの名前（Color Names）
②16進数（Hexadecimal）
③RGB 関数
他にもいろいろありますが、初心者のうちは、まず、この３つを押さえておけばよいかと思います！次からそれぞれの記述方法などを見ていきます。
カラーの名前（Color Names）で
カラーを設定する方法
カラー名で設定する場合は、カラー名をそのまま「値」として記述すればOKです！
例えば赤色を使いたい場合は、下記のように記述します。
color: red;とても直感的でわかりやすいですが、カラー名を知らなければ記述できません。カラー名はさまざまなサイトで紹介されているのでその都度検索すれば目的のカラーを探すことは容易です！本記事では公式で掲載されているカラー名一覧を載せておきます。
16進数（Hexadecimal）で
カラーを設定する方法
16進数（Hexadecimal）とは何ぞや？というのはいったん置いておいて、、、「#ff0000」みたいなやつです！コーディングするときに何かしらで一度は見たことがあるのではないでしょうか？？
color: #ff0000;ちなみにこれは“赤”を設定しています。
こちらの値を記述する基本ルールとしては、# の後に 0~9 と a~f の16の数字＆アルファベットを、6桁で記述します。それぞれの数字とアルファベットが何を意味するところかはやや複雑になってしまうのでかんたんにだけ触れておきます。1,2桁目が『赤』、3,4桁目が『緑』、5,6桁目が『青』、それぞれの色の明るさ的な部分を設定しているという感じです。
00 が最低値で ff が最高値。その組み合わせで色が決まるということなのですね……。難しい……。
また、基本は6桁のコードですが、3桁の短縮形でも設定することが可能です。
color: #f00;この場合も同じく“赤”を設定しています。
16進数のカラーコードの短縮形は、各桁が同じ値を繰り返すことを意味しています。回りくどくなってしまいますが、6桁の16進数のカラーコードで、1,2桁目、3,4桁目、5,6桁目がそれぞれ同じ値という条件の場合のみ、1桁ずつに短縮し3桁の16進数のカラーコードにすることができます。
つまり、#ff0000 は、#f00 に省略することが可能です。
注意したいのが、6桁 or 3桁しか値にすることはできません！例えば、1,2桁目だけ同じ値で、3,4桁目、5,6桁目はそれぞれ違う値の場合は短縮することはできません。
16進数のカラーコードも対応表がネットでたくさん出ているので、必要なときに参考にするのが現実的なのかなと思います。
RGB 関数で
カラーを設定する方法
RGB “関数”と言うておりますが、とりあえず苦手意識はなくして、そのまま覚えちゃいましょう。
color: rgb(255, 0, 0);そしてこちらも“赤”を設定しています。
ねっ？
そんなにむずかしくないでしょ！？
人によっては「16進数」よりもこちらの方が馴染み深いかもしれませんね。（）内の数値は、R（Red）、G（Green）、B（Blue）の「光の三原色」にそれぞれに対応しており、0~255 で色の明るさ的な部分を設定する数値です。0が最低値で255が最高値です！
この記述方法の発展として、
color: rgba(255, 0, 0, 1);という感じのものもあります。これも“赤”なのですが、透明度を設定することがとても容易です！rgb を rgba にして、（）内にもう一つ数値を入れてあげます。こちらに入れられる数値は 0~1 です。半透明にしたければ、数値を0に近づけていけばOK！ちなみに“a”は「alpha」の略だと思われます。
余談ですが
RGBが「光の三原色」と触れましたが、『光？「色の三原色」ではないの？』と思っていた方もいるかと思いますが、実は「色の三原色」は、C（Cyan：シアン）、M（Magenta：マゼンタ）、Y（Yellow：イエロー）で「光の三原色」とは別物なのです！「CMYK」というワードを見たことはないですか？主に「印刷」などで必要になる知識です。本記事では詳しくは触れませんが、気になる方はこちらの Canon のページなど参考にしてみてはいかがでしょうか。
まとめ
HTML や CSS でカラーを設定するときの代表的な記述方法として本記事では３つほど紹介しました。
CSS で赤を設定する例としては、「カラーの名前（Color Names）」では、color: red;というように値の部分にカラーの名を直接記述します。「16進数（Hexadecimal）」では、color: #ff0000;というようなカラーコードを記述します。「RGB 関数」では、color: rgb(255, 0, 0);というような感じで記述します。
いずれも様々なサイトでカラーコードが紹介されているので、それを参考にカラーを設定するのが良いかと思います。もちろんカラーの名前を覚えてしまったり、カラーの指定方法を理解して数値を設定できるのが一番スピード感はあるのかもしれませんが、なかなか難しいですよね(^_^;)
よく使うカラーのコードは、メモをとっておくというのもよいかもしれませんね。
参考・出典
・W3C. 「6. Color Keywords」. https://www.w3.org/TR/css-color-4/#named-colors, 2024年7月23日閲覧。
