【導入編】CSSでの色指定

カラーコードとRGB(A)

CSSやHTMLで色指定するときは、カラーコードかRGBを使用します。
カラーコードとかよくわかんない！難しそう！と思うかもしれませんが、簡単に言うと色の名前を数値化したものになります。

カラーコードやRGBについては、Googleのツールがお勧めです。
Googleカラー選択ツール

ここでカラーコードとRGBについて、それぞれ解説していきます。

カラーコードとは？

カラーコードとは、#（シャープ）で始まる７桁の色を表すコードです。
下のボタンからカラーコードを調べることができます。

←色を選択

ここで取得したカラーコードは、コピーしてそのまま使えます。

RGB(A)とは？

さっきからRGBだったりRGB(A)だったり、どっちなのかハッキリして欲しいと思ったことでしょう。
このAについて説明します。

• Aが有る：透明度を指定できる

　　＜例＞ rgba(255,0,0,0.5)　→　半透明の赤

• Aが無い：透明度は指定しない

　　＜例＞ rgb(255,0,0)　→　赤

これだけの違いです。
RGBAは背景を半透明な色にするときに使っています。

RGBAについては以上です。

カラーコードとRGB(A)の使い分け

RGBAでは透明度が指定できるので、半透明にしたい部分はRGBA、それ以外はカラーコードを使うのが一般的です。

無色透明は？

無色透明にするときは「transparent」と入力します。

便利な色関連サイト

カラーコードや配色のお勧めサイトを紹介します。

Googleカラー選択ツール
冒頭でも紹介したカラーピッカー。カラーコードやRGBを調べることができる。

Color Magic
入力したキーワードに合う色をAIが教えてくれるサイト。
無料だと1日3回まで検索可能。

Colorbase
カラーコードを入力すると合う色を教えてくれるサイト。

おわりに

CSSで好きな色に変えられる一方で、配色によっては文字が読みにくくなってしまいます。
一番大事なのはデザインよりも「読み手に内容を理解してもらうこと」なので、文字色と背景の相性には注意が必要です。

CSS 配色テスター
背景色と文字色が読みにくくならないか確認できるツール。

読者が「また見たい！」と思えるデザイン作りを心掛けていきたいですね。