配色の作成(補色・類似色・トライアド・テトラード・単色)

配色の作成(補色・類似色・トライアド・テトラード・単色)

ローカル処理

基準色から補色・類似色・トライアド・テトラード・単色の配色、またはランダムパレットを作ります。

使い方と処理基準

基準色から補色・類似色・トライアド・テトラード・単色の配色、またはランダムパレットを作ります。

ツールの処理はブラウザ内で行われます。計算・変換の共有リンクを作成すると値がURLに含まれます。アカウント・アクセス解析・広告の情報はプライバシーポリシーをご確認ください。

処理制限

  • 最大入力文字数: 100,000文字

「作業」で配色方法を選ぶと、色相環で角度を回して合う色を計算します。彩度・明度は基準色と同じにするので、トーンの揃ったパレットになります。

ランダムパレットは作るたびに結果が変わります。

できること

補色
色相環の反対側(180°)の色です。
類似色・トライアド・テトラード
±角度、120°間隔、90°間隔で色を選びます。
単色の明度段階
同じ色の明度だけを変えた段階を作ります。
ランダムパレット
規則(均等・類似・補色)とパステルかどうかを決めてランダムに作ります。

配色の作成(補色・類似色・トライアド・テトラード・単色)の使い方

  1. 1
    作業を選ぶ配色方法を選びます。
  2. 2
    基準色を入力色を選び、必要なら角度・段階数を決めます。
  3. 3
    コピーパレットの色コードをコピーします。

活用例

補色
入力: #3366cc
結果: #cc9933
トライアド
入力: #ff0000
結果: #ff0000、#00ff00、#0000ff
類似色 ±30°
入力: #3366cc
結果: #33b3cc、#3366cc、#4d33cc
明度5段階
入力: #3366cc、5段階
結果: #0a1429、#1f3d7a、#3366cc、#85a3e0、#d6e0f5

主な利用シーン

  • Webサイトやスライドのアクセントカラーを決めるとき
  • グラフの複数系列に合う色を選ぶとき
  • ブランドカラーの明るい・暗い段階を作るとき

よくある質問 (FAQ)

補色を使えばいつも合いますか?

コントラストが強く目立ちますが、広い面積に両方を使うと重く感じます。片方をアクセントとして少しだけ使うのが一般的です。

このツールへのご意見・ご要望はありますか? 提案・お問い合わせ →