画像・デザイン
画像カラーピッカー
画像を読み込み、クリックした位置のHEX・RGBカラーをすぐ取得できます。
画像から色を取り出す
画像は端末内で処理され、サーバーへ送信されません。
画像カラーピッカーを正しく使うために
写真やスクリーンショットを読み込み、画像上の任意の位置からHEX・RGBカラーを取得します。画像に多く使われている色も8色まで抽出するため、Webデザインや資料作成の配色検討に利用できます。
画像カラーピッカーの使い方
- 01
JPEG・PNG・WebPなどの画像を選択します。
- 02
プレビュー上で色を調べたい位置をクリックまたはタップします。
- 03
表示されたHEX・RGB値を押してコピーします。
確認できること
- 選択位置の色
- クリックしたピクセルの赤・緑・青の値とHEXコードを表示します。
- 主な色
- 画像全体を間引いて調べ、出現回数の多い近似色を最大8色表示します。
- コピー用コード
- デザインツールやCSSへ貼り付けやすいHEXとRGB形式を用意します。
計算・処理の仕組み
画像をCanvasへ描画し、選択座標のピクセル値を取得します。主な色は透明度の低いピクセルを除外し、画像全体から間隔を空けてサンプリングした近似色を頻度順に並べます。