CSS 色
CSS 色 (CSS colors) モジュールは、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱います。
このモジュールが持つ CSS プロパティは color と opacity の 2 つだけですが、20 以上の CSS と SVG プロパティ、CSS 画像、アットルール、@media ルールはこの 2 つのプロパティに依存しています。
色の実演
下記の色構文コンバーターは、現在選択されている色の値を赤緑青 (RGB)、16 進数 (HEX)、色相・彩度・明度 (HSL)、色相・白色度・黒色度 (HWB) の CSS 色形式で表示します。ここでの RGB、HEX、HSL、HWB の色値はすべて、書き方は異なりますが、同じ色値を表します。
カラーピッカーで色を選択し、スライダーで不透明度を選択すると、RGB、HEX、HSL、HWB 値が更新されます。新しい色や不透明度の値を選ぶと、背景とスライダーの色はそれぞれ CSS プロパティの background-color と accent-color によって更新されます。
この色構文コンバーターのコードを見るには、 GitHub でソースをご覧ください。
リファレンス
プロパティ
アットルールと記述子
CSS 色モジュールでは、@color-profile アットルールと、その components、rendering-intent、src 記述子も導入されています。現在、これらの機能に対応しているブラウザーはありません。
関数
CSS 色モジュールでは、device-cmyk() 関数も導入しています。今のところ、この機能に対応しているブラウザーはありません。
データ型
用語集の用語とキーワード
インターフェイス
CSS 色モジュールは、 CSSColorProfileRule インターフェイスも導入しています。今のところ、この機能に対応しているブラウザーはありません。
ガイド
- CSS を使った HTML 要素への色の適用
-
様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。
<color>を値として受け付けるすべての CSS プロパティが関係します。 - CSS 色値
-
色空間と CSS で利用できるさまざまな
<color>関数記法の概要です。 - 賢い色の使用
-
色彩理論とリソース、例えばアクセシブルなカラーパレットを作成するために正しい色を探すこと、コントラスト、カラーで出力される印刷などです。
- 相対色の使用
-
この記事では、 CSS の相対色の構文について説明し、さまざまなオプションが何であるかを示し、いくつかの例を見ていきます。
- 色と明るさの理解
-
色覚障碍（色盲）ユーザー、弱視ユーザー、前庭障碍やその他の神経障碍を持つユーザーを念頭に置いた色知覚と使用することです。
- WCAG 1.4.1: 色コントラスト
-
読みやすさを保証するために要求されるコンテンツの背景と前景のコントラストの説明です。
- CSS 値のシリアライズ
-
CSSOM API がどのように色やその他の値を標準化された文字列表現にシリアライズするか。
関連概念
- 他の仕様の一部である CSS プロパティ:
dynamic-range-limit-mix()関数- 他の仕様の一部である SVG 色プロパティ:
- SVG
color属性 - 色相環（用語）
- 補間（用語）
@font-palette-valuesアットルールのoverride-colors記述子@color-profileアットルール- @media の
color-gamut特性 - @media の
forced-colors特性
仕様書
| Specification |
|---|
| CSS Color Module Level 4 |
| CSS Color Module Level 5 |
関連情報
- CSS 色調整モジュールと
print-color-adjustプロパティ - CSS 画像モジュール（CSS
<gradient>画像を定義） VideoColorSpaceインターフェイス- SVG の
<feColorMatrix>要素 - キャンバス API: スタイルと色の適用
- ツール: