無料オンラインカラーピッカー - 画像から色を抽出

A はい、iOS、AndroidのChrome、Safari、Firefoxなど最新のブラウザで動作します。「画像から色を選択」タブでは、カメラで撮影した写真か既存の画像をアップロード可能です。画像上の任意の場所をタップするだけで色を抽出。HEXコードは長押しで簡単コピーできます。

A モニターはRGB（赤・緑・青）の光で色を表示しますが、プリンターはCMYKインクを使います。画像から選んだ鮮やかなオレンジが、印刷ではくすんだ茶色になることがあります。色をコピーする前にツールをCMYKモードに切り替えて、プレビューを確認してください。特に名刺やチラシを印刷する場合は、必ず実機でテストしてください。

A 必ずしも同じになりません。モニターはRGB光、プリンターはCMYKインクと仕組みが根本的に違います。画面に表示された鮮やかなネオンカラーが、印刷ではくすんで見えることも。このツールでは両方の値が並んで表示されるので、印刷前にCMYKでの見え方を確認できます。重要な印刷物は実機テストをおすすめします。

A 一度にすべてを取得することはできませんが、効率的な手順があります。画像をアップロードし、最初の色をクリックしてコピー。ページをリロードせずに、同じ画像の別の場所をクリックしてください。画像は読み込まれたままです。これで1分足らずで10～15色を取得できます。LinkedInのプロフィール写真編集では、背景色と3つのアクセントカラーを選び、デザインソフトに並べて貼り付けると便利です。

A 高価な機材は不要ですが、画面の明るさ設定が色の見え方に影響します。輝度を最大にすると本来の色より薄く見えることがあるため、抽出前に確認してください。特にブルーライトカット機能や夜間モードは色味を黄色っぽく変えるため、必ずオフにしましょう。これらを無効にするだけで、HEX値の精度は劇的に向上します。作業時は部屋の照明を落とし、画面への映り込みを減らすのがコツです。

A 大抵は形式の解釈ミスです。このツールは初期表示がHEXですが、うっかりHSL値をコピーしてHEX欄に貼り付けると、まったく別の色になります。コピーボタンの上にある形式ラベルを必ず確認してください。また、#記号の有無も要注意。ソフトによって#FF5733とFF5733の両方に対応しているわけではありません。スクリーンショットから取るなら、OSのカラープロファイルをDisplay P3ではなくsRGBに設定しておくと、編集時の色ズレが防げます。

A HEXはブラウザやCSSがネイティブに読む6桁のコードで、色のID番号のようなものです。HSLは色相・彩度・明度に分解されるので、手作業で色合いを微調整するときに直感的に扱えます。フロントエンドのコードを書くときはHEXにしましょう。ボタンを少し暗くしたいとか、彩度を下げたいといった調整では、HSLなら他の数値に触らず一つの値だけを変更できます。多くの開発ツールは両方受け付けるので、あなたのワークフローに合ったほうを選んでください。コツ：グラデーションを作るとき、HSLなら中間色を手計算しやすいですよ。

A ページを最初に読み込むときだけネット接続が必要です。その後はすべてブラウザ内で動作するので、画像がサーバーに送られることはありません。新幹線のWi-Fiが不安定なときでも、乗る前にページを開いておけば画像から色を拾えます。タブを閉じなければ大丈夫。クリップボードもそのまま使えるので、HEXコードをコピーしてコードやデザインソフトに貼り付けられます。

A アカウント不要のツールのため、パレットはクラウドに保存されません。代わりに、一括エクスポート機能を使って最大8個のHEXコードを一度にコピーしてください。そのテキストをメモ帳に貼り付けておけば安心です。

A 一発で連携するボタンはありませんが、移行作業は数秒で完了します。HEXコードが含まれる一括エクスポート用の文字列をコピーしてください。そのテキストをFigmaのカラースタイルパネルやPhotoshopのスウォッチウィンドウにそのまま貼り付けます。手動ですべての色を選ぶより圧倒的に早いです。