配色スキーム

機能

• 七通りの定番：単色・類似色・補色・分裂補色・トライアド・テトラード・ニュートラル
• ⚠️ ランダム配色の生成もできます。9 テーマ（ソフト／ビビッド／ダーク／ライト／暖色／寒色／ネオン／アースカラー／モノクロ）から選択。各テーマの範囲（彩度・明度）はオプション自体に書いてあり、中身の見えないアルゴリズムではありません
• ランダムな色相は均等に配置され、個別に抽選はしません —— 個別抽選だとほぼ同色のブロックがぶつかりやすく、それがランダム配色の最も嫌われる点です
• 同じバッチ内で重複せず、明度も 2 つの帯の間で切り替わります（暗・明・暗・明）。そうしないとブロック同士が溶けて見えます
• どの基準色でも全体を再計算。3 桁短縮（#36f）も 6 桁も使えます
• すべての色に色見本 —— 画面に並んだ色番号は情報量がほとんどありません
• 各色の 16 進表記を表示し、行ごとにコピーできます
• 各組み合わせに「使い方」を一行 —— 向く場面と代償
• さらに 60 / 30 / 10 の面積比を表示 —— 色の選択より面積の失敗のほうが目立ちます
• ニュートラルは基準色の色相を混ぜたグレー。画面が「背景＋色ブロック」ではなく一つのまとまりに見えます
• 基準色に黒と白のどちらの文字が合うかを WCAG コントラスト比つきで表示
• よく使う基準色は検索できるドロップダウンに。選べばすぐ算出します
• 空欄では既定の基準色で例を表示。最初の画面が空になりません
• 貼り付け耐性。例文の括弧や全角文字がついても計算結果は変わりません
• 計算はすべてブラウザー内で完結し、入力した色値は送信されません

使い方

1. 入力欄に基準色（例：#3366ff）を入れます。色値が思い出せなければドロップダウンから選んでください
2. 結果は七通りの組み合わせごとに並び、各色に色見本と色値が付きます
3. 各組み合わせの末尾に「使い方」があり、向く場面と代償を説明します
4. 最後のグループに 60 / 30 / 10 の面積比があり、各色をどのくらいの面積で使うべきかが分かります

よくある質問

算出された組み合わせが、思っていたものと違うのはなぜですか？

配色は入力した色そのもので決まるからです。同じ「補色」でも、赤で算出するのと青で算出するのでは全く別の二色になります —— ここが「収録された配色集」との違いです。収録は他人が選んだ完成品を渡しますが、本ツールはあなたの色から導きます。特定の効果を見たいときは、その色を入れて算出し直してください。

名前（単色・トライアドなど）はどこから来ていますか？

色相環上の角度関係を表す色彩理論の共有知です。隣り合う 30 度が類似色、180 度が補色、三等分がトライアド —— この語彙はイッテンの色彩論やそれ以前の色彩理論で確立しており、特定の誰かのものではなく、出典表示も不要です。本ツールはその関係をあなたの基準色に当てはめているだけです。

算出された色をそのままデザインに使えますか？

出発点としては使えますが、そのまま流用はしないでください。 保証しているのは関係性が正しいこと（色相の角度、明暗の段階）だけで、ブランドとの相性、アクセシビリティ、文脈は保証しません。特に自分で確認すべきは二点です。第一にコントラスト —— 本文と背景は WCAG の 4.5:1 を満たす必要があります。ツールは基準色の黒字・白字のコントラストは出しますが、他の組み合わせはご自身で確認してください。第二に印刷 —— 画面の RGB 値と刷り上がりは一致しません。実際に製造するものは物理的な色見本帳で合わせてください。

60 / 30 / 10 とは何ですか？

面積の比率です。ニュートラル（背景・文字・罫線）がおよそ 60%、基準色が 30%、アクセントが 10%。ウェブ配色で最も引用され、最も無視される原則です —— 色が完璧でも面積を間違えれば画面は乱れたままです。典型的な失敗は基準色で画面を埋めること。高彩度の広い面は疲れますし、余白がなければ階層も生まれません。そこで三つの面積と実際の色値を並べて示しています。

ニュートラルが純粋なグレーでないのはなぜですか？

基準色の色相を混ぜているからです。鮮やかな色の隣に純粋なグレーを置くと、「背景が一枚と色ブロックがいくつか」という読み方になります。グレーに基準色の色相をわずかに含めると、背景・罫線・副次的な文字が基準色と同じ仲間に見え、画面が一つのまとまりになります。デザインシステムに「暖かいグレー」「冷たいグレー」の二系統があるのはこのためで、それぞれ暖色系・寒色系のブランド色に対応しています。