基準色から配色づくり
基準色から補色・類似色・3色配色を作り、カラーコードをまとめてコピーします。
使い方
- 基準色を選び、近い色でまとめるなら類似色、差を付けるなら補色、3方向に分けるなら3色配色を選びます。
- 結果のコードをコピーして、デザインの色指定へ移します。
- 情報の区別には色だけでなく、見出し・線種・ラベルも付けます。
このツールが向いている作業
ブランド色を保ちながら、ボタンや図表に使う候補色を探すためのパレットです。基準色の色相だけを回し、彩度と明度をそろえた組み合わせを提示します。
入力と設定
結果
入力例と実際の出力
- 基準色: #ff0000
- 配色の組み方: 3色配色
出力例: #ff0000 #00ff00 #0000ff
赤を基準に3色配色を選ぶと、赤・緑・青の3色が得られます。色相の規則による候補であり、文字の読みやすさや印刷時の色再現を保証するものではありません。
仕様と注意点
HSLの色相を回して配色します。読みやすさは用途ごとにコントラスト比チェックで確認してください。
次の作業・使い分け
影色・明色の色見本 — 決めた色の明暗を作り、背景色や線の濃さを比較できます。
よくある質問
黒や白を選ぶと同じ色になるのはなぜ？
彩度が0の色は、色相を変えても色が変わりません。明るさの段階が欲しい場合は影色・明色の色見本を使ってください。
類似色は何度ずつ離れていますか？
基準色の前後30度です。補色は180度、3色配色は120度ずつ離します。
生成した配色は文字の読みやすさも保証しますか？
色相を基準にした配色候補です。文字の読みやすさや印刷での色再現は保証しないため、用途に合わせて確認してください。
関連ツール
ツールを紹介
ツール名と公開URLだけを共有します。入力した内容や処理結果は含まれません。