画像から色を抽出 — カラーコード（HEX・RGB）取得

どんなツール？

写真やデザインの中の好きなピクセルの色を、HEXコード（#2563EB）、RGB、HSLで調べられるツールです。画像をクリック・タップするとその位置の色を取得し、ルーペが周囲を拡大するので狙った場所を正確に選べます。目立つ5〜8色を集めたパレットも自動で作ります。

使い方

1. 画像をドラッグ＆ドロップするか、画像を選択を押します。コピーした画像は Ctrl+V（Mac は ⌘V）で貼り付けることもできます。
2. 画像の上でポインターを動かすと、右側のルーペに近くのピクセルが拡大表示されます。取りたい場所をクリック・タップします。
3. 取得した色で HEX・RGB・HSL を確認し、コピーを押します。
4. 画像をクリックしたあとは、方向キーでカーソルを1ピクセルずつ、Shift+方向キーで10ピクセルずつ動かして細かく調整できます。
5. 代表色パレットで5〜8色を選び、色見本をクリックすると上の値に読み込まれます。

しくみ

• HEX：各チャンネルを大文字の16進数2桁で表します。R37 G99 B235 は #2563EB になります。
• HSL：色相は0〜360度、彩度と明度は0〜100%で、整数に四捨五入します。上の色は hsl(221, 83%, 53%) です。
• パレット：不透明度50%以上のピクセルを k-means（k-means++ による初期化、固定シード、最大20回の反復）でグループに分け、中心値を四捨五入します。大きなグループから順に、画像に占める割合を％で表示します。
• 縮小サンプリング：クラスタリングの前に画像を約10,000ピクセルに縮小するので、大きな写真でもすばやく処理できます。ピクセルは混ぜ合わせずにサンプリングするため、画像にない中間色がパレットに紛れ込むことはありません。
• 色の値：ブラウザーが sRGB で描いたとおりのピクセル値です。別のカラープロファイルを持つ画像は、ブラウザーが sRGB に変換したあとの値を読み取ります。

使用例

目的	方法
ロゴのブランドカラーを確認する	色が均一な部分をクリックして HEX をコピー
写真に合う背景色を選ぶ	パレットでいちばん割合の大きい色を使う
1ピクセル単位で確認する	方向キーで動かしながらルーペを見る