color-mix() でテーマカラーを動的生成

解説

ボタンごとにベースとなる色を 1 つ指定するだけで、ホバー時の少し暗い色を自動で計算して表示するサンプルです。鍵は CSS の color-mix() 関数で、color-mix(in srgb,var(--base) 85%,#000) と書くことで「ベース色を 85%、黒を 15% 混ぜた色」をその場で生成しています。色ごとにホバー色を手作業で用意する必要がなく、--base を変えるだけで全体が連動するのが特長です。

テーマカラーを切り替えられる UI、複数のブランド色を持つボタン群、ダークモードで色を自動調整したい場面などに向きます。デザイントークンを 1 つ決めれば、明るめ・暗めの派生色をコードで一元的に導けるので、配色の管理がぐっと楽になります。

カスタマイズと注意点

• 暗くする度合いは混ぜる黒の割合（この例では 15%）を変えて調整します。明るくしたいなら黒の代わりに #fff を混ぜます。
• 各ボタンの色は HTML 側の --base を書き換えるだけで切り替わります。
• color-mix() は比較的新しい CSS 機能です。未対応のブラウザではホバー色が反映されないことがあるので、重要な配色には従来通りの固定色をフォールバックとして用意しておくと安心です。色のコントラスト確保も忘れないでください。