このツールに問題がありますか?
「画像から色を抽出 オンライン」について
できること
画像からのカラーピッカーは、自分の画像用のスポイトです。画像を読み込み、ある地点をクリックすると、ツールがそのピクセルの正確な色を読み取って表示します。当て推量も手作業の色合わせも不要—欲しい色を指し示せば、その正確な値がすぐ返ってきます。
表示される値
採取ごとに三つの形式が同時に示されます: #3b82f6 のような HEX、rgb(59, 130, 246) のような RGB、hsl(217, 91%, 60%) のような HSL。各値にワンクリックのコピーボタンが付いているので、色をそのまま CSS・デザインツール・ドキュメントに入れられます。ウェブ & デザインの作業では、たいてい HEX が欲しい値です。
採取した色の履歴
ツールは採取した色の履歴を見本のスウォッチの列として保持します。画像の複数箇所からサンプリングすると各色が保存され、比較したり、以前の色をコピーしたり、場所を見失わずにパレット全体を組み立てたりできます。一枚の画像から関連する色一式を取り出す最速の方法です。
プライベートでブラウザー内
すべては完全にブラウザー内で動きます。画像は端末上でローカルに読み込まれ、サーバーにアップロードされることは決してありませんので、何もあなたのコンピューターから出ていきません。だから機密のモックアップ、クライアントのロゴ、スクリーンショットにも安全です。ロゴからブランドカラーを抽出する、写真の色を合わせる、スクリーンショットから色を採取するのに使えます。
このツールの使い方
手順
画像をアップロード—端末から。欲しい色を含むロゴ・写真・スクリーンショットを選びます。
画像上の一点をクリックして、そのピクセルの色を採取します。
HEX・RGB・HSL の値を読み、必要なものの隣のコピーボタンを押します。
クリックを続けて色を増やします—それぞれが履歴に追加され、パレットを組み立てられます。
ヒント
- 正確なピクセルには拡大を。色が近接しているとき、画像を大きくすると狙ったピクセルに正確に合わせられます。
- 高画質の画像を使う。くっきりした非圧縮の画像ほど色が忠実です。強い JPEG のノイズは採取するピクセルをずらすことがあります。
- CSS やデザインツールには HEX をコピー。
#値はスタイルシート・Figma・ほとんどのエディターにきれいに貼り付きます。