カラーパレットジェネレーター
無料のカラーパレットジェネレーター。類似色・補色・トライアドなどの調和のとれた配色を作成し、気に入った色を固定して HEX や CSS で書き出せます。
スペースキーか「生成」で新しい色に。残したい色はロックし、コードをクリックするとコピーできます。
コピー形式
関連ツール: 画像からカラーパレット・スポイト · カラーコントラストチェッカー
できること
このジェネレーターは、ウェブサイト、アプリ、プレゼンテーション、デザイン向けのカラーパレットを作成します。配色ルールを選ぶとベースカラーから相性のよい色を組み立て、スペースキーを押すとランダムなパレットを生成します。気に入った色をロックすれば、それ以外の色だけが変わります。色は OKLCH 色空間で計算されるため、色相が変わっても見た目の明るさが保たれ、バランスのよいパレットになります。色は HEX、CSS 変数、JSON でコピーでき、リンクでパレットを共有することもできます。
使い方
- 配色ルールとベースカラーを選ぶか、ランダムのままにします。
- 気に入るまでスペースキーか「生成」を押し、残したい色をロックします。
- カラーコードをクリックしてコピーするか、パレット全体を HEX、CSS、JSON でコピーします。
よくある質問
配色ルールにはどんな意味がありますか？
色相環に基づく定番の組み合わせです。類似色は隣り合う色相で落ち着いた印象に、補色は反対側の色相で強いコントラストに。トライアドとテトラードは3色または4色の色相を均等に配置し、スプリットコンプリメンタリーは補色の組み合わせをやわらげ、モノクロマティックは1つの色相を複数の濃淡で使います。
なぜ HSL ではなく OKLCH なのですか？
HSL では、明度の値が同じ黄色と青でも、見た目の明るさは大きく異なります。OKLCH は人間の知覚に基づいて設計されているため、色相を回しても色の明るさがそろったままです。そのために CSS に追加された色空間です。
色が読みやすいか確認できますか？
はい。コントラストチェッカーを使うと、ある色の文字を別の色の背景に置いたときに WCAG のアクセシビリティ基準を満たすかどうかを確認できます。