カラーパレット画像エクスポーター
関連する外部サイト
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
画像配色抽出画像をサーバーに送らずブラウザ内だけで主要カラー（HEX/RGB）と占有率（%）を抽出。色数指定・ワンクリックコピー・CSS/JSON書き出し対応。配色ジェネレーターベース色から補色・類似色・トライアドなど色彩理論に基づく調和したカラーパレットを自動生成。色をロックして再生成、CSS変数・Tailwind・JSONに書き出し。カラーコード変換HEX・RGB・HSL・HSV・RGBA を一画面で相互変換。どれか1つを直すと全部追従、ワンクリックコピー・透過・WCAGコントラスト対応。グラデーションジェネレーターlinear・radial・conic の CSS グラデーションを複数カラーストップで作成。角度・形状・中心を調整し、background CSS や Tailwind 値をワンクリックでコピー。
HEXカラーからカラーパレットを作成し、各色のHEXラベル付きPNG画像としてエクスポートできます。パレットの共有、Figmaへの貼り付け、SNS投稿などに最適です。すべてブラウザ内で生成され、アップロードはされません。
使い方
- カラーピッカーまたはHEX入力欄で色を追加・編集・削除します。
- スウォッチ画像のプレビューを確認します。
- パレットをPNGとしてダウンロードします。
仕組み
各色がキャンバス上に並べてスウォッチとして描画され、HEXコードがその下に表示されます。ラベルの色（黒または白）はスウォッチの明るさから自動的に選択されるため、常に読みやすくなります。そのキャンバスがPNG画像としてエクスポートされます。
機能
色の追加と編集
カラーピッカーまたはHEXコードの直接入力で、何色でも追加・削除できます。
HEXラベル
各スウォッチにHEXコードが表示されるため、パレット自体が説明になります。
読みやすいラベル
スウォッチの明るさに応じてラベルの文字色が黒または白に自動切り替わります。
PNG書き出し
共有やインポートにすぐ使える高解像度画像をダウンロードします。
活用シーン
パレットの共有
選んだ色の画像をチームメンバーやクライアントに送ります。
Figmaへ貼り付け
デザインファイルにパレット画像を参考として貼り付けます。
SNS投稿
カラースキームを見せるきれいなパレット画像をSNSに投稿します。
ブランドガイド
シンプルなブランドシートにラベル付きスウォッチ画像を掲載します。
注意事項
- 色はHEXで入力します。3桁・6桁のHEXに対応しています。
- 書き出したPNGは透明ではなく、ベタ塗りの背景を持ちます。
- スウォッチは一列に並べて配置されます。
- すべての処理はデバイス上で行われ、アップロードはされません。
よくある質問
- どのカラー形式が使えますか？
- 3桁（#abc）または6桁（#aabbcc）のHEXコードが使えます。カラーピッカーも自動でHEXを書き込みます。
- 何色まで追加できますか？
- 何色でも追加できます。スウォッチが増えるほど画像の幅が広がります。
- PNGは透明ですか？
- いいえ。各スウォッチはエリアを塗りつぶすベタ色なので、画像に透明部分はありません。
- 商用利用できますか？
- はい。画像は自分の色をスウォッチとして描画したものなので、作成したものはご自身のものです。
- データはサーバーに送信されますか？
- いいえ。パレット画像はブラウザ内ですべて生成されます。