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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

カラー選択ツールは、color 宣言と *-color 宣言を変更するための GUI を提供します。また、クリックするだけで非 HD 色と HD 色の作成、変換、デバッグを行うことができます。

新しいカラースペースの詳細については、高精細 CSS カラーガイドをご覧ください。

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

カラー選択ツールを使用して、クリックするだけで色の値を変更できます。

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

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

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

    色のプレビュー。

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

color-mix() の計算値。

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

カラー選択ツールの要素

カラー選択ツールの各 UI 要素の説明は次のとおりです。

カラー選択ツール（注釈付き）。

  1. Shades。
  2. スポイト。スポイトツールで画面上の任意の色をサンプリングするをご覧ください。
  3. [クリップボードにコピー] をクリックします。[表示値] をクリップボードにコピーします。
  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. 次のいずれかのカラースペースを選択します。

    または、新しいスペースのいずれか:

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

色を変換する

表示値スイッチャーで色空間を切り替えると、DevTools は値を自動的に変換します。

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

ガマット クリッピングを示す警告アイコンと、元の値を示すツールチップ。

次の動画では、変換の動作を確認できます。

コントラストを修正する

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

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

  3. ガイドラインに準拠した推奨色を使用します。

    • ガイドラインの横にある 色候補を使用します。 をクリックします。
    • 上部の [Shades] プレビューで、対応する線の下に [Color circle] をドラッグします。

APCA ガイドラインを含むコントラスト比セクションが展開された状態。

デフォルトでは、カラー選択ツールは APCA に準拠した値を提案します。

また、WebAIM ガイドラインに準拠した値を提案するように設定することもできます。設定] をタップします。 [設定] > [設定] > [要素] で、[チェックボックス。 Advanced Perceptual Contrast Algorithm（APCA）...] チェックボックスをオフにします。

コントラストに関するすべての問題を一度に確認するには、ウェブサイトの読みやすさを向上させるガイドをご覧ください。

スポイトツールで任意の場所の色をサンプリングする

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

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

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

画面上の任意の場所でスポイトを使用する。

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