color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS の color プロパティは、要素のテキストやテキスト装飾における前景色の色の値を設定し、 currentcolor の値を設定します。currentcolor は他のプロパティの間接的な値として使用される可能性があり、 border-color のような他の色に関するプロパティの既定値にもなったりします。

試してみましょう

color: rebeccapurple;

color: #00a400;

color: rgb(214, 122, 127);

color: hsl(30deg 82% 43%);

color: hsla(237deg 74% 33% / 61%);

color: hwb(152deg 0% 58% / 70%);

<section id="default-example">
  <div class="example-container">
    <p id="example-element">
      London. Michaelmas term lately over, and the Lord Chancellor sitting in
      Lincoln's Inn Hall. Implacable November weather.
    </p>
  </div>
</section>

#example-element {
  font-size: 1.5em;
}

.example-container {
  background-color: white;
  padding: 10px;
}

HTML における色の使用の概要については、CSS を使用した HTML 要素への色の適用をご覧ください。

構文

css

/* キーワード値 */
color: currentcolor;

/* <named-color> 値 */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* <hex-color> 値 */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* <rgb()> 値 */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* <hsl()> 値 */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* グローバル値 */
color: inherit;
color: initial;
color: revert;
color: unset;

color プロパティは単一の <color> 値で指定します。

なお、値は color の形でなければなりません。 <gradient> は実際の型が <image> であるため使用できません。

アクセシビリティの考慮

背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度に高いことを確認することが重要です。

色のコントラスト比は、テキストおよび背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

公式定義

初期値	`canvastext`
適用対象	すべての要素とテキスト。 `::first-letter`および`::first-line` にも適用されます。
継承	あり
計算値	色の計算値
アニメーションの種類	計算値の型による

形式文法

color = 
  <color>

例

テキストを赤くする

以下の例はすべて、要素のテキストを赤色にします。

css

p {
  color: red;
}
p {
  color: #f00;
}
p {
  color: #ff0000;
}
p {
  color: rgb(255, 0, 0);
}
p {
  color: rgb(100%, 0%, 0%);
}
p {
  color: hsl(0, 100%, 50%);
}

/* 50% 透過 */
p {
  color: #ff000080;
}
p {
  color: rgba(255, 0, 0, 0.5);
}
p {
  color: hsla(0, 100%, 50%, 0.5);
}

仕様書

Specification
CSS Color Module Level 4 # the-color-property
Scalable Vector Graphics (SVG) 2 # ColorProperty