画像カラーピッカー
このツールについて
デザイン画像、スクリーンショット、写真をアップロードし、任意のピクセルをクリックして HEX、RGB、HSL の色をコピーできます。拡大表示を使うと、画面上の小さな要素や細かな位置も選択しやすくなります。
使い方
- クリックしたピクセルの色を取得
- 拡大表示による正確な位置選択
- HEX、RGB、HSL の色を表示
- 色の値をクリップボードにコピー
- 現在の利用中に選択した色の履歴
- 画像をアップロード: 色を取得する画像を選択します。
- ピクセルを選択: カーソルを動かし、取得したい位置をクリックします。拡大表示で周辺を確認できます。
- 値をコピー: HEX の値、または CSS で使用できる rgb() や hsl() の形式をコピーします。
例
- 古い PNG デザインからボタンの色を取得する
- 他社のスクリーンショットから配色を確認する
- バナー画像のグラデーションに近い色を調べる
- 不具合報告に正確な色の値を記載する
制限事項
- 取得できるのは画像内のピクセル色のみです。JPEG の非可逆圧縮によって色がわずかに変化する場合があります
- 画像全体のカラーパレットを自動作成する機能はありません
- アップロードした画像はブラウザ上で処理され、サーバーには送信されません。
よくある質問
- JPEG の色がわずかに異なるのはなぜですか？
- JPEG の非可逆圧縮によってピクセルの値が変化する場合があります。正確な画面色を調べる場合は PNG のスクリーンショットを使用してください。
- 透明度も取得できますか？
- 通常は RGB の値を表示します。透明な PNG では、コピーする rgba() に透明度を含めることができます。
- タッチ操作でも色を選択できますか？
- はい。対応している端末では、画像をタップしてその位置の色を選択できます。