ズームルーペで、小さな細部も狙いやすく、画像の主な色が、コピーや書き出しできるパレットとして取り出されます。画像内のあらゆるものの正確な色を見つけられます。無料で、プライバシーも守られます。
画像から色を選ぶ方法
- 「画像を開く」を押します。
- 画像の上を動かして、クリックまたはタップして、色を選びます。「標本サイズ」で、1ピクセル、3 × 3、5 × 5ピクセルの平均を取ります。
- 値を、HEX、RGB、HSLで読んで、「コピー」を押します。
- 選んだ色は、「あなたの選択」にまとめられます。
- 自動パレットには、「主な色」または「均等に分散」を選び、「色数」を設定します。
- パレットがうまくいかない場合は、気に入った色をロックし、他を削除して、「残りを選び直す」を押します。「画像から追加」で、クリックした任意の色がパレットに追加されます。
- 「書き出し」で、パレット、CSS、JSON、GIMP、Adobeを選んで、「パレットをダウンロード」を押します。
あらゆる画像から正確な色
画像の上を動かすと、ルーペにポインターの下のピクセルが拡大して表示され、中央が選ばれるものです。クリックまたはタップで選びます。スマートフォンでは、指をドラッグして、使いたい色で離します。ルーペは、下にあるものが見えるよう、指の上に表示されます。キーボードでは、画像にフォーカスして、矢印キーを使い、Shiftを押し続けるとより速く動き、Enterを押します。
1ステップでパレット
「主な色」は、似たピクセルをまとめて、画像の最も多くを占める色を一覧にし、写真やブランドの画像に向いています。「均等に分散」は、色の全範囲を等しいグループに分けるため、ロゴマークやボタンの色など、小さなアクセントが、独自の色見本を得やすくなります。必要な色数を選びます。各色見本には、画像に占める割合が表示されます。
デザインツールにすぐ使えます
単一の値を、CSS用のHEX、RGB、HSLとしてコピーするか、パレット全体を、CSSカスタムプロパティ、コードやデザイントークン用のJSON、InkscapeやKritaも読めるGIMPパレット、PhotoshopやIllustrator用のAdobe Swatch Exchangeファイルとして書き出せます。画像は、ブラウザが読み取り、アップロードされることはありません。
正確な色のコツ
- 写真では、1つのピクセルにノイズが含まれることがあるため、より大きなサンプルサイズを使ってください。
- 正確な値が欲しい、平坦なロゴ、アイコン、スクリーンショットには、1ピクセルを使ってください。
- 写真の色は、照明やカメラに左右されるため、実際の物と一致しない場合があることを覚えておいてください。
- カラー変換を使って、コントラストを確認したり、形式間を移動したりします。
よくある使い方
Webサイトやスライドをロゴに合わせる、写真からカラーパレットを作る、塗料や布の色を選ぶ、スクリーンショットから正確な色をコピーする。デザイナー、学生、小さな会社のオーナーが毎日使っています。
よくある質問
画像はアップロードされますか？
いいえ。ブラウザ上で読み取られます。
どの種類の画像に対応していますか？
PNG、JPG、WebP、GIF、SVGを含め、ブラウザで開けるあらゆる画像です。
どのパレット形式を使えばよいですか？
WebサイトにはCSS、コードにはJSON、無料のデザインソフトにはGIMP、PhotoshopやIllustratorにはAdobeを使います。