CSSの概略ー色の指定方法
CSSのことを大まかに理解するための概略です。色の指定方法についてです。
色の指定方法
CSSで色を指定するには、以下の８つの方法があります。
１６進数で指定する【#RRGGBB形式】
「#」に続けて、RGB（Red，Green，Blue）の各値を２桁ずつの１６進数で示します。たとえば、赤を指定する場合には「#ff0000」となります。
見出しの背景を赤に指定するときの例
h1 { background-color: #ff0000; }１６進数で指定する【#RGB形式】
上記の方法に似ていますが、RGBの各値をそれぞれ１桁ずつの１６進数で表します。この値は、指定したRGBの各１桁の値を２つ続けて並べた数値として解釈されて表示されます。
たとえば、「#f36」と指定した場合には、「#ff3366」を指定したのと同じ結果になります。赤を指定する場合には「#f00」となります。
見出しの背景を赤に指定するときの例
h1 { background-color: #f00; }１０進法で指定する【rgb(n, n, n)形式】
rgbに続く（ ）の中にＲとＧとＢの１０進数の値をそれぞれ「 , 」で区切って示します。RGBの各値は０～２５５の範囲で指定することができます。
たとえば、赤を指定する場合には「rgb(255, 0, 0)」となります。
見出しの背景を赤に指定するときの例
h1 { background-color: rgb(255,0,0); }％で指定する【rgb(n%, n%, n%)形式】
rgbに続く（ ）の中にＲとＧとＢのパーセントの値をそれぞれ「 , 」で区切って示します。RGBの各値は０%～１００％の範囲で指定することができます。
たとえば、赤を指定する場合には「rgb(100%, 0%, 0%)」となります。
見出しの背景を赤に指定するときの例
h1 { background-color: rgb(100%,0%,0%); }１０進数＋透明度で指定する【rgba(n, n, n, a)形式】
rgb(n, n, n)形式に透明度（a=alpha）を加えた形式です。４つ目の値として０～１の範囲が指定でき、０は、完全に透明、１は完全に不透明となります。
たとえば、半透明の赤を指定する場合は「rgba(255, 0, 0, 0.5)」となります。
見出しの背景を赤に指定するときの例
h1 { background-color: rgba(255,0,0,0.5); }色相・彩度・明度で指定する【hsl(n, n%, n%)形式】
Hue（色相）・Saturation（彩度）・Lightness（明度）で色を指定する形式です。色相はカラーサークル（色相環）における角度（単位なし）で、彩度と明度は%で指定します。
たとえば、赤を指定する場合は「hsl(0, 100%, 50%)」となります。
見出しの背景を赤に指定するときの例
h1 { background-color: hsl(0,100%,50%); }色相・彩度・明度＋透明度で指定する【hsla(n, n%, n%, a)形式】
hsl(n, n%, n%)形式に透明度（a=alpha）を加えた形式です。４つ目の値として０～１の範囲の値が指定でき、０は完全に透明、１は完全に不透明となります。
たとえば、半透明の赤を指定する場合は「hsl(0, 100%, 50%, 0.5)」となります。
見出しの背景を赤に指定するときの例
h1 { background-color: hsl(0,100%,50%,0.5); }色の名前で指定する
CSS3の仕様書で定義されている１６の基本色名（HTML4.01で定義されていた１６色と同じもの）のほか、約１５０種類の拡張色名も指定できます。
見出しの背景を赤に指定するときの例
背景の色（background-color）を指定するときの一例です。色の名前が定義されていれば、その名前で指定することができます。
h1 { background-color: red; }
https://www.hibikore-tanren.com/colorchart/Recommended books
