写真の中の色をそのまま。代表色を抽出してHEXコードですぐコピーできます。
クリックしてファイルを選択 画像をドラッグしてください
JPG、PNG、WebP、HEIC など
使い方
- 1色を取り出したい JPG・PNG・WebP 画像をドラッグするか、クリックしてアップロードします。
- 2色の数を3〜10色の間で調整します。数を変えるとパレットがすぐに取り直されます。
- 3割合バーと色カードで、各色の%・HEX・RGB を確認します。
- 4好きな色をクリックすると HEX コードがコピーされます。CSS をコピーを押すと、全色が :root 変数として一度にコピーされます！
知っておくと便利なヒント
- 色の数を減らすと写真を代表する大きな色が中心に、増やすと微妙な中間色まで拾えます。用途に合わせて調整してみてください。
- CSS をコピーを押すと、すべての色が :root 変数としてまとまるので、そのままスタイルシートに貼り付けやすいです。
- 割合バーの%は、その色が写真の中でどれくらいの面積を占めるかを表します。メインの色とアクセントの色を見分ける目安に使えます。
色の抽出はどう動いているの
まず写真を小さく縮めて代表的なピクセルだけを残し、似た色どうしをまとめて、どの色がどれだけ頻繁に現れるかを数えます。次に最も多く登場する色をパレットのメインとして取り出しますが、似すぎた色は一つに統合して、ほぼ同じ色が何マスも占めないようにします。だから出てくる色どうしがはっきり区別できます。
面積だけで取り出すと一つ問題が起きます。ベージュのテーブルの上の赤いイチゴのように、小さくても強烈なアクセント色が、広くてくすんだ色に埋もれてしまうのです。そこでこのツールは、鮮やかな色のための枠をパレットに1〜2マス空けておきます。彩度（色の鮮やかさ）の高い色を面積に関係なく引き上げ、写真のアクセントになる色が必ずパレットに入るようにしました。
取り出したパレットの活かし方
パレットはブランディングやデザイン作業の出発点にぴったりです。ロゴや商品写真から色を取り出せばそのブランドの色のルールを整理しやすく、プレゼン資料やカードニュースを作るとき、一枚の写真から取った色でそろえると全体のトーンが自然に調和します。インテリアのムードボードや服のコーディネートのように、色の組み合わせを参考にする用途にも役立ちます。
ウェブやアプリを作るなら、CSS をコピーが特に便利です。ボタンを押すとすべての色が `:root{--color-1 …}` の形の CSS 変数として一度にコピーされるので、スタイルシートに貼り付けるだけですぐ色トークンとして使えます。色ごとに名前を付けて管理したいときのよい出発点になります。
HEX と RGB コードの読み方
HEX は #7C3AED のように、シャープ（#）のあとに6桁で書く色コードです。最初の2桁が赤、真ん中の2桁が緑、最後の2桁が青の強さを16進数（00〜FF）で表します。ウェブやデザインツールならどこでも通じる標準なので、色カードの HEX 値をコピーして貼り付ければ、まったく同じ色を再現できます。
RGB は同じ色を RGB(124, 58, 237) のように0〜255の数字3つで表したものです。赤・緑・青の明るさを直感的に読みやすく、アプリやコードで色を扱うときによく使います。HEX と RGB は表記が違うだけで同じ色を指すので、使うツールが求める形式に合わせて選べば大丈夫です。
よくある質問
いいえ、色の抽出はブラウザの中だけで行われ、写真がサーバーに送られることはありません。色を読み取るだけなので、元の写真がどこにも漏れることはありません。
各色ごとに HEX（例: #7C3AED）と RGB（例: RGB(124, 58, 237)）を一緒に表示します。色をクリックすると HEX がコピーされ、CSS をコピーで全色を :root 変数として一度に取り込めます。
3色から10色まで選んで取り出せます。スライダーで数を変えると、その場でパレットが作り直されます。
その色が写真全体の中で占める面積の割合です。大きな色ほどバーも広く出るので、どの色が写真の雰囲気を引っ張っているかひと目で分かります。
はい、結果は一定です。色を数える方式が決まった規則に従うため、同じ写真に同じ色数を選べば、いつ取り出しても同じパレットが出ます。ランダムに変わらないので、チームで同じファイルを使っても人によって違う色になる心配はありません。
鮮やかなアクセント色がないと彩度の枠を埋める色が見つからないので、その場合はよく出る色（グレー・黒・白の系統）を頻度順に詰めてパレットを作ります。ですからモノクロ写真では、明暗の段階でできたグレーのパレットが出るのが自然な結果です。