サイトの色を調べる：要素のHEXカラーコードを確認

公開中のサイトで、ボタンや見出しの正確な文字色や背景色など、Webサイトの色を調べたいとき、スクリーンショットから推測する必要はありません。SuperchargeInspectは、そのために作られたWebサイトのカラーインスペクターです。要素にポインターを合わせると、カラーセクションに文字色・背景色・枠線の色が表示されます。ワンクリックでHEXカラーコードをクリップボードにコピーできます。

カラーセクションに表示される内容

カラーセクションには、ポインターを合わせた要素のカラータイルが一覧表示されます。

文字色。要素の文字色で、ブラウザが描画に使用したcolorの値です。

背景色。要素の背景色で、background-colorの値です。

枠線。枠線の色です。要素に実際に枠線がある場合のみ表示されます。

各タイルをクリックすると、その値だけがコピーされます。CSSのカラー値を1つずつコピーして、自分のスタイルシートに貼り付けられます。表示されるのはその要素1つの計算済みの色で、ページ全体の色ではありません。

Webサイトの色を調べる：HEX・RGBA・透明色

コピーされる色の形式は、色の透明度によって異なります。不透明な色は、CSSにそのまま貼り付けられるコンパクトな#rrggbb形式のHEXで出力されます。3つのケースについて、それぞれの場所で得られる形式を下の表にまとめています。

「参照テキストをコピー」では、ブラウザが返した生の値がそのまま一覧表示されるため、計算結果を正確に確認できます。PNGのフッターでは、それらをHEXで表示し、すっきりと短い参照にしています。SuperchargeInspectはHSLを使用しません。

読み取れるもの・読み取れないもの

対応しているのはCSSのカラー値のみです。写真の中の色やグラデーション、背景画像はCSSのカラー値ではないため、タイルには表示されません。

注意点が1つあります。背景色がtransparentと表示される場合、実際に見えている色は背後にある要素のものです。Ctrl+Up（macOSではOption+Up）で親要素に移動し、そこで色を確認してください。

キーボード操作

すべての操作をキーボードで行えます。Alt+Shift+Eを押すと検証を開始します。矢印キーで前後の要素に移動します。Ctrlを押しながらUpまたはDownを押すと、親要素または子要素に移動します。macOSではCtrlの代わりにOptionを使います。

Enterを押すと、選択中の要素を固定します。Escを押すと、要素の選択に戻るか、パネルを閉じます。

すべてがデバイス内で完結

SuperchargeInspectはデバイス上でローカルに動作し、ネットワーク通信を一切行いません。アカウントは不要で、バックグラウンドでの分析もありません。

CSSインスペクターでフォントや余白も確認できます。