`alpha` and `colorspace` attributes for `<input type=color>`
<input> 要素の color は視覚的なインターフェイス、もしくは #rrggbb の 16 進数表記でテキストを入力することでユーザーが色を指定することができるユーザーインターフェイス要素を提供します。
CSS の色表現には他にも色名、関数表記、アルファ値つきの 16 進表記などがありますが、ここでは（アルファ値のない）基本的な 16 進の色のみが利用できます。
この要素の外見は、ブラウザーやプラットフォームによって大きく異なります。基本的なテキストの入力欄で、入力された色情報が文字列の検証のみを行う入力欄であったり、プラットフォームの標準カラーピッカーや、独自のピッカーウィンドウを表示するなど、ブラウザーやプラットフォームにより大きく異なることがあります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| | | | 18.4 | | 18.4 | |
| HTML 属性 | ||||||
alpha 実験的 | | | Preview | 18.4 | | 18.4 |
colorspace 実験的 input 要素の color は視覚的なインターフェイス、もしくは #rrggbb の 16 進数表記でテキストを入力することでユーザーが色を指定することができるユーザーインターフェイス要素を提供します。 | | | Preview | 18.4 | | 18.4 |
| DOM API | ||||||
| colorSpace は HTMLInputElement インターフェイスのプロパティで、input 要素の colorspace 属性を反映し、シリアライズされた CSS 色のcolor spaceが sRGB （デフォルト）か display-p3 かを示します。これは color コントロールでのみ関連します。 | | | 149 | 18.4 | | 18.4 |
基本構文
<label>Color (with transparency):
<input type="color" value="#3498dbcc">
</label>ライブデモ
Alpha-enabled picker
Use the alpha attribute when the browser supports transparency in color inputs.
実務での使いどころ
-
`alpha` and `colorspace` attributes for `<input type=color>` の活用
<input> 要素の color は視覚的なインターフェイス、もしくは #rrggbb の 16 進数表記でテキストを入力することでユーザーが色を指定することができるユーザーインターフェイス要素を提供します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。