CSSの色指定の方法【現役エンジニアが解説】

PROGRAM

今回は、CSSの色指定の方法について、3つのパターンに分け、簡単に解説していきます。

色名

色名で簡単に色を指定することができます。

ただし、あらかじめ用意された色名しか使うことができません。

.hoge{
    color:red;
}

上記のコードでは、hogeのクラスの要素の文字色を赤色(red)に指定しています。

16進数(6桁)コード

先頭に#を付けた6桁の16進数のコードでも色指定が可能です。

最初の2桁で赤、次の2桁で緑、最後の2桁で青の割合を16進数で指定します。

.hoge{
    color:#ff0000;
}

上記のコードでは、hogeというクラスの要素の文字色を赤色(#ff0000)に指定しています。

RGB(Red,Green,Blue)

rgb(0~255,0~255,0~255)の形式で色を指定することもできます。

一つ目に赤、二つ目に緑、三つ目に青の割合を0から255までの数値で指定します。

.hoge{
    color:rgb(255,0,0);
}

上記のコードでは、hogeというクラスを持つ要素の文字色を赤色(rgb(255,0,0))に指定しています。