webfeelfree

CSS(CSS3)で色を指定する色々な方法

色相的な絵具

Image by:JamieAstari

以前「サイト全体のリンクの色と装飾を変更するCSS」で、色の変更に少し触れましたが、今回は、色の指定自体をピックアップして、もう少し深く切り込んでいこうかと思います。

いろいろ調べていると、新しく「hsl」で指定する方法なんかも加わっているので、その辺も含めてメモっていきます。

オリジナルはもちろんのこと、テンプレートの色を変更したい人も要チェックです!

デモについて(HTMLとCSSの注意点)

<p class="demo*">背景色「色」を【何々】で指定</p>

今回の基本的なHTMLはこちらになります。
なるべく統一していますが、少し異なる部分があるかもしれません。

あと、デモでは、CSSに背景色(background:)を指定していますが、テキストの色(color:)や線の色(border-color:)などにも使えます。

カラーネームで指定する

主流ではないですが、基本中の基本ですかね。
私はCSS自体が分からず、HTMLで色指定していた時代は、このカラーネームを使っていました。

  background: カラーネーム;
.demo1{
  background: red;
}
.demo2{
  background: darkorange;
}
.demo3{
  background: moccasin;
}

色を文字で指定するだけに、直感的と言えば、直感的な指定方法ですかね。

カラーネームの種類については、「WEB色見本 原色大辞典 – HTML Color Names」を参考にしてみてください。
カラーネームで、こんなにいろんな色を指定できるなんて、初めて知りました。

ただ、変わった色の指定はOSやブラウザなど、環境によって正常に表示されないことがあるので注意しましょう。

See the Pen color_value_color_name by webfeelfree (@webfeelfree) on CodePen.4259

カラーコード(#)で指定する

現在、主流となっている指定方法です。
色指定を16進数(0~f)で指定する方法になります。

  background: #rgb;
  background: #rrggbb;
.demo4{
  background: #f0f;
}
.demo5{
  background: #ff00ff;
}

この方法には、「3桁」で指定する方法と「6桁」で指定する方法があります。

「r」は赤、「g」は緑、「b」は青に対応しています。
「0」が薄くて、「f」が濃い(強い)、そんなイメージでお願いします。

桁数が多い分、6桁の方が指定できる色の数が多いですが、物凄くこだわった色や、微妙な色具合を指定してしまうと、表示環境によっては、うまく表示されないことがあるので気をつけましょう。

また、色づくりで困った時には、「カラーピッカー」で検索すると「カラーピッカー – 原色大辞典」のような、Webサービスが出てくるので参考にしてみてください。

See the Pen zFDrn by webfeelfree (@webfeelfree) on CodePen.4259

あと、6桁を3桁に省略することができます。
デモを見比べてみるとわかると思うのですが、各rgbで値が重複する場合、省略することができます。

省略のメリットとしては、色の指定は頻繁に書くので、
・コーディングが、少し楽になるということ
・ファイルサイズが、若干軽くなること
にメリットがあるという感じです。

あっ、4桁に省略とか、そういう変わったことは出来ません。

rgb、rgbaで指定する

この方法は、私的には、他のWebサイトでも、あまりお目にかかってなく使ってない方法でした。
が、CSS3が主流になってきている今、半透明も使えるようになったので、使うようになってきた指定方法です。

  background: rgb(赤の量,緑の量,青の量);
.demo6{
  background: rgb(255,0,0);
}
.demo7{
  background: rgb(0%,100%,0%);
}

まずは、旧型と言っては何ですが・・・古いブラウザでも表現できる色指定になります。
数値(0~255)・%(0%~100%)で指定する方法があります。

コードを見ての通り、左から赤・緑・青(r・g・b)に対応しています。

0(0%)が薄く、255(100%)が濃いという感じです。

  background: rgba(赤の量,緑の量,青の量,透明度);
.demo8{
  background: rgba(0,0,0,0.2);
}
.demo9{
  background: rgba(0%,0%,0%,0.2);
}

先ほどの「rgb」に、透明度「a」(1~0)を加えた指定方法です。

4つ目の値が、透明度の指定をする箇所になります。
「1」が不透明で、「0」が透明(非表示)になり、小数点を使って指定します。

この方法は、CSS3で追加された指定方法で、古いブラウザには対応していない場合があるので、使うときには注意が必要です。

この指定方法に慣れない私は、カラーコード(16進数)で色を作って、「カラーコード変換|各種設定用のカラーコードに変換 | すぐに使える便利なWEBツール | Tech-Unlimited」のような、Webサービスで変換しています。

See the Pen roaym by webfeelfree (@webfeelfree) on CodePen.4259

hsl、hslaで指定する

今後、主流になりそうな?指定方法です。
この方法も、CSS3で新たに追加された方法なので、古いブラウザに対応していない場合があるので気をつけましょう。

慣れるまで難しそうですが、評判では?より直感的に指定できる方法のようです。
また、ハードウェア環境に依存しない色の表現ができるみたいですね。

  background: hsl(色相,彩度,輝度);
  background: hsla(色相,彩度,輝度,透明度);
.demo10{
  background: hsl(0,100%,50%);
}
.demo11{
  background: hsla(180,100%,50%,0.5);
}

1つ目の「色相(Hue)」は、0~359の値で指定します。
この値は、角度になります。
何の角度?ってなりますよね?
これは、色味を表す色相環の角度になります。
色相環

0度を赤とした、こんな感じの色相環がだいたいのイメージです。
0度が赤、120度が緑、240度が青という具合に対応します。

次に、2つ目の値は「彩度(Saturation)」です。
この値は、0%~100%で指定します。
彩り鮮やかさということで、0%は灰色で、100%に向かって純色になっていきます。

3つ目の値は「輝度(Luminance/Lightness)」になります。
この値も、0%~100%で指定します。
輝度だけに、発光の度合いに相当し、0%は黒、100%は白となり、純色を表現したい場合は50%を指定します。

以上、3つの値で色を作っていきます。

そして、4つ目の値は「透明度(alpha value)」です。
これは、1~0の値で指定します。
1が不透明で、0が透明(非表示)となり、小数点を使って指定します。
この値は、省略することもでき、省略したときの値は「1」となります。

この方法は、直感的とはいえ、16進数で色指定してきた人には、なかなか慣れないと思います。
慣れるまでは、以下のWebサイトなどで変換してみてはいかがでしょうか?
HSL to RGB | RGB to HSL | Colour Calculator | Hex Color Converter
表色系の相互変換 – Programming/Tips – 総武ソフトウェア推進所

See the Pen ogLBq by webfeelfree (@webfeelfree) on CodePen.4259

あとがき

何気なく、書こうと思っていたのですが、調べていくうちに、「hsl」なんて新しいものが加わっていたりと、またまた勉強になりました。

透明化は、非常に便利で、クールなデザインには欠かせない指定方法だと思います。
繰り返しになりますが、CSS3で追加されたので古いブラウザには対応していない部分もありますが、対応するブラウザの方が増えてきているので、どんどん使ってみてはいかがでしょうか?

あと、色の指定方法ないよね?うん、ないよね。
あったら追記します。

参考
CSS3 で追加された HSL の使い方 | TM Life

最新記事

読まれている記事

ツイッター

カテゴリー