タスクの道筋 / 入力から結果へ
5 色のカラーハーモニーを作る方法
- 01
シードカラーを設定する
「シード HEX」に 6 桁の 16 進数値を入力します。# プレフィックスは省略可能です。「シードピッカー」で視覚的に色を選ぶこともでき、2 つのフィールドは同期されます。ワークスペースはシード #5D4DF1 で開きます。
- 02
ハーモニールールを選ぶ
「アナロガス」「補色」「スプリット補色」「トライアド」「テトラド」「モノクローム」から選びます。エンジンは固定の色相オフセットを適用し、中央のスウォッチを元のシード色に固定します。そのため、ほかの色が理論上の厳密な角度に一致するとは限りません。モノクロームは色相を保ちつつ、彩度と明度を変えます。
- 03
コントラスト目標を設定する
「テキストのコントラスト目標」を選びます。3:1 は大きなテキスト、4.5:1 は AA 本文テキスト、7:1 は AAA 本文テキスト向けで、デフォルトは 4.5:1 です。各スウォッチは黒と白のどちらか、より読みやすい方との対比で測定されます。
- 04
パレットを生成する
「パレットを生成」を押します。5 つのスウォッチが現れ、中央のスウォッチは常に入力したシードそのものです。残りの 4 つは制限された範囲内で色相・彩度・明度をシードの周りにずらすので、ランプがネオンや濁色に流れず、使える配色に保たれます。
- 05
コントラストバッジを読む
各スウォッチには 16 進数値、コントラスト比、「合格」または「目標未達」のバッジが表示され、スウォッチの文字はコントラスト比較に勝った側の色（黒または白）でレンダリングされます。「目標未達」のバッジは、テキストにはもっと暗い・明るい隣の色を選ぶべきという意味で、色が壊れているわけではありません。
- 06
CSS をコピー、または JSON をダウンロードする
「CSS をコピー」で、カスタムプロパティ --palette-1 から --palette-5 を含むコメント付きの :root ブロックをコピーします。「JSON をダウンロード」は toolars-palette.json を保存し、シード、ハーモニー、コントラスト目標、各色のコントラストデータに加え、null に設定された aiModel と api のフィールドが記録されます。