CSSで色を指定する方法や、配色について説明していきます。
文字色の指定方法
CSSで文字色を指定することが出来ます。
主に以下の方法があります。
カラーコード
16進数を使用した6桁の英数字を指定する方法です。
カラーコードは「＃」からはじまり、数字の０～９とアルファベットのa～fを組合せます。
6桁のうち、左２つが赤色、真ん中２つが緑色、右２つが青色の構成です。
０になるほど色は暗くなり、fに近くなるほど色は明るくなります。
p{
color: #ffffff; /*白*/
}
RGB
RGBの数字を組み合わせて指定する方法です。
R＝赤、G＝緑、B＝青という表現です。
数値は０～250まであり、０が一番暗く数値が上がるほど明るくなります。
例えば、「agb（255,255,255）」は白、「agb（0,0,0）」は黒を表します。
また、透明度を表すAlpha値も指定出来ます。
その場合は、「rgba」となり透明度を、０～１の間で記述出来ます。
０は透明、１は不透明を表します。
p{
color:rgba(255,0,0,.5);
}
カラー名
色の名前で指定する方法です。
赤なら「red」などを指定してあげます。
連想しやすく便利ですが、色の種類が少ないデメリットがあります。
p{
color:red;
}
HSL / HSLA
この後の「配色」で説明する内容を指定する方法です。
hsl（色相,彩度,明度）という構成です。
hslaの場合は、rgbaと同じく透明度まで指定出来ます。
background:hsla(200,60%,50%,.3);
背景色の指定方法
背景色は「background-color」プロパティを使用します。
文字色と同じく、カラーコードや色の名前を基準します。
body{
background-color: #fee;
}
配色
色は「色相・明度・彩度」の3つの要素から成り立っています。
色相
赤・黄・緑・青などの言葉で区別される色の違いのことです。
個別に独立しておらず、つながりのある円状にならべた「色相環」があります。
反応にある色を補色といい、隣り合う色を類似色相といいます。
明度
色の明るさの度合いを表します。
明度が高いと白に近づき、明度が低いと黒に近づきます。
彩度
色の鮮やかさの度合いを表します。
彩度が高いと鮮やかで華やかなイメージになり、彩度が低いと渋く大人っぽいイメージになります。
色の比率
色には「ベースカラー」、「メインカラー」、「アクセントカラー」の3つが存在します。
以下には、役割と全体のおすすめ割合を載せています。
- ベースカラー：デザイン基盤、背景色、70％
- メインカラー：最も見てほしい色、テーマ、25％
- アクセントカラー：デザイン引締め、ワンポイント、5%
コメント