しくみ
ベースカラーと配色パターンを選ぶと、色相環で色相を回転させたり明度を変えたりして、調和の取れたパレットを作ります。色見本をタップするとコードをコピーでき、全体をCSS変数としてまとめてコピーしてスタイルシートに貼り付けることもできます。
補色 = 色相 + 180° · トライアド = 色相 + 120°と + 240°
配色パターン
- 補色: 正反対の色どうしで、コントラストが強く、目立たせたいボタンに向いています。
- 類似色: 色相環で隣り合う色で、落ち着いた自然なデザインに向いています。
- トライアドとテトラード: 等間隔に並ぶ3色または4色の色相で、にぎやかでバランスの良いパレットになります。
- スプリットコンプリメンタリー: 補色の両隣の2色です。コントラストを保ちつつ、刺激が控えめになります。
- モノクロマティック、明清色・暗清色: 1つの色相を複数の明度段階に分けたもので、UIの状態表示に最適です。
活用のヒント
- 1色をメインカラー、1色をアクセントカラーにして、残りは控えめに使いましょう。
- 公開する前に、文字と背景の組み合わせをコントラストチェッカーで確認しましょう。
- すべてブラウザ内で処理され、何も保存されません。
計算の基準と出典
- 配色はCSS Color Module Level 4で定義されたHSL色相環で計算
最終確認 2026年10月7日
よくある質問
1色から配色パレットを作るには?
ベースカラーを入力し、配色パターンを選んでください。色相環で色相を回転させたり明度を変えたりして、合う色を作ります。
Webサイトに向いている配色は?
類似色やモノクロマティックは落ち着いて統一感があります。ボタンやリンクには補色を1つアクセントとして加えましょう。
明清色と暗清色とは?
明清色は色を明るくしたもの、暗清色は暗くしたものです。ホバー時の状態、枠線、背景に便利です。
パレットを書き出せますか?
はい。CSS変数のブロックをコピーするか、色見本をタップしてHEXコードを1つだけコピーできます。
ランダムな配色も提案できますか?
「ランダムなベースカラー」をタップすると新しい色から始まり、配色パターンを切り替えながら試せます。