CSS 色 (CSS Color) は、色、色の種類、色の混合、透過性、そしてどのようにこれらの色や効果を HTML コンテンツに適用するかを扱う CSS のモジュールです。 <color> を値として取る CSS プロパティがすべてこのモジュールの一部であるとは限りませんが、このモジュールに依存することがあります。

リファレンス

プロパティ

データ型

ガイド

CSS を使った HTML 要素への色の適用
様々な種類のコンテンツに CSS を使って色を適用するためのガイドです。色に関するすべての CSS プロパティが関係します。

ツール

色選択ツール
このツールは独自の色を簡単に作成、調整、実験することができます。

仕様書

仕様書 状態 備考
CSS Color Module Level 4 草案  
CSS Color Module Level 3 勧告  
CSS Level 2 (Revision 1) 勧告  
CSS Level 1 勧告 初回定義

ブラウザーの対応

color プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 1Chrome Android 完全対応 18Edge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Keyword color valuesChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3
補足
完全対応 3
補足
補足 Internet Explorer 8 and later support gray color keywords spelled with an e (grey, darkgrey, darkslategrey, dimgrey, lightgrey, and lightslategrey). Internet Explorer 3 to Internet Explorer 7 only support the keywords spelled with a (gray, darkgray, darkslategray, dimgray, lightgray, and lightslategray).
Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
RGB hexadecimal notation (#RRGGBB, #RGB)Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
RGB functional notation (rgb())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
HSL color values (hsl())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
Alpha color values (rgba(), hsla())Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3IE 完全対応 9Opera 完全対応 10Safari 完全対応 3.1WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
currentcolorChrome 完全対応 1Edge ? Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 4WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
transparentChrome 完全対応 1Edge ? Firefox 完全対応 3IE 完全対応 9Opera 完全対応 10Safari 完全対応 3.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
rebeccapurpleChrome 完全対応 38Edge ? Firefox 完全対応 33IE 完全対応 11Opera 完全対応 25Safari 完全対応 ありWebView Android 完全対応 ありChrome Android ? Edge Mobile ? Firefox Android 完全対応 33Opera Android ? Safari iOS 完全対応 8Samsung Internet Android ?
RGBA hexadecimal notation (#RRGGBBAA, #RGBA)Chrome 完全対応 62
完全対応 62
完全対応 52
無効
無効 From version 52: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 未対応 なしFirefox 完全対応 49IE ? Opera 完全対応 39
無効
完全対応 39
無効
無効 From version 39: this feature is behind the Enable experimental Web Platform features preference.
Safari 完全対応 9.1WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android ? Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?
Space-separated functional color notationsChrome 完全対応 65Edge ? Firefox 完全対応 52IE ? Opera 完全対応 52Safari ? WebView Android 完全対応 65Chrome Android 完全対応 65Edge Mobile ? Firefox Android 完全対応 52Opera Android 完全対応 52Safari iOS ? Samsung Internet Android ?
Allow floats in rgb() and rgba()Chrome 完全対応 66Edge ? Firefox 完全対応 52IE ? Opera 完全対応 53Safari ? WebView Android 完全対応 66Chrome Android 完全対応 66Edge Mobile ? Firefox Android 完全対応 52Opera Android 完全対応 53Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

color-adjust プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 49
接頭辞付き
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 未対応 なしFirefox 完全対応 48IE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 6
接頭辞付き
完全対応 6
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 48Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

opacity プロパティ

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
完全対応 1
未対応 1 — 3.5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 9Opera 完全対応 9Safari 完全対応 1.2WebView Android 完全対応 1Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 9Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,