画像から色を選択

どの画像からも瞬時に色を抽出。1クリックでHEX、RGB、HSLの値を取得。ブラウザ内で完全に動作し、最大限のプライバシーを確保。

  • 色を選択するためにクリック - 画像のどのポイントでもクリックして正確な色を抽出
  • 複数の形式 - 即座にHEX、RGB、HSL形式の色を取得
  • システム色選択ツール - EyeDropper APIを使用してスクリーンのどこからでも色を選択
  • 色履歴 - 最後に16色を選択した色を自動的に保存し、迅速な参照用
  • 100% プライベート - 全ての処理はブラウザ内でローカルに行われます。アップロードは必要ありません

ここに画像をクリックまたはドラッグしてアップロードしてください

JPG、PNG、GIF、WebPおよびその他の形式をサポートしています

使い方

画像から色を抽出し、システムの色選択ツールを使用するためのステップバイステップのガイドに従ってください。

画像から色を選ぶ

2分

数秒でどの画像ファイルから色を抽出するかを学びます。

  1. 1

    画像をアップロード

    アップロードエリアをクリックしたり、画像ファイルをドラッグ&ドロップしてください。JPG、PNG、GIF、WebPおよびすべての一般的な画像形式をサポートしています。

  2. 2

    色を選ぶためにクリック

    画像上にカーソルを移動し、任意のピクセルをクリックしてください。ツールはその場所の正確な色を即座に抽出します。

  3. 3

    色形式を表示

    選んだ色をHEX(#RRGGBB)、RGB(r、g、b)、HSL形式で見ることができます。各形式は色のプレビュースワッチを表示します。

  4. 4

    色コードをコピー

    任意の形式の横にあるコピーボタンをクリックしてコピーしてください。すぐにデザインツールやコードで使用できます。

システム色選択ツールの使用方法

1分

スクリーンのどこからでも色を選ぶための内蔵のeyedropperツールの使用方法を学びます。

  1. 1

    ブラウザのサポートを確認

    ブラウザがEyeDropper APIをサポートしている場合(Chrome、Edge、および一部のChromiumブラウザ)、システムの色ピッカーボタンが表示されます。

  2. 2

    EyeDropperを有効にする

    'システム色ピッカーを使用'ボタンをクリックします。カーソルは拡大鏡/eyedropperアイコンに変わります。

  3. 3

    どこからでも色を選ぶ

    スクリーンのどのピクセル(アップロードされた画像だけでなく)に拡大鏡を移動し、クリックしてその色をキャプチャします。

  4. 4

    色がキャプチャされました

    選択した色がすべての形式で色パネルに表示されます。また、自動的に色履歴に保存されます。

色履歴の管理

2分

色履歴機能を使用して選択した色をトラッキングし、再利用する方法を学びます。

  1. 1

    自動履歴

    選択した色は自動的に色履歴パネルに保存されます。ツールは最も最近の16色まで保持します。

    💡 Tip: 重複する色は保存されません - 独自の色のみが保存されます。

  2. 2

    クリックで呼び戻し

    履歴パネル内のいかなる色のサンプルをクリックしてその色を呼び戻します。その詳細は現在の色パネルに表示されます。

  3. 3

    履歴からコピー

    履歴の色から色コードを直接コピーできます。サンプルをクリックして選択し、コピーボタンを使用します。

  4. 4

    履歴の保持

    ページをリフレッシュすると、色の履歴がリセットされます。永続的な保存には、重要な色をノートやデザインシステムにコピーしてください。

200万件以上
選択した色
HEX、RGB、HSL
出力形式
4.9
評価
即時
スピード

"この色チョッサーは私のデザインワークフローの生命線です!デザインインスピレーションからのスクリーンショットをアップロードし、即座に正確な色コードを抽出できます。HEX、RGB、HSLの形式で必要なすべてをカバーしています。システム色チョッサーは、他のアプリから色を取得するのに素晴らしいです!"

A
Alex Rivera
UIデザイナー

"ようやく画像をサーバーにアップロードする必要がない色チョッサーが登場しました。ローカルで全てが動作するため、クライアントプロジェクトのスクリーンショットを安全に使用できます。色の履歴機能は、色のトーンを比較するのに非常に便利です。"

J
Jessica Park
ウェブ開発者

"このツールを使って、毎日写真からカラーパレットの作成に使用しています。精度はピクセルパーフェクトで、画像上で見るものがそのまま得られます。HEX、RGB、HSLがすべて一箇所にまとまっているので、時間を大幅に節約できます。"

M
Marcus Chen
グラフィックデザイナー

"システムのカラーピッカー(EyeDropper)は魔法のようです!ブラウザの開発ツール、他のウェブサイト、またはデザインソフトウェアから色を選ぶことができます。カラープレビュースワッチが、コピーする前に正しい色を選んだか確認するのに役立ちます。"

S
Sofia Martinez
フロントエンド開発者

"カラーヒストリは非常に賢い機能です。グラデーションに色を選ぶ際には、以前に選んだすべての色が並んで表示されます。ツールは重複の保存を防ぎ、私の履歴をきれいに保ちます。シンプルだけど素晴らしい!"

R
Ryan Thompson
ブランドデザイナー

"このツールを、アートワークからカラーパレットを作成しているときに発見しました。アートをアップロードして色を抽出するのは非常に直感的です。対比色の計算付きの即時プレビューが、色の選択がうまく合っているか確認するのに役立ちます。"

E
Emma Lindström
デジタルアーティスト

よくある質問

画像から色を選ぶ際の一般的な質問の答えを見つけてください