画像カラーピッカー – ピクセルをサンプリングしてパレットを抽出
画像カラーピッカーでは、画像を読み込んで任意のピクセルをクリックすれば、その正確な色をhexやRGBで読み取れます。粗い色量子化を使って最大6色の主要な色のパレットも抽出するため、写真から配色を作るのに役立ちます。処理はブラウザ上で完結するため、画像がアップロードされることはありません。
画像カラーピッカーは、画像から色をサンプリングし、主要な色のパレットを調べるためのブラウザベースのツールです。画像を追加して任意のピクセルをクリックすれば、そのピクセルの正確な色をhexまたはRGBの値で取得できます。このツールは最大6色の主要な色も自動で抽出するため、写真に基づく配色の有用な出発点になります。
特定の色を調べるには、サンプリングしたいピクセルを直接クリックします。返される値はそのピクセルを表し、パレットは粗い色量子化を使って生成されます。抽出された色を確認し、必要なサンプリング値をコピーできます。サンプリングしたピクセルで利用できる表記はhexとRGBです。
hexとRGBは色の表し方が異なります。hexはコンパクトな16進数表記を使い、RGBは赤・緑・青のカラーチャネルで表します。ビジュアルリファレンスをこれらの値のいずれかに変換することは、デザインで色を合わせたり、候補を比較したり、色の選択を文書化したりする場合に役立ちます。自動パレットは、写真に含まれる色を探るのにも役立ちます。
画像カラーピッカーは画像をブラウザ上で処理します。画像がサーバーにアップロード・送信されることはなく、ページの読み込み後はオフラインでも動作します。無料で使えるため、開発者、DevOpsエンジニア、デザイナー、そして別のツールをインストールせずに画像の色をサンプリング・比較したいすべての方に役立ちます。
手順1: 画像カラーピッカーを開き、画像を追加またはドロップします。画像はブラウザ上でサンプリングできる状態になります。
手順2: 色を確認したいピクセルをクリックします。目視の推測ではなく、そのピクセルの正確な色を返します。
手順3: サンプリングした値をhexやRGBで読み取ります。デザインやドキュメントの用途に合った表記を使ってください。
手順4: 最大6色の主要な色から自動抽出されたパレットを確認します。画像から補完的な配色の出発点を見つけるのに役立ちます。
手順5: 使いたい色の値をコピーします。色を比較したい場合は、別のピクセルをサンプリングすることもできます。
用途: 目視で推測するのではなく、画像の正確な色を選びたい場合に。ピクセルをクリックして値をhexやRGBで読み取ります。
用途: デザインやドキュメントで求められる色の値に合わせたい場合に。ピッカーはサンプリングした色を2つの一般的な表記で提供します。
用途: 1つの色に決める前に、画像の異なる部分の色を比較したい場合に。ピクセルをサンプリングすれば、正確な値を確認しやすくなります。
用途: 写真から配色の起点を作りたい場合に。自動抽出されたパレットには最大6色の主要な色が含まれています。
用途: 特定のピクセルの色を特定するために、スクリーンショットやモックアップを調べたい場合に。ブラウザベースのピッカーなら、サンプリングを直接的かつ手早く行えます。
用途: プロジェクトで使う前に、ビジュアルリファレンスの色を確認したい場合に。サンプリングした値をコピーして、デザインやドキュメントのワークフローで使えます。