カラーパレットジェネレーター
端末内で動作し、何も送信されません。すべてブラウザ内で処理され、何もアップロードされません。
色数5
ヒント：スペースキーで新しいパレットを生成できます。配色ルール
書き出し
:root {
--color-1: #264653;
--color-2: #2a9d8f;
--color-3: #e9c46a;
--color-4: #f4a261;
--color-5: #e76f51;
}色相環の配色ルールやランダムでカラーパレットを作成。気に入った色を固定して、CSS 変数・Tailwind・JSON でコピーできます。
「生成」（またはスペースキー）で新しいパレットを作ります。残したい色を固定すると、ほかの色は色相環の配色ルールに沿ってその周りに作り直されます。隣り合う類似色、モノクロームの濃淡、補色や分裂補色、トライアドやテトラード、または色相を均等に散らした完全ランダムから選べます。カラーコードをクリックでコピー、色見本をクリックで自分で色を選べます。CSS カスタムプロパティ、Tailwind のカラースケール、JSON で書き出し、PNG 保存、同じパレットを開くリンクのコピーもできます。
よくある質問
配色ルールの意味は？
色相環上の位置関係です。類似色は隣同士（落ち着いた印象）、補色は正反対（強いコントラスト）、分裂補色は補色の両隣、トライアドは 120° ずつ離れた 3 色、テトラードは 90° ずつの 4 色です。モノクロームは色相を保ったまま明るさだけを変えます。
ブランドカラーを軸にパレットを作るには？
最初の色見本をクリックして自分の色を選び、固定してから「生成」を押します。空いている枠が、選んだルールに沿ってその色から埋まります。
色見本の上の文字は読みやすい？
カラーコードの文字色は、コントラストが高いほうの黒か白に自動で切り替わります。本文用の組み合わせは、カラーツールの WCAG コントラストチェックで確認してください。
何か保存されますか？
現在のパレットはこの端末に保存されます。共有リンクはアドレスの # 以降に色を入れており、この部分は当サイトのサーバーに送信されません。