カラー選択ツールには、color と *-color の宣言を変更するための GUI が用意されており、ワンクリックで HD と HD 以外のカラーの作成、変換、デバッグを行うことができます。
新しい色空間について詳しくは、高解像度 CSS カラーガイドをご覧ください。
カラー選択ツールを開いて色を変更する
カラー選択ツールを使用すると、ワンクリックで色の値を変更できます。
- [要素] パネルで要素を選択します。
[スタイル] ペインで、変更する
color宣言または*-color宣言を見つけます。各
color値または*-color値の左側に、その色のプレビューを含む小さな正方形のアイコンがあります。
計算された値を調べるには、[計算済み] ペインを使用します。
- 色の横にあるプレビュー用の正方形をクリックして、カラー選択ツールを開きます。
- 色を変更するには、カラー選択ツールの UI 要素のいずれかを使用します。
カラー選択ツールの要素
ここでは、カラー選択ツールの各 UI 要素について説明します。
- シェード。
- スポイト:スポイトで色をサンプリングするをご覧ください。
- クリップボードにコピー。[Display value] をクリップボードにコピーします。
- 表示する値。選択した色空間の引数。
- コントラスト比。
color値でのみ使用できます。これは、colorとbackground-colorの違いです。 - カラーパレット。正方形をクリックすると、その色が正方形の色に変わります。
- ガマット境界。この行は、新しい色空間と
color()関数でのみ使用できます。HD 色と非 HD 色の両方を生成できます。この行で HD と非 HD を区別できます。 - カラー円。表示値を変更するには、この円をシェード全体にドラッグします。
- 色相スライダー。
- 不透明度スライダー。
- 表示する値の切り替えツール。プルダウン リストから色空間を選択します。色の変換をご覧ください。
- コントラスト比を開きます。対応するセクションが開き、[コントラストの修正] を選択できます。
カラーパレット スイッチャー。クリックすると、以下の項目が切り替わります。
- マテリアル デザイン パレット。
- カスタム パレットこのパレットに現在の色を手動で追加するには、
をクリックします。 - CSS 変数パレット。ページ上にあるすべてのカスタム CSS 変数（
--に付加）を一覧表示します。 - ページの色パレットこのパレットを生成するために、DevTools はスタイルシート内のすべての色を検索します。
色空間を選択する
色空間を選択するには:
色の値の横にあるプレビュー アイコンを Shift キーを押しながらクリックします。プルダウン リストが開きます。
次のいずれかの色空間を選択します。
または、次のいずれかの新しいスペースに参加します。
または、
color(<color_space> X X X)関数で定義されたスペースです。
色の変換
[表示する値の切り替え] を使用して色空間を切り替えると、DevTools によって値が自動的に変換されます。
アイコンにカーソルを合わせると、元の値が表示されます。
次の動画では、実際のコンバージョンを確認できます。
コントラストを修正
color 宣言のコントラストの問題を解決するには:
color値の横にあるカラー選択ツールを開きます。- [コントラスト比]
セクションを開きます。 ガイドラインに沿った色の推奨値を使用します。
- ガイドラインの横にある
をクリックします。 - 上部の [シェード] プレビューで、対応する線の下にカラー円をドラッグします。
- ガイドラインの横にある
コントラストに関するすべての問題をまとめて確認するには、ウェブサイトを読みやすくするをご覧ください。
スポイトであらゆる色をサンプリングする
のスポイトは、ページと画面上の任意の場所の両方から色をサンプリングできます。
画面上の任意の場所から色を選択するには:
- カラー選択ツールを開き、次のいずれかを行います。
- [
] ボタンをクリックします。 - C キーを押してスポイトを有効にします。無効にするには、Esc キーを押します。
- [
- [スポイト] を有効にした状態で、目的の色にカーソルを合わせ、クリックしてサンプリングします。
この例では、カラー選択ツールに現在のカラー値 rgb(224 255 255 / 15%) が表示されています。Chrome の外側をクリックすると、ピンク色に変わります。