<input type="color">
<input> 要素の color は視覚的なインターフェイス、もしくは #rrggbb の 16 進数表記でテキストを入力することでユーザーが色を指定することができるユーザーインターフェイス要素を提供します。
CSS の色表現には他にも色名、関数表記、アルファ値つきの 16 進表記などがありますが、ここでは（アルファ値のない）基本的な 16 進の色のみが利用できます。
この要素の外見は、ブラウザーやプラットフォームによって大きく異なります。基本的なテキストの入力欄で、入力された色情報が文字列の検証のみを行う入力欄であったり、プラットフォームの標準カラーピッカーや、独自のピッカーウィンドウを表示するなど、ブラウザーやプラットフォームにより大きく異なることがあります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 20 | 14 | 29 | 12.1 | 25 | 12.2 | |
基本構文
HTML
<label>Theme Color:
<input type="color" value="#3498db">
</label>ライブデモ
実務での使いどころ
-
<input type="color"> の活用
<input> 要素の color は視覚的なインターフェイス、もしくは #rrggbb の 16 進数表記でテキストを入力することでユーザーが色を指定することができるユーザーインターフェイス要素を提供します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。