ColorSnap
どんな画像からも本物のパレットを取り出し、そのあと手作業で直せます。クラスタリングは知覚的な色空間で行われ、スポイトはピクセル単位で効き、データがブラウザの外に出ることは一度もありません。
ここに画像をドロップ、またはクリックしてアップロード
PNG、JPG、WebP、AVIF、GIF、BMP、HEIC、TIFF、SVG — 80 MBまで、ブラウザ内で読み込みます
パレット
画像を読み込むと、そこからパレットを作れます。
使い方
画像を持ってくる
ドロップ、選択、貼り付け、またはoLoveToolsの別のツールから送る。この時点ではまだ何も動きません。
まず設定する
欲しい色数、サンプリングの深さ、無視したい色調を決めます。
あなたの合図で抽出
メディアンカットで範囲を絞り、そのあとk-meansがOKLabで仕上げます。この空間では距離が見た目の違いと一致します。
手で直す
気に入った色は固定し、いらない色は外し、計算が取りこぼしたものはスポイトで拾います。
人の目と同じように色を見る
クラスタリングはOKLabで行うので、見分けのつかない青が2つとも採用されて、写真にひとつだけあるオレンジが落ちる、ということが起きません。
ルーペ付きスポイト
ピクセルまで拡大し、カーソルを乗せて値を確かめ、クリックで採用。Alt+クリックは、狙っている色にいちばん近い色を外します。
気に入った色は固定できる
ひとつ固定すれば、残りのパレットはその色を中心に組み直されます。ゼロからやり直して、気に入っていた色を失うことはありません。
読みやすさを検証
白・黒・ほかのすべての色に対する本物のWCAG 2.1コントラスト比に加えて、1型・2型・3型色覚のシミュレーション。
100%ブラウザ内で完結
アップロードなし、CDNから落とすモデルもなし、ネットワーク通信そのものがありません。画像はタブの中だけにあり、閉じれば消えます。
実際に使う形式で書き出せる
CSSカスタムプロパティ、SCSS、Tailwind v4の@themeブロック、JSON、GIMPの.gplパレット、SVGスウォッチ、PNGシート。
画像そのものに合ったパレットを。ぼやけた平均値ではなく
多くの抽出ツールは写真をサムネイルまで縮めてから、固定のグリッドでピクセルを数えます。その過程で隣り合う色が混ざり、もとの画像には存在しなかった色合いが生まれます。ColorSnapはフル解像度でサンプリングし、埋まった色の区画ごとに正確な平均値を保ち、その区画をOKLabでクラスタリングします。OKLabでは数値上の距離が、見た目の違いとそのまま一致します。結果として、ほとんど同じ青が4つ並んだパレットと、隅にあるオレンジがきちんと入ったパレットほどの差が出ます。
重い処理はメインスレッドの外で走ります
ピクセルの走査はWeb Worker内のOffscreenCanvasで行われるので、5000万画素の写真でも操作が固まりません。戻ってくるのはコンパクトなヒストグラムで、その後の変更 — 色数、彩度のしきい値、固定した色 — はすべて、画像に触れ直すことなくミリ秒で解き直されます。
まず自動、手作業はいつでも
ファイルをドロップしても何も始まりません。設定を選ぶあいだ、画像は待っています。自動処理をまるごと飛ばして、最初のクリックから手作業でパレットを組むこともできます。ズーム、ルーペ、固定、元に戻すが使えます。抽出後もすべての色は編集でき、抽出しなおしても固定した色はそのまま残ります。
100%プライベート、文字どおりの意味で
アップロードも、APIも、CDNから取得するモデルも、画像に対する解析もありません。デコード、サンプリング、クラスタリング、書き出し — すべてタブの中でブラウザのAPIだけを使って行われます。画像はメモリ上にしか存在せず、ページを閉じた瞬間に消えます。
よくある質問
Q画像はサーバーに送られますか?+
いいえ。デコード、サンプリング、クラスタリングはすべて、ブラウザ内のcanvasとWeb WorkerのAPIで行われます。どの段階でもアップロードはなく、画像に関わるネットワーク通信も発生しません。
Qどの形式を開けますか?+
PNG、JPG、WebP、AVIF、GIF、BMP、SVGはそのまま開けます。iPhoneのHEICとHEIFはブラウザ内で変換され、TIFFもローカルでデコードされます。上限は1ファイルあたり80 MBです。ドロップ、ファイル選択、クリップボードから貼り付け、あるいはoLoveToolsの別のツールから受け取ることもできます。
Qなぜファイルを置いた瞬間に抽出しないのですか?+
設定によって結果が変わるからです。色数、サンプリングの深さ、彩度のしきい値が出来上がりを左右するので、決める前に走らせても一回分が無駄になります。画像は待ちます。ボタンを押すのはあなたです。自動処理をまったく使いたくない場合は、スポイトへ直行するボタンがあります。
Q「ずれ」の数値は何を表していますか?+
画像の色と、それぞれに割り当てられたパレット色との、OKLab上の平均的な知覚距離です。おおよそ3を下回れば、そのパレットは画像を忠実に言い表しています。6を超えると、大まかな印象を見ていることになります。色を足せば下がるので、5色で足りていたかどうかを正直に判断できます。
Q色を固定すると何が起きますか?+
固定した色は動かないものとして扱われます。色数を変えたり抽出しなおしたりしても、固定した色はそのまま残り、空いた枠だけがその色を前提に計算し直されます。すでに気に入っていた色を失うことはありません。
Qそのままプロジェクトに書き出せますか?+
はい。CSSカスタムプロパティ、SCSS変数とマップ、Tailwind v4の@themeブロック、HEX/RGB/HSL/OKLCHと占有率を含むJSON、GIMP・Inkscape・Krita用の.gplパレット、SVGスウォッチ、プレーンテキスト、PNGシート。変数名は色そのものから作られるので、--color-4ではなく--deep-tealが手に入ります。