状態を確認できませんでした。
Webスポイトツール
ゲスト 無料ユーザ 未ログイン 利用回数：制限なし
このツールについて
画面上の気になる色を選び、HEX・RGB・HSLの値を確認・コピーできます。色を選ぶ際は、ブラウザ外の画面も選択できます。
色を選ぶと、値はこのページ内だけで変換されます。
このブラウザでは画面から色を取得できません。PC版のChromeまたはEdgeでお試しください。
画面から取得したい色を選んでください。
色を選ぶと、おすすめの文字色を表示します。
使い方ガイド Webスポイトツール
画面で見つけた色を、そのまま色の値に。
Webページや画像など、画面上の気になる色を選び、HEX・RGB・HSLの値を確認できます。資料やWeb制作で色をそろえたいときに、選択した色の値をコピーして使えます。
使い方
- STEP 01
色のある画面を用意する
取得したい色が見える状態にします。対応ブラウザでは、ブラウザの外に表示されている画面の色も選べます。
- STEP 02
画面から色を選ぶ
「画面から色を選ぶ」を押し、スポイトで目的の場所をクリックします。中止するときはEscキーを使います。
- STEP 03
値を確認してコピーする
取得した色とHEX・RGB・HSLを確認し、使いたい形式のコピーボタンを押します。白文字・黒文字の表示例も確認できます。
色の値の使い分け
- HEX
- 「#336699」のように表す色のコードです。Webやデザインツールの色指定に使われます。
- RGB
- 赤・緑・青の量で色を表します。RGB入力に対応するアプリで使えます。
- HSL
- 色相・彩度・明度で色を表します。色味や明るさを調整するときの目安になります。
- おすすめの文字色
- 選択した背景色に対する白文字・黒文字の見え方を示します。実際の文字サイズや掲載場所でも読みやすさを確認してください。
見本の見出しの塗り色をスポイトで選び、HEXをコピーして、作成中の資料の色設定に貼り付けます。
こんな場面で役立ちます
見本の色を確認
画面上に表示された色を値として取り出します。
資料の配色を統一
複数の図形や見出しに同じ色を指定します。
文字色の検討
白文字と黒文字の見え方を比較します。
処理とデータの扱い
選んだ色の値はページ内で変換・表示します。色の選択にあたり、画面全体の画像をこのサイトへアップロードする操作はありません。
よくある質問
スマートフォンでも使えますか？
画面からの色取得はブラウザの対応状況に依存します。利用できないと表示された場合は、PC版ChromeまたはEdgeでお試しください。
画像ファイルを読み込む必要はありますか？
必要ありません。取得したい色を画面に表示して選びます。画像をアップロードするツールではありません。
思った色と違うのはなぜですか？
文字の輪郭やグラデーション部分は、選ぶ位置で色が変わります。色が均一な部分を選び直してください。
透明度も取得できますか？
画面に表示された色を取得します。元画像やCSSに設定された透明度そのものを読み取る機能ではありません。
