文字とその装飾の色を設定する

CSS - color

概要

CSSプロパティ「color」は、文字やその装飾に対しての色を指定することができます。

<p class="color-red">colorプロパティに赤色を指定します</p>
<p class="color-blue">colorプロパティに青色を指定します</p>
<style>
.color-red {
  color: red;
}
.color-blue {
  color: blue;
}
</style>

値の指定方法

{ color: 値 }

値として以下のような指定をすることができます。

説明
カラーネームred, blueなどのカラーネーム
16進数3桁ないし6桁のカラーコード
RGB表記 RGBの各要素に対応する0~255までの数字をカンマで区切って指定
RGB表記 RGBの各要素に対応する0~100%の数字をカンマで区切って指定
hsl表記色相,彩度,輝度を指定

新しい指定方法としてのhsl

hslとは色相(Hue),彩度(Saturation ),輝度(Luminance/Lightness)の略でcss3で提唱されている新しい指定方法です。色相環の角度を指定し、彩度、輝度をパーセントで指定します。以下に実際に指定した例を記述しますので、確認してみてください。

使用方法

「赤色」を異なった記述方法で指定してみましょう。

<p class="color-name">colorプロパティにカラーネームを指定します</p>
<p class="color-code">colorプロパティにカラーコードを指定します</p>
<p class="color-rgb">colorプロパティにRGB(数字)を指定します</p>
<p class="color-percent">colorプロパティにRGB(割合)を指定します</p>
<p class="color-rgba">colorプロパティにRGBA(透過)を指定します</p>
<p class="color-hsl">colorプロパティにhslを指定します</p>
<p class="color-hsla">colorプロパティにhsla(透過)を指定します</p>
<style>
.color-name {
  color: red;
}
.color-code {
  color: #ff0000;
}
.color-rgb {
  color: rgb(255, 0, 0);
}
.color-percent {
  color: rgb(100%, 0%, 0%);
}
.color-rgba {
  color: rgba(255, 0, 0, 0.3);
}
.color-hsl {
  color: hsl(0,100%,50%);
}
.color-hsla {
  color: hsla(0,100%,50%, 0.3);
}
</style>

仕様書

関連CSSプロパティ