カラー選択ツールで HD 色と非 HD 色を検査してデバッグする

Jecelyn Yeen

Sofia Emelianova

カラー選択ツールには、color と *-color の宣言を変更するための GUI が用意されており、ワンクリックで HD と HD 以外のカラーの作成、変換、デバッグを行うことができます。

新しい色空間について詳しくは、高解像度 CSS カラーガイドをご覧ください。

カラー選択ツールを開いて色を変更する

カラー選択ツールを使用すると、ワンクリックで色の値を変更できます。

1. [要素] パネルで要素を選択します。

2. [スタイル] ペインで、変更する color 宣言または *-color 宣言を見つけます。

   各 color 値または *-color 値の左側に、その色のプレビューを含む小さな正方形のアイコンがあります。

   

計算された値を調べるには、[計算済み] ペインを使用します。

1. 色の横にあるプレビュー用の正方形をクリックして、カラー選択ツールを開きます。
2. 色を変更するには、カラー選択ツールの UI 要素のいずれかを使用します。

カラー選択ツールの要素

ここでは、カラー選択ツールの各 UI 要素について説明します。

1. シェード。
2. スポイト:スポイトで色をサンプリングするをご覧ください。
3. クリップボードにコピー。[Display value] をクリップボードにコピーします。
4. 表示する値。選択した色空間の引数。
5. コントラスト比。color 値でのみ使用できます。これは、color と background-color の違いです。
6. カラーパレット。正方形をクリックすると、その色が正方形の色に変わります。
7. ガマット境界。この行は、新しい色空間と color() 関数でのみ使用できます。HD 色と非 HD 色の両方を生成できます。この行で HD と非 HD を区別できます。
8. カラー円。表示値を変更するには、この円をシェード全体にドラッグします。
9. 色相スライダー。
10. 不透明度スライダー。
11. 表示する値の切り替えツール。プルダウン リストから色空間を選択します。色の変換をご覧ください。
12. コントラスト比を開きます。対応するセクションが開き、[コントラストの修正] を選択できます。

13. カラーパレット スイッチャー。クリックすると、以下の項目が切り替わります。

    • マテリアル デザイン パレット。
    • カスタム パレットこのパレットに現在の色を手動で追加するには、 をクリックします。
    • CSS 変数パレット。ページ上にあるすべてのカスタム CSS 変数（-- に付加）を一覧表示します。
    • ページの色パレットこのパレットを生成するために、DevTools はスタイルシート内のすべての色を検索します。

色空間を選択する

色空間を選択するには:

1. 色の値の横にあるプレビュー アイコンを Shift キーを押しながらクリックします。プルダウン リストが開きます。

   

2. 次のいずれかの色空間を選択します。

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   または、次のいずれかの新しいスペースに参加します。

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   または、color(<color_space> X X X) 関数で定義されたスペースです。

色の変換

[表示する値の切り替え] を使用して色空間を切り替えると、DevTools によって値が自動的に変換されます。

アイコンにカーソルを合わせると、元の値が表示されます。

次の動画では、実際のコンバージョンを確認できます。

コントラストを修正

color 宣言のコントラストの問題を解決するには:

1. color 値の横にあるカラー選択ツールを開きます。
2. [コントラスト比] セクションを開きます。

3. ガイドラインに沿った色の推奨値を使用します。

   • ガイドラインの横にある をクリックします。
   • 上部の [シェード] プレビューで、対応する線の下にカラー円をドラッグします。

コントラストに関するすべての問題をまとめて確認するには、ウェブサイトを読みやすくするをご覧ください。

スポイトであらゆる色をサンプリングする

のスポイトは、ページと画面上の任意の場所の両方から色をサンプリングできます。

画面上の任意の場所から色を選択するには:

1. カラー選択ツールを開き、次のいずれかを行います。
   • [] ボタンをクリックします。
   • C キーを押してスポイトを有効にします。無効にするには、Esc キーを押します。
2. [スポイト] を有効にした状態で、目的の色にカーソルを合わせ、クリックしてサンプリングします。

この例では、カラー選択ツールに現在のカラー値 rgb(224 255 255 / 15%) が表示されています。Chrome の外側をクリックすると、ピンク色に変わります。