カラーパレット作成(画像から抽出・ランダム生成)

カラーパレット作成ツールについて

イラスト・デザイン・配信画面づくりなどの配色決めを助ける、無料のカラーパレット作成ツールです。好きな画像(参考にしたい写真やイラスト、スクリーンショットなど)を読み込むと、その画像で使われている色を分析して、指定した色数(2〜24色)の代表色を自動で抽出します。抽出にはメディアンカット法という減色アルゴリズムを使用しており、画像内で使用面積の大きい色から順に並べて表示します。

画像がなくても、配色タイプを選んでランダムにパレットを生成できます。色相環に基づいた「類似色」「補色」「トライアド」などの配色理論に沿ったタイプを選べば、ランダムでも破綻しにくい組み合わせになります。気に入った色はロックして、残りの色だけを何度でも引き直せるため、配色のアイデア出しにも使えます。さらに各色は 🎚 ボタンから色相・彩度・明度のスライダーで個別に微調整できるので、「抽出した色を少しだけ明るくしたい」「ランダムで出た色の彩度を落としたい」といった追い込みも、ツールを離れずに完結します。

できあがったパレットは、色をクリックして1色ずつHEXコードをコピーできるほか、全色のHEX一覧のコピーや、パレット画像(PNG)としての保存に対応しています。PNGで保存すれば、ペイントソフトに読み込んでスポイトで拾う、資料として添付するなどの使い方ができます。「バー画像で保存」では、色だけを並べた文字なしのバー画像を書き出せます。イラストのキャンバスの隅に置いておき、描きながらスポイト(ピッカー)で色を拾う使い方にはこちらが便利です。「CMYK表示」をONにすると各色にCMYK値(印刷用の簡易換算)が併記され、クリックコピー・一覧コピー・PNG保存もCMYK対応に切り替わるため、同人誌の表紙やグッズなど印刷物の配色指定メモとしても使えます。さらに「📤 他のツールで使う」を押すと、パレットが同じブラウザ内に保存され、当サイトのタイムシート アニメーション作成のペン色スウォッチや、ノイズ・フラクタル模様ジェネレーターの配色グラデーションとしてそのまま使えるようになります。また、画像にカラーパレットを適用に読み込めば、写真やイラストの色をこのパレットの色だけに置き換える(減色・配色統一・ドット絵風)こともできます。配色決めからアニメの作画・テクスチャ作り・画像の配色変換まで、ツールをまたいで同じ色で作業できます。

さらに、ページ下部のお絵かきキャンバスでは、作ったパレットの色をそのまま使って試し描きができます。「この配色、実際に塗ってみるとどう見えるか」をツール内で完結して確かめられるため、キャラクターの配色ラフや色の面積バランスの検討に便利です。ペン・塗りつぶし(バケツ)・消しゴム、太さ調整、元に戻す(30回まで)、背景色の切り替え(白・ダーク・透明)に対応し、描いた絵はPNGとして保存できます。ペンと消しゴムはにじみのない2値(アンチエイリアスなし)描画のため、線と塗りの境界がくっきり分かれ、塗りつぶしでフチが残りません。線で囲った領域を塗りつぶしでベタ塗りすれば、配色の面積バランスを素早く確かめられます。パレットを作り直しても描いた絵は消えないので、同じラフのまま色候補だけ差し替えて比較する、といった使い方もできます。

画像の読み込み・色の分析・画像の書き出しは、すべてお使いのブラウザ内で完結します。画像がサーバーにアップロードされることは一切ありません。

使い方

1. 「色数」で作りたいパレットの色数を指定します(2〜24色)。
2. 画像から作る場合: 枠内に画像をドラッグ&ドロップするか、クリックしてファイルを選択します。コピーした画像を Ctrl+V(Macは⌘+V)で貼り付けることもできます。読み込むと自動で抽出されます。
3. ランダムで作る場合: 配色タイプを選んで「ランダム生成」を押します。何度でも引き直せます。
4. 残したい色があれば、色の右上の 🔓 を押してロック(🔒)してから再生成します。
5. 色の微調整: 各色の左上の 🎚 を押すと調整パネルが開き、色相・彩度・明度のスライダーとHEX入力でその色だけを手動で調整できます。調整した色は自動でロックされ、「ランダム生成」を押しても変わりません。
6. 色をクリックするとHEXコードをコピー。「HEX一覧をコピー」「PNGで保存」でパレット全体を書き出せます。「バー画像で保存」は文字なしの色バー(1色80×80px)を書き出します。イラストのキャンバス内に配置して、スポイトで色を拾いながら塗る使い方ができます。「📤 他のツールで使う」を押すと、タイムシート アニメーション作成のペン色スウォッチと、ノイズ・フラクタル模様ジェネレーターの配色「パレット」にこのパレットが表示され、画像にカラーパレットを適用では「カラーパレット作成から読み込む」で取り込めます。
7. CMYK表示: 「CMYK表示」にチェックを入れると、各色にCMYK値(印刷用の簡易換算)が併記されます。ONの間は色のクリックでCMYK値がコピーされ、「HEX+CMYK一覧をコピー」はHEXとCMYKの2列に、PNG保存にもCMYK値が焼き込まれます。設定は次回アクセス時も記憶されます。
8. 試し描き: 下のキャンバスで、パレットの色を選んでドラッグすると描けます。「塗りつぶし」を選んでクリックすると、その場所と同じ色の領域をまとめて塗れます。ペン/消しゴムの切り替え、太さ、背景色を調整でき、「絵をPNGで保存」で書き出せます。

よくある質問

画像はアップロードされますか?

いいえ。読み込んだ画像の分析はすべてブラウザ内(お使いの端末内)で行われ、当サイトを含むどこにも送信・保存されません。ページを閉じるとパレットも消えるため、必要な結果はコピーまたはPNG保存してください。

抽出された色が思っていた色と違います

抽出は「使用面積の大きい色」を優先するため、背景が広い画像では背景系の色が多くを占めることがあります。モチーフの色を拾いたい場合は、画像を先にトリミングして目的の部分だけにするか、色数を増やしてから必要な色だけコピーしてください。惜しい色が出ている場合は、その色の 🎚 から色相・彩度・明度を直接調整するのが早いです。

色を1色だけ手で直せますか?

できます。各色の左上の 🎚 を押すと調整パネルが開き、色相(0〜360°)・彩度・明度(各0〜100%)のスライダー、またはHEXコードの直接入力でその色だけを変更できます。調整した色は自動でロック(🔒)されるため、その後「ランダム生成」で他の色を引き直しても保持されます。ロックを外せば再びランダムの対象に戻ります。

色のロックはどういうときに使いますか?

ランダム生成で「この色は気に入ったので残したい」ときに使います。ロック中の色(🔒)は「ランダム生成」を押しても変わりません。なお、画像からの抽出はロックに関係なく全色を置き換えます。

「他のツールで使う」を押すと何が起こりますか?

現在のパレットがお使いのブラウザ内(localStorage)に保存され、当サイトのタイムシート アニメーション作成ではペン色のスウォッチとして定番色の隣に、ノイズ・フラクタル模様ジェネレーターでは配色メニューの「パレット(カラーパレット作成から)」として、画像にカラーパレットを適用では画像を置き換えるパレットとして使えるようになります。データが外部に送信されることはありません。もう一度押すと前回のパレットは上書きされ、常に最後に送ったパレットが使われます。保存はブラウザ単位のため、別の端末やブラウザには引き継がれません。

CMYK値はどうやって計算していますか? 印刷でそのままの色になりますか?

画面のRGB値からの簡易換算(K=1−max(R,G,B)、残りをC/M/Yに配分する一般的な計算式)で、ICCプロファイル(Japan Color 2011など)を使った色管理変換ではありません。実際の印刷の発色は、印刷所のプロファイル・用紙・インキで変わるため、表示されるCMYK値は配色メモ・指定の目安としてお使いください。入稿データの正確な色変換は、ご利用の印刷所が指定するプロファイルでペイントソフト・DTPソフト側で行うのが確実です。

対応している画像形式は?

PNG・JPEG・GIF・WebPなど、お使いのブラウザが表示できる形式に対応しています。透過PNGは透明部分を除外して抽出します。

保存したPNGはどう使えばいいですか?

CLIP STUDIO PAINTやProcreateなどのペイントソフトに読み込んで、スポイトツールで色を拾う使い方が手軽です。各色の下にHEXコード(CMYK表示ON時はCMYK値も)が焼き込まれるため、配色メモとしてそのまま保管・共有もできます。スポイト用途には「バー画像で保存」の方が向いています。文字が入らない色だけのバーなので、作業中のキャンバスの隅や別レイヤーに置いても邪魔になりません(書き出し時はバーのレイヤーを非表示にするか削除してください)。

キャンバスに描いた絵は保存されますか?

自動保存はされず、ページを閉じたり再読み込みすると消えます。残したい絵は「絵をPNGで保存」で書き出してください。背景を「透明」にすると、描いた線だけの透過PNGとして保存できます。

ペンの線がギザギザして見えます

仕様です。ペンと消しゴムは2値(アンチエイリアスなし)で描画しており、フチにぼかしを入れない代わりに、塗りつぶしとの境界に半透明の混色が発生しません。配色検討ではフチの混色がない方が色の面積を正確に比較できるため、この方式にしています。

塗りつぶしで思った範囲より広く塗られてしまいます

塗りつぶしは、クリックした場所と同じ色でつながっている領域をまとめて塗ります。線が閉じていない(隙間がある)領域は色が外に漏れて、つながっている部分全体が塗られます。塗りつぶす前に線の閉じ具合を確認するか、漏れた場合は「元に戻す」で戻して隙間をペンでふさいでください。

パレットを作り直したら描いた絵はどうなりますか?

絵はそのまま残り、描画色の候補だけが新しいパレットに入れ替わります。選択中の色も描いている途中で勝手に変わることはありません。同じラフに対して色候補を差し替えながら比較検討できます。