ガイド
画像カラー抽出ガイド
ブランドカラーや参考色を画像からより正確に取得するための基本を紹介します。
色がすでに写真、スクリーンショット、モックアップの中にあるなら、目で推測するより画像カラー抽出ツールで正確なピクセルを取る方が早くて確実です。
できるだけ鮮明な画像を使う
できるだけ高品質な画像を使いましょう。圧縮ノイズやぼけ、小さすぎるスクリーンショットは色の取得を不安定にします。
拡大しやすい画像や高解像度の素材なら、狙った場所をクリックしやすくなります。
必要な場所を正確にクリックする
商品ハイライト、スクリーンショット内のボタン、背景トーンなど、本当に見たい箇所を選びます。
影、グラデーション、反射がある画像では小さな差も重要です。
複数のサンプルを比べる
写真には明るい部分と暗い部分があるため、1点だけでは全体を代表しないことがあります。
近い位置を数か所サンプリングすると、より信頼しやすい範囲が見えてきます。
あとで使えるように保存する
色が決まったら、HEXやRGBの値をコンポーネントやデザインシステム、メモに残しておきましょう。
その場限りの取得ではなく、再利用できる情報になります。
活用シーン
- コンポーネントを再現する前にスクリーンショットの色を合わせたいとき。
- 商品写真からSNS用の色を拾いたいとき。
- ムードボードや参考画像のアクセント色を確認したいとき。
まず抽出してから判断する
実際の画像ピクセルを確認してから色を決めることで、感覚だけに頼らない判断ができます。