カラーパレット生成とは？
カラーパレット生成ツールは、色彩理論に基づいた調和のとれた配色を作成します。ベースカラーと調和ルールを選ぶだけで即座にパレットが完成します。
始め方は3通り。カラーピッカーで基準色を選ぶか16進コードを貼り付ける、写真をドロップして主要な色を抽出する、または ocean や sunset などのムードを入力します。次に調和ルールを選ぶと、ツールが色相環上の色彩理論の比率に基づいて残りの色を生成します。残したい色をロックし、ほかをシャッフルし、気に入った色をクリックすればその色を軸にパレット全体を作り直せます。色覚フィルター越しに結果をプレビューしたら、5色を CSS カスタムプロパティのブロック、Tailwind 設定、デザインシステム向けの JSON ファイルとして書き出せるほか、スウォッチを PNG や SVG 画像として保存し、ブリーフやSNSで共有できます。
使い方
- 基準色から始める、写真をドロップして色を抽出する、または ocean や sunset などのムードを入力する
- ハーモニー規則を選択：補色、類似色、三色、分裂補色、テトラディック、モノクロマティック
- 各スウォッチを HEX・RGB・HSL のいずれかでコピーし、コントラスト表で読みやすい組み合わせを確認したうえで、パレットを CSS・Tailwind 設定・JSON、または PNG / SVG のスウォッチ画像として書き出します
使用するタイミング
- クライアント承認済みのメインカラーから、ブランドのフルパレットを組み立てる。
- チャートやダッシュボードに、視認性の高いアクセントカラーを選ぶ。
- スライドや SNS 用のビジュアル制作前に、配色案を素早く試す。
結果
ベースカラー #3498DB の三色配色で #3498DB、#976CD6、#DB3498 を生成。
よくある質問
- 補色・類似色・三色配色は何が違うのですか?
- 補色はベースと色相環で 180° 反対の色を組み合わせ、最も強いコントラストになります。類似色は色相環上 30° 以内に収め、落ち着いた印象になります。三色配色は 120° ずつ離した 3 色で、力強くも均整の取れた配色になります。
- 気に入った色だけ残して他を作り直せますか?
- できます。残したい色のロックボタンを押し、ハーモニーやベース色を変えるか「シャッフル」を押します。ロック中の色はそのままで、それ以外が周りで再生成されます。
- エクスポート形式はどれを選べばよいですか?
- CSS は --color-1 のようなカスタムプロパティを出力し、Tailwind オプションは設定にそのまま貼れる theme.extend.colors ブロックを生成し、JSON はデザイントークン管理ツールやスクリプト向けの構造化オブジェクトです。パレットを画像として共有したいとき——ブリーフ、スライド、SNS投稿など——は、ビットマップなら PNG、くっきりしたベクターのスウォッチなら SVG を選びます。
- WCAG のコントラスト基準は自動で満たされますか?
- 内蔵のコントラスト表が、各組み合わせを WCAG 2.x の基準 — AAA は 7:1、AA は 4.5:1、AA Large は 3:1 — で採点し、不合格はローズで示します。本文やボタンに割り当てる前にこの表から組み合わせを選んでください。ハーモニー規則は視覚的バランスのためのもので、コントラスト比を保証するものではありません。
- 私の色データはどこに行きますか?
- どこにも送られません。色の計算はすべてページ内で行われ、ドロップした写真は色を抽出するために端末上で読み込まれるだけで、どこにも送信されません。基準色も配色も書き出したファイルもすべて端末内に残るので、未公開のブランド配色も自分のクリップボードと同じくらい安全です。