Softonic

画像カラーピッカー

ステップ 1 / 3
選択したファイルを復元中...

ロゴのスクリーンショットからブランドカラーを抽出したり、写真から壁の色を取得したりする際には、通常Photoshopを開く必要があります。このピッカーは任意の画像をズーム可能なキャンバスに読み込み、クリックしたピクセルのHEX値、RGB値およびHSL値を表示します。さらに、1ピクセルではなく領域全体を平均化処理することで、JPEG形式のノイズアーティファクトを回避し、より正確な色情報を得ることができます。

画像から色を選択する方法

  1. 1

    画像をアップロードまたはドロップします

    JPG、PNG、WebP、ピッカーがビューポートに合わせて自動的に拡大縮小します。

  2. 2

    その領域にズームインします

    スクロールしてズームし、ドラッグしてサンプリングしたい正確な位置までパンします。

  3. 3

    ピクセルをクリックします

    HEX、RGB、HSLで即時表示され、さらに拡大したサンプルも提供されます。

  4. 4

    必要な表記をコピーします

    ワンクリックでHEX、rgb()またはhsl()をクリップボードにコピーします。

  5. 5

    複数のサンプルを保存します

    デザイン参考用に、画像全体から6～10色のカラーパレットを収集してください。

正確なサンプルを取得しています

実際の写真から得たいのは、単一ピクセルレベルでの色選択というわけではありません。JPEG圧縮やノイズ、照明条件の変動により、視覚的に均一な領域であってもピクセルごとに色差が生じてしまうのです。

サンプリングモード

モード 動作 使用する場面
点 カーソル下の単一ピクセル デザインツールのスクリーンショットをサンプリングする場合
3×3平均 クリック位置周辺の9ピクセルの平均値 軽度の圧縮がかかったJPG写真
10 × 10 平均値 100ピクセルの平均値 高度に圧縮されたまたはノイズの多い写真
面積平均 矩形を描き、その内部のすべてのピクセルの平均値を計算します ロゴやフラットカラーのデザインアセット

色空間に関する注意事項

  • ディスプレイのスクリーンショットにはsRGB値が表示され、選択した色は元のソースと一致します。
  • カメラで撮影した写真はAdobe RGBまたはDCI-P3の場合があります。ピッカーはsRGBで表示するため、広色域のスマートフォン写真の鮮やかな赤はわずかに彩度が低く見えることがあります。
  • ICCプロファイル付きPNG：ピッカーはサンプリング前にsRGBへ変換するため、出力結果が一貫します。

よくある使用例

  • スクリーンショットから、推測ではなくクライアントのロゴの色を正確にマッチさせる。
  • 参照写真（風景、ムードボード、映画のワンシーン）からパレットを作成する。
  • デザイントークンを失ったレンダリング済みWebページのHEX値を確認する。
  • 関係者がブランドカラーを正しく適用したかを確認する。

プライバシー

画像はブラウザのキャンバスに読み込まれるだけで、決してアップロードされません。ピッカーはクライアント側でのキャンバス読み込みのみを使用しているため、機密性の高いデザインもその機密性を維持します。

よくある質問

JPEG圧縮では色の再現がわずかに変化します。特にグラデーションや縁付近で顕著です。ソースがJPGである場合は、10×10の平均モードを試してみてください。もしこの画像が元のPNGまたはSVG形式のものであれば、それからサンプリングして正確な再現を実現してください。

直接ではありません。目的のフレームをスクリーンショットして読み込んでください。厳密なビデオからパレットへの処理を行う場合は、ビデオツールを使用してフレームを抽出し、それぞれサンプリングしてください。

クリックした際に表示されているフレームからサンプリングします。サンプリング前に、目的のフレームまで一時停止またはスクロールしてください。

1セッションあたり最大20色まで保存できます。パレットはローカルに保存されるため、ページを更新しても保持されますが、ブラウザのデータを消去すると削除されます。

関連ツール

マテリアルデザイン カラーピッカー

Material Designのカラーパレットを閲覧できます。任意の色調（50からA700）を1タップでHEX、RGB、HSL形式でコピーできます。

罫線入り用紙ジェネレーター

印刷できる罫線入り用紙を無料で作成。カレッジ罫、広め罫、狭め罫を選び、行間をmmで設定し、用紙サイズとマージン線を決めて、印刷またはSVGでダウンロードできます。

方眼紙ジェネレーター

印刷できる方眼紙をオンラインで作成：方眼またはドット罫を選び、間隔をmmで設定し、A4かLetterと好きな線の色を指定して、印刷または鮮明なSVGでダウンロードできます。

旗作成ツール

6種類のレイアウト、色、文字、シンボルで、シンプルな3:2のカスタム旗をブラウザ内でデザインします。SVGまたはPNGをダウンロードするか、ブラウザの印刷ダイアログを開けます。

画像アップスケーラー

AI超解像または従来の補間処理で、低解像度画像を2×、3×、4×に拡大しながら重要なディテールを保ちます。

画像ピクセルレーター

調整可能なブロックサイズで画像全体または選択した領域をピクセル化し、顔、ナンバープレート、またはレトロな8ビットアートの遮蔽に使用できます。

このツールは他の言語でも利用できます