画像からカラーパレット

写真からパレットを作るということ

デザインに関わる人なら誰もが経験しています。ある写真が、その企画にちょうど必要な雰囲気を持っている。仕事は、その雰囲気を写真から取り出してスタイルシートに移すことです。

目分量では決まりません。画面上で「温かみのあるグレー」に見える色は、自分で打ち込んだであろうグレーとはたいてい別物です。正確にやる方法は、実際のピクセルを取る以外にありません。

写真を放り込み、ルーペで動かし、欲しい色をクリックしてください。 一つずつ下のパレットに加わり、HEX・RGB・HSL の値がコピーできる状態で並びます。

使い方

• クリックしてアップロード を押すか、写真をページにドロップするか、画像の URL を貼り付けます
• ポインタを画像の上で動かします。ルーペが真下のピクセルを拡大して見せます
• クリックするとその色がパレットに加わります
• 必要なだけ選びます。5 〜 6 色あればたいていパレットになります
• パレットの色見本をクリックすると、その色に戻れます。大きな見本と HEX・RGB・HSL の表示がすべてその色に切り替わり、HEX がコピーされます
• HEX / RGB / HSL をコピー で、必要な形式を取り出します

色を自分で選ぶ理由

最も多く使われている色をまとめて、自動でパレットを推測する道具もあります。聞こえほど良いものではありません。写真で最も*多い*色は、たいてい空や壁や影といった広くて鈍い面です。そして、その写真らしさを決めているのは、扉の錆、一枚の葉の緑、カップのハイライトといった、面積の小さい色であることがよくあります。

どちらがどちらかは、見ればわかります。ルーペを使えば最大倍率でまさにそのピクセルを取れるので、平均が生み出したパレットではなく、あなたが意図したパレットになります。

パレットは戻ってこられる場所です

色見本は、クリックした履歴が並んでいるだけのものではありません。ひとつクリックすれば、それが現在の色になります — 大きな見本と 3 つの表示がすべてそこへ切り替わり、いま見ている見本には枠が付くので、どれのことかがわかります。

2 つの色合いを比べるのが現実的になるのは、これがあるからです。写真から両方を取っておき、あとは行き来してクリックしながら値を読めばよく、さっき取ったピクセルを画像の中から探し直す必要がありません。

形式が 3 つあるのは、必要とされる場所が違うからです

選んだ色は、常に 3 つの形式で同時に表示されます。

• HEX — #3f7a5e。CSS、デザインツール、ほぼどこでも
• RGB — rgb(63, 122, 94)。チャンネルを個別に扱いたいときに便利です
• HSL — hsl(154, 32%, 36%)。段階のある配色を作るならこれです。色相をそのままに明度だけを動かせば、互いに馴染む明るい色と暗い色が得られます

こんなときに使われています

• ブランドガイドが見つからないとき、ロゴからブランドカラーを取り出す
• 主役の写真からウェブサイトやスライドの配色を組み立てる
• 実物の写真に合わせて塗料・生地・糸を選ぶ
• スクリーンショットの中の色の正確な HEX を知る
• 参考にしたい絵画や写真の色を調べる
• 隣の色との関係ではなく、その色が実際には何なのかを確かめる

知っておくと良いこと

• アップロードはありません。画像はページ内で読まれ、端末から出ることはありません
• PNG、JPG、GIF、WebP に対応しています
• ファイルの代わりに画像の URL を貼り付けることもできます。ただし配信元によっては他サイトからのピクセル読み取りを禁じています（CORS）。その場合は画像をダウンロードして、ファイルをアップロードしてください
• 色は縮小表示ではなく原寸の実ピクセルから読み取るので、値は正確です
• パソコンと同じく、スマートフォンやタブレットでも使えます
• 画像カラーピッカーと同じ道具です。1 色だけ欲しいときはそちらをどうぞ

関連ツール

• 画像カラーピッカー — 同じ道具を、1 色を取ることに寄せたもの
• カラーピッカー — 写真ではなくカラーホイールから色を選ぶ
• 色のコントラスト確認 — 公開する前に配色が読みやすいか確かめる
• CSS グラデーション作成 — 新しい色を 2 つ混ぜてグラデーションにする
• ワードクラウド作成 — パレットを活かせるもうひとつの場所