グラフィック / 色
カラーパレット生成ツール：ワンクリックで調和のとれた配色を作成
色彩理論に基づき、類似色、補色、三色配色、分裂補色、モノクローム、ランダムから選んで、3色から8色のカラーパレットを作成します。気に入った色を固定して残りを再生成でき、各色の白に対するコントラストを確認し、パレットをCSS変数、Tailwind設定、JSON、16進カラーコード、PNGとして書き出せます。
カラーパレット生成ツール：ワンクリックで調和のとれた配色を作成: 各パレットはベースとなる色相から始まります。固定した色がある場合は、その色相がベースになります。その他の色相は、選択したルールに従って配置されます。類似色では30°ずつ、補色では反対の色相、三色配色では120°ずつ、分裂補色では両側に150°、モノクロームでは1つの色相を暗色から明色へ変化させます。明度と彩度も変化させるため、明るい色、中間の色、暗い色がそろい、各色には白に対するWCAGコントラスト比が表示されます。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
またはスペースバーを押してください。残したい色をロックします。
#64A6F5白地で2.5:1#382B9D白地で10.5:1#772BB7白地で7.5:1#BE4BBA白地で4.3:1#E0367B白地で4.2:1:root {
--color-1: #64a6f5;
--color-2: #382b9d;
--color-3: #772bb7;
--color-4: #be4bba;
--color-5: #e0367b;
}
パレットの使い方
一般的には、1色目のニュートラルカラーを約60%、2色目を30%、アクセントカラーを10%に分けます。最も強い色は、ボタンやハイライトに控えめに使う配分です。
コントラスト
通常の文字では4.5:1、大きな文字では3:1がWCAG AAの最低基準です。7:1でAAAを満たします。
使い方
- 配色ルールと色数を選びます。
- 気に入るまで生成ボタンまたはスペースバーを押します。残したい色は固定します。
- パレットをコードとしてコピーするか、PNGとしてダウンロードします。
プライバシーと制限事項
すべてブラウザ内で生成されます。
関連ツール
よくある質問
気に入った色を残すにはどうすればよいですか？
その色のロックをクリックしてください。固定した色はそのまま残り、最初に固定した色は、他の色を作る基準となるベースの色相にもなります。
ブランドカラーを使えますか？
はい。スウォッチをクリックして任意の色に設定し、固定すると、その色を基準に残りの色を生成できます。
パレット上のテキストは読みやすいですか？
各スウォッチには白とのコントラスト比が表示されます。WCAGでは通常のテキストに少なくとも4.5:1を求めているため、それを下回る色には暗いテキストが必要です。
無料ツール · ブラウザ内で · アカウント不要