デザインで使われている色を再利用したいとき、目で推測すると時間がかかり、結果も安定しません。画像から色を選ぶツールは指定したピクセルを読み取り、HEX、RGB、HSLの値を返します。画像カラーピッカーを開き、写真やスクリーンショットを読み込み、色をクリックして必要な値をコピーしてください。
ツールはブラウザ内で画像を読み込み、JPG、PNG、WebPに対応しています。狙いにくい場所はキャンバスを拡大でき、マウスのクリックやキーボード操作で位置を選べます。一度にアクティブになる色は1つです。
画像カラーピッカーでできること
選択したピクセルを一般的な形式に変換します。
- HEX はCSS、Webデザイン、デザイントークンに便利です。
- RGB は赤、緑、青の各チャンネルが必要な作業に適しています。
- HSL は色相、彩度、明度を考えながら変化を作るのに役立ちます。
別の場所をクリックすると現在のサンプルが置き換わり、新しい値をコピーできます。背景の色合わせ、商品写真の確認、スクリーンショットの色の再利用に便利です。
オンラインで画像から色を選ぶ方法
1. はっきりした元画像を選ぶ
できれば元の写真や高解像度のスクリーンショットを使います。圧縮されたサムネイル、ぼけたプレビュー、カラーフィルターは正確な色を変える場合があります。
2. オンラインカラーピッカーを開く
画像から色を選ぶツールを開き、JPG、PNG、WebPを選択します。サンプリングはブラウザで行われるため、ピクセルを読むためにサーバーへアップロードする必要はありません。
3. 対象のピクセルをクリックする
色を知りたい場所をクリックします。平らな背景では端や影を避け、商品やイラストではハイライト、反射、アンチエイリアスの境界ではなく代表的な面を選びます。必要なら拡大してください。
4. カラーコードをコピーする
CSSならHEXを使い、次のツールやデザインシステムが求める場合はRGBやHSLを使います。コード、デザインファイル、ブランドメモ、スタイル変数に貼り付け、実際の利用場所で確認します。
より信頼できる色サンプルを取る方法
写真の色は照明、影、反射、圧縮、表示画面の影響を受けます。1ピクセルの値はその場所の値であり、撮影やカラーグレーディングで変わった元のブランドカラーを復元するものではありません。
平面グラフィックでは均一な塗りの中央を選びます。写真では同じ素材から複数サンプルを取り比較します。境界、アンチエイリアスされた文字、光沢面は避けてください。
画像が大きすぎる場合は画像リサイザーで作業用コピーを作り、元画像を残します。不要な境界は画像クロッパーで先に取り除けます。
HEX、RGB、HSLのどれを使う？
WebスタイルにはHEX
HEXは短く、CSS、デザイントークン、ドキュメントで一般的です。#2F80EDのような値をスタイルシートに直接貼り付けられます。
チャンネルや透明度にはRGB
RGBは赤、緑、青を個別に示します。チャンネル比較やグラフィック処理、別の透明度を持つrgba()への展開に便利です。
調整したバリエーションにはHSL
HSLは色相、彩度、明度を分けます。基本の色を保ちながら、明るい背景、控えめな境界、暗いホバー状態を作りやすくなります。
色を選ぶときのよくある失敗
ベース色ではなく影を選ぶ
影は中立色を灰色に見せたり、色を暗く見せたりします。明るく代表的な場所を選び、近くのピクセルも比較してください。
境界のピクセルを選ぶ
アンチエイリアスや圧縮によって境界には混ざったピクセルが生じます。対象や背景の中央に移動します。
画面フィルター付きのスクリーンショットを使う
ナイトモード、HDR、カラープロファイル、拡張機能で見え方が変わることがあります。色が重要なら元画像か未加工のスクリーンショットを使います。
1色のサンプルをパレット全体と考える
ピッカーはクリックした色を識別し、1つのサンプルを保持しますが、パレット全体を自動推測しません。必要な色を1つずつ取り、役割を記録します。
利用場所を忘れる
色は背景やディスプレイが変わると違って見えます。実際のページ、コンポーネント、広告、デザインファイルで確認し、コントラストと可読性も見ます。
シンプルなデザイン引き渡し手順
- 元の写真やスクリーンショットを参照として保管する。
- 背景、主対象、文字、アクセントを別々にサンプルする。
- 各HEX値に役割を付けて記録する。
- 実装や変化に必要ならRGBやHSLを使う。
- コントラスト、ホバー状態、最終表示サイズを確認する。
サンプル取得後に画像コンプレッサーを使います。対応している場合は最終コピーをPNGからWebPに変換しますが、将来の確認用に元画像を残してください。
よくある質問
画像から色を選ぶには？
画像カラーピッカーを開き、JPG、PNG、WebPを選択し、対象ピクセルをクリックしてHEX、RGB、HSLの値をコピーします。
画像からHEXコードを見つけるには？
画像からHEXを選ぶツールに画像を読み込み、代表的なピクセルをクリックして表示されたHEXをコピーします。
スクリーンショットから色を選べますか？
はい。対応画像と同じようにサンプルできます。近い結果には、圧縮されていないスクリーンショットを使い、境界、影、画面フィルターを避けます。
複数の色を選べますか？
はい。ただしアクティブなサンプルは1つです。次を選ぶ前に各ピクセルの値をコピーまたは記録します。
カラーピッカーはプライベートですか？
ピクセルの読み取りはページの読み込み後にブラウザで行われます。色を読むために画像をサーバーへアップロードする必要はありません。
画像ツールを続けて使う
写真やスクリーンショットの色を調べるには画像カラーピッカーを使います。画像クロッパーで境界を除き、画像リサイザーで作業用コピーを作り、画像コンプレッサーで最終ファイルを準備します。