配色抽出

画像からそのまま色を抜き出す

写真、スクリーンショット、パッケージの一片、映画のワンシーンがあって——その中の色をHEXコードで欲しい。ブランド写真にウェブサイトを合わせたい、商品写真を軸にスライドのテーマを組みたい、ポスターのあのグラデーションが実際は何色なのか突き止めたい。目で色を読むのは当てになりません——モニターでネイビーに見える色は #1B2A4A かもしれないし #14233F かもしれず、当てずっぽうは時間と、少しずれた結果を代償に取ります。

とっさに思いつくのはパレットサイトを開いて色をゼロから組み直すことですが、それは作業を逆立ちさせています。Coolors や Adobe Color のようなツールはパレットを生成するのに優れています——スウォッチをロックし、スペースを押し、調和を探る——けれど、欲しい色がすでに画像の中に存在するとき、無から生成するのは遠回りです。結局、あるアプリで画像をスポイトし、HEXコードを別のアプリに貼り付けることになります。

Palette は直接的なことをします。画像をドロップすると、メディアンカット量子化——画像を最も代表的な色に落とし込むのに使われるのと同じ系統のアルゴリズム——を使って支配的な色の一式を抽出し、明から暗へ並べたスウォッチとして見せます。どのスウォッチをクリックしてもそのHEXコードをコピーでき、一式まるごと一度にコピーもできます。スライダーで3色から12色まで動かせるので、引き締まったアクセントのペアも、フルなテーマも引き出せます。すべてがブラウザ内で動きます——画像はローカルで読み込まれ、決してアップロードされません。元が未発表のデザイン、クライアントの写真、あるいはただ色を採取するためにサーバーへ送りたくない何かであるとき、これが重要になります。

何が違うのか

• 生成ではなく抽出。 パレットをゼロから組ませるのではなく、すでにあなたの画像にある色を読みます。
• メディアンカット量子化。 数個のランダムなピクセルを拾うのではなく、本物のアルゴリズムが代表的な支配色を選びます。
• 調整可能な色数。 3色から12色までスライドでき——アクセントのペアもフルなテーマも——即座に再抽出します。
• クリックでコピー。 どのスウォッチをタップしてもそのHEXが、あるいはワンクリックで全コードが、CSS、デザインツール、スライドのテーマに貼る準備が整った形で手に入ります。
• 使うために並べ替え済み。 スウォッチは明るさ順に並ぶので、パレットが自然に読めます。
• プライベートでオフライン。 画像は端末を一切離れず、初回アクセス後は接続なしで動き続けます。
• 無料・アカウント不要・透かしなし。

IMG.DIY と他のカラーツールの比較

Coolors と Adobe Color は、重心の異なる強力なツールです。正直な線引きは、パレットを生成するか、画像から色を抜き出すかです。

無から palette を設計する——調和を探り、ロックしてシャッフルし、コレクションを保存する——のが仕事なら、Coolors と Adobe Color のほうが良い居場所で、Creative Cloud の中で暮らすなら Adobe Color は打ち負かしがたい存在です。それらが重くなるのは、まさにこのツールが作られたケースです——すでに画像があり、アップロードもサインインもなしに、プライベートにその色だけが欲しいとき。Palette はワンドロップでHEXコードを抜き出し、色数を調整させ、あなたのためにコピーします——そして邪魔をせず退きます。