このツールに問題がありますか?

「画像から色を抽出 オンライン」について

できること

画像からのカラーピッカーは、自分の画像用のスポイトです。画像を読み込み、ある地点をクリックすると、ツールがそのピクセルの正確な色を読み取って表示します。当て推量も手作業の色合わせも不要—欲しい色を指し示せば、その正確な値がすぐ返ってきます。

表示される値

採取ごとに三つの形式が同時に示されます: #3b82f6 のような HEXrgb(59, 130, 246) のような RGBhsl(217, 91%, 60%) のような HSL。各値にワンクリックのコピーボタンが付いているので、色をそのまま CSS・デザインツール・ドキュメントに入れられます。ウェブ & デザインの作業では、たいてい HEX が欲しい値です。

採取した色の履歴

ツールは採取した色の履歴を見本のスウォッチの列として保持します。画像の複数箇所からサンプリングすると各色が保存され、比較したり、以前の色をコピーしたり、場所を見失わずにパレット全体を組み立てたりできます。一枚の画像から関連する色一式を取り出す最速の方法です。

プライベートでブラウザー内

すべては完全にブラウザー内で動きます。画像は端末上でローカルに読み込まれ、サーバーにアップロードされることは決してありませんので、何もあなたのコンピューターから出ていきません。だから機密のモックアップ、クライアントのロゴ、スクリーンショットにも安全です。ロゴからブランドカラーを抽出する写真の色を合わせるスクリーンショットから色を採取するのに使えます。

このツールの使い方

手順

  1. 画像をアップロード—端末から。欲しい色を含むロゴ・写真・スクリーンショットを選びます。

  2. 画像上の一点をクリックして、そのピクセルの色を採取します。

  3. HEX・RGB・HSL の値を読み、必要なものの隣のコピーボタンを押します。

  4. クリックを続けて色を増やします—それぞれが履歴に追加され、パレットを組み立てられます。

ヒント

  • 正確なピクセルには拡大を。色が近接しているとき、画像を大きくすると狙ったピクセルに正確に合わせられます。
  • 高画質の画像を使う。くっきりした非圧縮の画像ほど色が忠実です。強い JPEG のノイズは採取するピクセルをずらすことがあります。
  • CSS やデザインツールには HEX をコピー。# 値はスタイルシート・Figma・ほとんどのエディターにきれいに貼り付きます。