カラー選択ツールは、color
と *-color
の宣言を変更するための GUI を備えており、ワンクリックで非 HD 色と HD カラーを作成、変換、デバッグできます。
新しい色空間について詳しくは、高解像度 CSS カラーガイドをご覧ください。
カラー選択ツールを開いて色を変更する
カラー選択ツールを使用すると、ワンクリックで色の値を変更できます。
- [要素] パネルで要素を選択します。
[Styles] ペインで、変更する
color
宣言または*-color
宣言を見つけます。color
または*-color
の各値の左側に、その色のプレビューを示す小さな正方形のアイコンがあります。
計算された値を調べるには、[Computed] ペインを使用します。
- 色の横にあるプレビュー用の正方形をクリックして、カラー選択ツールを開きます。
- 色を変更するには、カラー選択ツールの 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 以外の場所をクリックすると、この色がピンク色に変わります。