どんな画像からもカラーパレットを取り出す方法
2026-06-25
最高のカラーパレットのいくつかは、すでに存在しています——夕焼けの写真の中に、映画のワンシーンに、ブランドのロゴに、気に入ったデザインのスクリーンショットに。HEXコードを当て推量する代わりに、画像から直接色を選ぶだけでいいのです。その方法と、CSSやデザインツールで使える値に変える方法を紹介します。
画像から色を取り出す理由
パレットをゼロから作るのは難しい。すでに機能しているものを借りるのは簡単です。写真には自然な調和があります——シーンの中の光が色どうしを結びつけているからです。ブランドのロゴは、その正確な色をそのまま渡してくれます。実在の画像から始めれば、まとまりを感じるパレットが手に入り、あとはそれを磨くだけです。
スポイトの仕組み
画像はピクセルの格子で、各ピクセルには色があります。カラーピッカー（スポイト）は、指し示したピクセルの正確な色を読み取り、それをコードとして報告します——たいていはHEX（#f59563）で、これは同じ赤/緑/青の値を16進数で書いたものです。ホバーでプレビューし、気に入ったものをクリックして保存すれば、パレットの完成です。
ToolKoalaのカラーピッカーは、まさにこれをブラウザ内で行います：
- 任意の画像をドロップする — 写真、スクリーンショット、ロゴ。
- ホバーして色をプレビューし、クリックして保存。好きなだけ集めましょう。
- 保存した各色から、コードにそのまま貼れるHEXとRGBが得られます。
ローカルで動くので、サンプリングする画像がアップロードされることはありません。
HEX、RGB、HSL——どれが必要？
同じ色、違う記法です：
- HEX（
#f59563）— ウェブの標準。CSSに最もよく貼るもの。 - RGB（
245, 149, 99）— 透明度のためのアルファチャンネル（rgba(...)）が必要なときに便利。 - HSL（色相、彩度、明度）— デザイナーが色を調整するのに好むもの：明度を少し動かせば淡色に、色相をずらせば補色が見つかります。
ある形式の色を別の形式にしたいときは、カラーコンバーターがHEXをRGB、HSL、HSV、CMYKに一瞬で変換します。
選んだ色を本物のパレットに
選んだパレットを使えるものにする、いくつかの習慣：
- ほとんど同じ5つの陰影ではなく、幅のある範囲をつかむ — 暗い色、明るい色、いくつかの中間色、そして1つのアクセント。
- 文字を載せるものは何でもコントラストを確認 する。美しくても低コントラストの組み合わせは読めません。
- HSLでバリエーションを作る — ベースの色が決まったら、無関係な新しい色を選ぶ代わりに、明度を調整してホバー状態、境界線、背景を作りましょう。
よくある質問
画像から色コードを取得するには？ カラーピッカーを使います：画像を読み込み、ホバーしてプレビューし、色がほしいピクセルをクリックします。コピーできるHEX（そしてたいていRGB）コードとして色を報告します。ToolKoalaのカラーピッカーがこれをブラウザ内で行います。
HEX、RGB、HSLの違いは何ですか？ 同じ色を書く3つの方法です。HEXはウェブの標準、RGBは透明度（rgba）に便利、HSLは色を調整する——明度や色相を手で変える——のに一番簡単です。
スクリーンショットやロゴから色を選べますか？ はい——スクリーンショットやロゴを含め、どんな画像でも使えます。ブランドの正確な色を合わせるには、たいていそれが一番速い方法です。
カラーピッカーは私の画像をアップロードしますか？ いいえ。ToolKoalaはブラウザ内でピクセルを読み取るので、画像がデバイスから出ることはありません。
HEXの色をRGBやHSLに変換するには？ カラーコンバーターに貼り付けます。ToolKoalaのカラーコンバーターは、どんなHEXも一度にRGB、HSL、HSV、CMYKに変換します。
— Milo 🐨