カラースキーム生成

使い方

1. ページを開くと、既定の基準色 #4F46E5 からスキームと明度ランプがすでに表示されています。最初の結果にクリックは不要です。
2. 自分の色に変えます：#4F46E5、rgb(79, 70, 229)、hsl(243, 75%, 59%)、英語の CSS 色名を貼り付けるか、システムのピッカーを使うか、「ランダムな基準色」を押します。入力に合わせてすべて再計算されます。
3. 色相の関係を選びます。類似色（0°、±30°、±60°）は近い色域にとどまり、補色（0°、180°）は正反対、三色（0°、120°、240°）と四色（0°、90°、180°、270°）は広がりを増し、分裂補色（0°、150°、210°）は衝突を避けつつ緊張感を保ちます。ランプは常に基準色の明度 88 / 70 / 52 / 34 / 18% なので、「メイン色の明るい／暗いバージョン」がすぐ手に入ります。
4. 任意のスウォッチをタップすると、選択した形式で値がコピーされます。「CSS をコピー」はセット全体を :root のカスタムプロパティとして、「値をコピー」は 1 行に 1 値として出力します。

対象範囲・制限・よくある質問

• ルールは 5 つで、カスタム角度やカラーウォールはありません。正確な色相が必要な場合は基準色を設定するか、カラー変換を使ってください。
• ランプは「基準色から白／黒へ 25% 近づける」ではなく、固定の明度ステップ（88 / 70 / 52 / 34 / 18%）を使います。基準色が異なっても比較しやすい階段になりますが、すでに非常に明るい／暗い基準色ではランプの差がほとんど感じられません。
• グレー、白、黒の基準色では、スキームの全色が同じになります。完全に彩度のない色で色相を回しても何も変わらないためです。これは不具合ではなく、正直な算術の結果です。
• 不透明な色のみです。アルファ、rgba()、8 桁の HEX には対応していません。透明度はカラー変換の担当です。
• sRGB の画面値のみです。CMYK、Lab、カラーマネジメントには対応していません。同じ HEX でも調整されていないディスプレイでは異なって見えますが、このツールはそれを偽装しません。
• コントラストは、スウォッチに印刷する値を黒にするか白にするかの判断にのみ使います。コントラスト比は報告しません。アクセシビリティの確認にはカラー変換を使ってください。
• 幾何学が保証するのは色相の関係であり、美しさではありません。高彩度の補色ペアは依然として派手になり得ます。それがこのルールの意味です。
• 「ランダムな基準色」はブラウザーの crypto.getRandomValues から取得します。暗号学的に強力ですが、物理的なエントロピーサービスではありません。そのような乱数源がないブラウザーでは無効になりますが、それ以外は動作し続けます。
• アップロード、保存、URL への書き込みはありません。再読み込みすると #4F46E5 ＋類似色＋HEX に戻り、共有ボタンが共有するのはページのリンクのみです。スキームは「CSS をコピー」で持ち出してください。
• 英語の CSS 色名を入力として受け付けるのは、それが CSS の構文だからです。色名のローカライズ出力はありません。同じ色に標準的な日本語名やアラビア語名があるわけではないためです。
• 丸めは表示レベルです。成分は整数なので、同じ色を HEX と HSL の間で変換すると成分が 1 ずれる場合があります。