カラーパレット生成ツール

カラーパレット生成ツールの使い方

カラーピッカーまたはHEXコードでベースカラーを選択し、ハーモニーモードを選ぶと自動的にカラーパレットが生成されます。各色のプレビューボックスをクリックするとそのHEXコードがコピーされます。「CSS変数コピー」ボタンでCSS変数形式で全色をコピーできます。

よくある質問（FAQ）

Q. 各カラーハーモニーモードの違いは何ですか？

A. 補色は色相環の反対側の色、類似色は隣り合う色、トライアドは120度ずつ離れた3色、スプリット補色は補色の両隣の色、モノクロマティックは同じ色相で明度・彩度を変えた色の組み合わせです。

Q. 生成したカラーパレットをCSSで使うには？

A. 「CSS変数コピー」ボタンをクリックすると、:root に設定するCSS変数形式でクリップボードにコピーできます。そのまま var(--color-1) のように使用できます。

Q. アクセシビリティに配慮した配色を選ぶコツは？

A. テキストと背景のコントラスト比がWCAG 2.1で推奨される4.5:1以上になるよう、明度差のある組み合わせを選びましょう。モノクロマティックモードが明度のバリエーション確保に便利です。