配色パレット作成
基準色と配色方式を選んで、2色または3色のパレットを作成します。補色・類似色・トライアド・分裂補色から選び、各HEXコードをコピーするか、一覧をテキスト保存できます。
できること
4方式から配色を作成
補色・類似色・トライアド・分裂補色から選び、基準色の彩度と明度を保って色相を変えます。
各コードを取得
色面とHEXコードを確認し、個別にコピーするか、表示順の一覧をpalette.txtとして保存できます。
候補を次の基準にする
候補の「基準にする」で色を入れ替え、配色を作り直せます。
使い方
基準色を入力
HEX・RGB・HSL・HSV・CMYKを選んで入力するか、色面から選びます。
配色方式を選ぶ
補色は2色、類似色・トライアド・分裂補色は3色を作ります。
配色を作成
「配色を作成」で色面とHEXコードを確認します。生成後の方式変更では、確定した基準色からパレットが更新されます。
コードを取得
各コードをコピーするか、すべてコピー・TXTで保存を使います。基準色を変えたら再度作成してください。
こんなときに便利
アクセント色の候補を探す
ページや制作物の基準色をもとに、色相の関係が異なる候補を比べます。
配色を作業メモへ残す
パレットのHEXを表示順にコピー・保存し、制作ツールへ入力します。
配色方式と結果の範囲
4つの色相の関係
補色は基準色と180度離れた色、類似色は前後30度、トライアドは120度ずつ、分裂補色は150度・210度離れた色を使います。類似色では基準色が中央です。
彩度と明度を保つ
基準色のHSLから色相をずらし、彩度と明度を保ちます。8ビットRGBへ丸めてHEXを表示します。無彩色などでは同じHEXが並ぶ場合もあり、色の数と順序を保ちます。
見やすさは別に確認
色相の関係による配色は、文字コントラストや見やすさを保証しません。文字と背景の組み合わせはコントラスト確認で調べてください。
よくある質問
同じ色が複数出るのはなぜですか？
無彩色などでは色相を変えても同じHEXになる場合があります。結果を補正・重複削除せず、方式ごとの色の数と順序を保ちます。
コピーすると基準色が変わりますか？
コピーでは変わりません。「基準にする」を押すとHEX入力へ切り替わり、元のパレットを消します。再度「配色を作成」で作り直してください。
CSS変数や画像として保存できますか？
出力はHEXコードのコピーとpalette.txtです。CSS変数・画像などの形式は出力しません。
入力と結果
- 入力
- 基準色のHEX・RGB・HSL・HSV・CMYK、または色選択。透明度は扱いません。
- 方式
- 補色・類似色・トライアド・分裂補色。
- 出力
- 2色または3色のHEXコード。表示順に改行してコピー・palette.txtとして保存します。