画像をアップロードしてクリックすると、その位置の色をHEX・RGBで取得できます。参考画像から配色を拾いたいときに使えます。
くわしい使い方
画像を選び、色を取りたい位置をクリックするだけです。取得したHEX値はコピーしてCSSやデザインツールに貼り付けられます。画像は外部に送信されず、ブラウザ内で処理されます。
色を拾うときのコツ
- 写真は同じ面でも明暗の差があります。複数点を拾って平均的な色を選んでください
- JPEG画像は圧縮の影響で、境目付近の色が乱れていることがあります
- 画面の写真から拾うと、モニターの色設定の影響を受けます
- ロゴの色を正確に知りたい場合は、ブランドガイドラインの指定値を確認するのが確実です
拾った色の使い方
1色だけを使うより、その色を基準に明度違いを数段階作るとまとまりが出ます。カラーコード変換ツールでHSLに直し、明度（L）だけを変えると簡単に作れます。
文字色として使う場合は、背景とのコントラスト比を確認してください。読みにくい配色は、見た目以前に情報が伝わりません。
配色を決める手順
色数を増やすほどまとまりにくくなります。まずは1色を軸に、明度の違いだけで構成すると失敗しません。
- 参考にしたい画像から主要な色を1つ取る
- その色を基準に、明度違いを3〜5段階作る
- 文字色は、背景とのコントラスト比を確認して決める
- アクセント色は1色までにする
よくある質問
Q 画像はアップロードされますか？
されません。すべてブラウザ内で処理し、画像は外部に送信されません。
Q 画面上の色も取得できますか？
本ツールは画像ファイルからの取得です。画面全体からの取得はOSやブラウザの機能をご利用ください。
Q 取得した色が思ったより違うのはなぜ？
写真は同じ面でも明暗差があり、圧縮による色の乱れもあります。複数の位置を確認してみてください。
Q 対応している画像形式は？
PNG・JPEG・WebPなど、ブラウザが表示できる一般的な形式に対応しています。