画像ツール
画像カラーピッカー
画像上でホバーするとピクセルの色が即座に表示
すべての処理はブラウザ内で完結します。データが端末外に送信されることはありません。
関連ツール
使い方
画像をアップロードしてマウスを乗せると色がリアルタイムでプレビューされます。欲しい色をクリックして固定し、コピーボタンで値を取得してください。
画像をアップロードする
アップロード欄をクリックするか画像をドラッグ＆ドロップしてください。Canvas要素に描画されgetImageData APIでピクセルの色を読み取れるようになります。
マウスを乗せて色をプレビューする
画像の上でカーソルを動かすとそのピクセルのHEX・RGB・HSL値がリアルタイムで更新されます。カラースウォッチで正確な色調を確認できます。
クリックして色を固定しコピーする
任意のピクセルをクリックするとその色がパレットに固定されます。HEX・RGB・HSL各形式のコピーボタンで値をクリップボードにコピーしてください。
使用例
ロゴからブランドカラーを抽出する
ブランドロゴをアップロードして主要な色の領域にマウスを乗せると正確なHEX値がわかります。クリックで固定してCSSの変数やデザインシステムにそのまま使用できます。
参考写真から色をマッチングする
ムードボードや参考写真をアップロードして影のトーン・ハイライト・背景の色調を選択してください。HSL値は同じ色相を保ちながら明度を調整する際に特に役立ちます。
このツールについて
画像を読み込んでマウスを乗せるとカーソル下のピクセルのHEX・RGB・HSL値がリアルタイムで表示されます。クリックすると色が固定されコピーボタンで各形式の値をクリップボードにコピーできます。Canvas getImageData APIを使用してブラウザのみで処理され、画像はサーバーに送信されません。