DevTools では、値を入力しなくても、数回クリックするだけで色を作成できます。
以下の DevTools のヒント動画では、カラー オーサリングの基本的な機能を紹介しています。ただし、この動画のリリース以降、いくつかの機能が実装され、1 つの機能はサポート終了となりました。
色をすばやく書き込む方法については、以下の動画と最新のドキュメントをご覧ください。
カラー表示形式メニューを開くには、Shift キーを押しながら、カラー値の横にあるカラー プレビュー ボックスをクリックします。
動画に示すように、カラー選択ツールを使用して色を編集およびコピーします。
スポイトで、画面上の好きな色を選択できます。
この動画では、次のようになっています。
- 角度時計を使用して勾配値を変更します。
- カスタム CSS 変数をカラーパレットとして使用します。
HD と非 HD の色を変換するには、コマンド メニューのショートカットで形式を変更するのではなく、カラー形式メニューを使用します。
この動画に示すように、[CSS Overview] パネルでページのすべての色の概要を確認できます。
詳しくは以下をご覧ください。