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

Jecelyn Yeen 氏
ソフィア・エメリアノバ
Sofia Emelianova
GitHub

カラー選択ツールは、color と *-color の宣言を変更するための GUI を備えており、ワンクリックで非 HD 色と HD カラーを作成、変換、デバッグできます。

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

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

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

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

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

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

    カラーのプレビュー。

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

color-mix() の計算値。

  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. 次のいずれかの色空間を選択します。

    新しいスペースでは、

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

色を変換する

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

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

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

次の動画では、実際のコンバージョンを示しています。

コントラストを修正

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

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

  3. ガイドラインに準拠した色の候補を使用してください。

    • ガイドラインの横にある 提案された色を使用します。 をクリックします。
    • 上部の [シェード] プレビューで、対応する線の下に色付きの円をドラッグします。

WebAIM または APCA のガイドラインが追加されたコントラスト比セクション。

] チェックボックスをオンにします。

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

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

スポイト。 スポイトは、ページと画面上のどこからでも色をサンプリングできます。

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

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

スポイトは、画面上のどこからでも使用できます。

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