カラーパレット生成

ベースカラー1色から調和する配色パレットを作成します。

補色
類似色
トライアド
モノクロマティック

使用例

Webサイトの配色を計画する

ブランドのベースカラー1色から、ボタンや背景、アクセントに使える調和した配色をすぐに作成します。

補色で目立つアクセントカラーを見つける

メインカラーの正反対の色相を確認し、CTAボタンなど目立たせたい要素の色を決めます。

モノクロマティックパレットで奥行きを出す

同じ色相の明るい・暗いバリエーションを使い、1色だけでまとまりのある洗練されたデザインを作ります。

よくある質問

色の値はサーバーに送信されますか?

いいえ。すべての計算はブラウザ内でのみ行われ、入力した色の値がサーバーに送信されることはありません。

各配色タイプはどのように計算されますか?

ベースカラーをHSLに変換し、カラーホイール上で角度を回転させて計算します。補色は180度反対、類似色は±30度、トライアドは120度ずつ離れた色です。モノクロマティックは同じ色相と彩度を保ったまま明度だけを変化させたバリエーションです。

非常に暗い色や明るい色を入力するとどうなりますか?

モノクロマティックパレットの明度は5〜95%の範囲に制限されているため、元の色が黒や白に非常に近い場合、いくつかのバリエーションが似て見えることがあります。