画像から配色抽出
Palette Extractor
画像から代表色をN色抜き出し、HEX・CSS変数・ASEスウォッチとして書き出します。
絵の中の色を、スタイルシートに貼れるパレットとして取り出します。量子化にはPNG圧縮と同じものを使っています。画像を表すのに足りるパレットは、定義上その画像を説明するパレットだ、という理屈です。それぞれの色が絵のどれだけを占めるかは、推定ではなく数えた値です。
画像を置いてください
パレットは PNG 圧縮と同じ量子化器から取り出しています。画像を表現できるだけのパレットは、そのまま画像を説明するパレットでもあります。
使い方
画像を置きます
プレビューの下の帯は、それぞれの色を実際の占有率の幅で示します。画面の2%を占める色は、2%に見えます。
欲しい色数を決めます
2から16です。5つか6つあたりが、パレットが要約であることをやめて一覧になりはじめる境目です。
必要な形で書き出します
CSSカスタムプロパティ、Tailwindの@themeブロック、SCSS変数、JSON。1色ずつではなく、まとめてコピーします。
よくある質問
はっきり見えている色が、なぜパレットに入らないのですか
画像に占める面積が小さすぎるからです。量子化は絵全体を表すことを最適化するので、画面の1%を占める鮮やかな差し色は、ほとんど同じ灰色の広い面積に負けます。色数を上げてください。
画像全体を見ているのですか
一定間隔で走査し、およそ40万ピクセルを見ます。主要な色は分布の性質なので、間引いても保たれます。そして先に縮小する方法と違い、絵にない色を作り出すことがありません。
Tailwindの出力がプロジェクトで効きません
Tailwind 4は色を@themeの中のカスタムプロパティとして定義し、ここが吐くのはそれです。v3形式のmodule.exports設定をv4のプロジェクトに貼っても黙って何も起きませんし、その逆も同じです。
ここから渡せます
平均色・代表色の抽出
Average & Dominant Colour
画像を代表する色を1つ、平均・中央値・最頻のいずれかで返します。
色覚シミュレーション
Colour Blindness Simulator
1型・2型・3型色覚や白黒の見え方で画像を描き直します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。
配色パレット生成
Palette Generator
基準の色から補色・三色配色・類似色の規則で調和のとれたパレットを組み立てます。
次の一手
このツールが出したものをそのまま受け取れる道具です。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
コントラスト比チェッカー
Contrast Checker
文字色と背景色の組み合わせをWCAG 2とAPCAで採点し、基準を満たす最も近い色を提案します。
平均色・代表色の抽出
Average & Dominant Colour
画像を代表する色を1つ、平均・中央値・最頻のいずれかで返します。
配色パレット生成
Palette Generator
基準の色から補色・三色配色・類似色の規則で調和のとれたパレットを組み立てます。
背景透過（切り抜き）
Background Remover
平坦な背景や単色の背景をOKLabでキーイングして透過PNGにし、縁はブラシで直せます。
EXIF情報の削除
EXIF Remover
画素には手を触れずに、カメラ・GPS・編集履歴のメタデータだけを写真から消します。