画像カラーピッカー
写真やスクリーンショットのピクセルをクリックすると、HEX・RGB・HSL の値を確認してコピーできます。ファイルは現在のブラウザで処理します。
選択した色
- HEX
#0066cc - RGB
rgb(0, 102, 204) - HSL
hsl(210, 100%, 40%)
手動調整 (HSV)
取得した色
取得した色がここに表示されます。
画像カラーピッカーの使い方
画像を選び、必要な位置の色を確認してコピーします。
画像を選ぶ
選択領域をクリックしてファイルを選ぶか、画像をドラッグ＆ドロップしてください。JPG・PNG・WebP 形式に対応しています。デスクトップでは「画面から」タブを選び、画面上の色を直接取得することもできます。
好きな場所をクリックする
画像にマウスを乗せるとルーペが現れ、ピクセル単位に拡大して表示されます。好きな場所をクリックすると、そのピクセルの色が選択されます。矢印キーで 1px ずつ移動、スクロールで拡大縮小、ドラッグで移動できるので、精密な選択が可能です。
色の値を確認・調整する
選択した色の HEX・RGB・HSL の値がパネルに表示されます。必要なら HSV スライダーで色相・彩度・明度を微調整し、思いどおりの色に整えられます。
コピーして使う
各値の横のコピーボタンを押すとクリップボードに保存されます。選択した色は履歴にたまるので、複数の色を選んでから「すべてコピー」でまとめて取得し、CSS やデザインツールに貼り付けられます。
ピクセルの色を確認
画像を選んで任意の場所をクリックすると、そのピクセルの値が HEX・RGB・HSL で表示されます。ロゴ、背景、ボタン、イラストの色を調べ、デザインや開発に利用できます。
HEX・RGB・HSL の値をすばやくコピー
選択した色の HEX・RGB・HSL の値をワンクリックでコピーできます。デザインツールや CSS コード、ドキュメント作業に必要な色の値をすばやく貼り付けて、作業時間を短縮しましょう。
カラーピッカーを使う場面
画像内の特定のピクセルから色の値を確認したいときに利用できます。
ブランドカラーの確認
ロゴ画像やブランド写真から対象のピクセルを選び、その値を名刺・ウェブサイト・プレゼン資料で参照できます。正式なブランドガイドがある場合は、記載された値を優先してください。
Web 開発中の色の取得
参考にしたいウェブサイトのスクリーンショットを撮り、ボタン・背景・テキストの色を HEX 値ですぐに確認しましょう。開発者ツールを開かなくても、CSS に必要なカラーコードを取得できます。
デザインカンプの検収
デザインカンプと実装画面をそれぞれキャプチャし、同じ位置の色の値を比べれば、カンプと違う色で実装された箇所を客観的な数値で確認できます。
よくある質問
抽出した色の値はどの形式で確認できますか？
選択した色は、代表的に HEX・RGB・HSL の形式で確認できます。
| 形式 | 例 | 主な使いどころ |
|---|---|---|
| HEX | #0066cc | HTML・CSS・デザインシステム |
| RGB | rgb(0, 102, 204) | CSS・JavaScript・グラフィック作業 |
| HSL | hsl(210, 100%, 40%) | 明度・彩度の調整 |
HEX はウェブデザインで最もよく使われ、RGB は画面上の色表現に直感的で、HSL は色の明度や彩度を調整するときに便利です。
スクリーンショットからも色を抽出できますか？
はい。ウェブサイト、アプリ画面、デザインカンプ、文書のスクリーンショットを選び、任意の位置をクリックして色を確認できます。 ボタン、バナーの背景、ロゴ、アイコンなどの色を調べるときに利用できます。スクリーンショットが圧縮されている場合や別の表示倍率で撮影された場合は、元の画面とピクセル値が異なることがあります。
抽出した色は正確ですか？
画像に表示されているピクセルを基準に色を抽出するため、クリックした位置の色の値を確認できます。 ただし、画像が圧縮されていたり、影・グラデーション・透明度・アンチエイリアスが適用されている場合は、周囲の色と混ざって見えることがあります。 正確な色を得たい場合は、単色の領域をクリックするか、原本に近い高画質の画像を使うのがおすすめです。