CSSの色指定を完全ガイド！初心者でもわかるカラーネーム、カラーコード16進表記、10進表記
新人
「CSSで色を指定する方法はたくさんあるみたいですが、カラーネーム、カラーコード16進表記、10進表記って何が違うんですか？」
先輩
「CSSでは色を指定する方法として、カラーネームやカラーコード16進表記、10進表記などがあります。それぞれ少しずつ使い方や特性が異なるんですよ。」
新人
「それぞれの使い方について教えてください。」
先輩
「もちろん、まずはカラーネームから見ていきましょう。」
1. カラーネーム（色名）とは？
カラーネームとは、色の名前を使って色を指定する方法です。例えば、「red」や「blue」、「green」といった色の名前を使って、簡単に色を指定することができます。
カラーネームは非常にシンプルでわかりやすいので、初心者にもおすすめです。ただし、使える色の名前には限りがあります。
以下の例では、h1タグに「red」というカラーネームを使って色を指定しています：
<style>
h1 {
color: red;
}
</style>
<h1>赤い文字の見出し</h1>
このコードでは、h1タグに「red」と指定しています。カラーネームはシンプルで直感的に使えるため、手軽に色を指定したい時に便利です。
2. カラーコード16進表記とは？
カラーコード16進表記は、色を16進数で表現する方法です。16進数のコードは、色の「赤」「緑」「青」の成分を2桁ずつで表し、それぞれの値を00〜FFで指定します。
カラーコード16進表記は、色の精度が高く、色の選択肢も広いため、ウェブデザインでは非常によく使用されます。例えば、#FF0000は純粋な赤を意味し、#00FF00は純粋な緑を意味します。
以下のコードでは、h1タグの色を16進表記「#FF5733」で指定しています：
<style>
h1 {
color: #FF5733;
}
</style>
<h1>16進表記で色を指定した見出し</h1>
このコードでは、16進表記のカラーコード「#FF5733」を使用して、h1タグの色を指定しています。カラーコード16進表記は精度が高く、色のバリエーションが豊富です。
3. 10進表記とは？
10進表記は、色をRGB（赤、緑、青）の10進数で指定する方法です。RGBはそれぞれの色成分を0から255までの値で指定し、これらを組み合わせて色を作ります。例えば、rgb(255, 0, 0)は赤、rgb(0, 255, 0)は緑、rgb(0, 0, 255)は青を意味します。
10進表記は、カラーコード16進表記と同様に、RGBの3つの色成分を調整することで、任意の色を作り出すことができます。
以下のコードでは、h1タグの色をRGBで指定しています：
<style>
h1 {
color: rgb(255, 87, 51);
}
</style>
<h1>RGBの10進表記で色を指定した見出し</h1>
このコードでは、RGBの10進数表記で「rgb(255, 87, 51)」を使って、h1タグの色を指定しています。RGBは色の微調整に便利な方法です。
4. それぞれの使い方のポイント
- カラーネーム: 簡単で直感的に使えるため、初心者には最適。ただし、使える色が限られているため、複雑なデザインには向いていません。
- カラーコード16進表記: 色の選択肢が広く、精度の高いデザインが可能。ウェブデザインでは最もよく使われる方法です。
- 10進表記: RGBで色を細かく調整できるため、特定の色を作りたい場合に有効。精度が高く、複雑な色の調整ができます。
それぞれの方法には特徴があり、使い分けることでデザインの幅が広がります。最初はカラーネームで簡単に始め、慣れてきたらカラーコードやRGBを使って色の微調整をしていくと良いでしょう。
5. rgbaと透明度の指定方法
CSSでは、RGBの10進表記に加えてrgbaという形式を使うことで、色に透明度（アルファ値）を設定することができます。rgbaは「赤・緑・青・透明度」の4つの値で構成されます。
透明度は0〜1の範囲で指定し、0に近いほど透明、1に近いほど不透明になります。
<style>
h1 {
color: rgba(255, 0, 0, 0.5);
}
</style>
<h1>半透明の赤い見出し</h1>
このように、rgbaを使うことで、デザインに奥行きや重なりの表現を加えることができます。
6. hsl表記とは？色相・彩度・明度で指定する方法
hsl表記は、色を「色相（Hue）・彩度（Saturation）・明度（Lightness）」で指定する方法です。色相は0〜360度、彩度と明度は0%〜100%で表現されます。
直感的に色を調整しやすく、デザインのバリエーションを作りたい場合に便利です。
<style>
h1 {
color: hsl(0, 100%, 50%);
}
</style>
<h1>HSLで指定した赤色の見出し</h1>
このコードでは、色相0度（赤）、彩度100%、明度50%を指定しています。HSLは色の調整を感覚的に行えるのが特徴です。
7. 色指定を使い分けるコツと実務での考え方
CSSの色指定にはさまざまな方法がありますが、用途によって使い分けることが大切です。例えば、シンプルなデザインではカラーネーム、細かい調整が必要な場合は16進表記やRGBを使うと効率的です。
また、透明度を扱いたい場合はrgba、色のバリエーションを簡単に調整したい場合はhslを使うと便利です。
実務では、デザインツールから取得したカラーコードをそのまま使うケースも多いため、複数の表記方法を理解しておくことで、柔軟に対応できるようになります。
