color
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
color は CSS のプロパティで、要素のテキストやテキスト装飾における前景色の色の値を設定し、 currentColor の値を設定します。currentColor は他のプロパティの間接的な値として使用される可能性があり、 border-color のような他の色に関するプロパティの既定値にもなったりします。
試してみましょう
color: rebeccapurple;
color: #00a400;
color: rgb(214 122 127);
color: hsl(30deg 82% 43%);
color: hsl(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 要素への色の適用をご覧ください。
構文
/* キーワード値 */
color: currentColor;
/* <named-color> 値 */
color: red;
color: orange;
color: tan;
color: rebeccapurple;
/* <hex-color> 値 */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;
/* <rgb()> と古い <rgba()> 値 */
color: rgb(34, 12, 64);
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.6);
color: rgb(34.6 12 64 / 60%);
color: rgba(34.6 12 64 / 60%);
/* <hsl()> と古い <hsla()> 値 */
color: hsl(30, 100%, 50%);
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.2 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);
/* <hwb()> 値 */
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);
/* グローバル値 */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;
color プロパティは単一の <color> 値で指定します。
なお、値は単一の色でなければなりません。 <gradient> は実際の型が <image> であるため使用できません。
値
<color>-
要素のテキストや装飾部分の色を設定します。
currentColor-
要素の
colorプロパティの値に色を設定します。ただし、colorの値として設定された場合、currentColorはinheritとして扱われます。
アクセシビリティ
背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページのコンテンツを読むことができる程度に高いことを確認することが重要です。
色のコントラスト比は、テキストおよび背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。
公式定義
| 初期値 | canvastext |
|---|---|
| 適用対象 | すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。 |
| 継承 | あり |
| 計算値 | 色の計算値 |
| アニメーションの種類 | 計算値の型による |
形式文法
color =
<color>
例
テキストを赤くする
以下の例はすべて、要素のテキストを赤色にします。
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: rgb(255 0 0 / 50%);
}
p {
color: hsl(0 100% 50% / 50%);
}
仕様書
| Specification |
|---|
| CSS Color Module Level 4 # the-color-property |
| Scalable Vector Graphics (SVG) 2 # ColorProperty |
ブラウザーの互換性
Loading…
関連情報
<color>データ型- 他の色に関するプロパティ:
background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color,column-rule-color,print-color-adjust - SVG の
color属性 color()関数- CSS を使用した HTML 要素への色の適用
- WCAG: 色のコントラスト