【CSS Modules】color-mix()関数の使い方
color-mix()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
color-mix()関数は、指定された色空間で2つの色をブレンドし、新しい色を生成する関数です。この関数は、ウェブサイトやアプリケーションのデザインにおいて、既存の色から多様なカラーバリエーションを簡単に作り出すことを目的としています。例えば、ベースとなるテーマカラーを少し明るくしたり、異なる2つの色の中間色を生成したりする際に非常に役立ちます。
関数の使用には、まずinキーワードに続けて、色の混合に使用する色空間を指定します。よく使われる色空間にはsrgb（標準的なWeb色空間）やlab、lchなどがあり、どの色空間で混合するかによって、結果として得られる色の見た目が大きく異なります。その後、混ぜ合わせたい1つ目の色とその割合、そして2つ目の色と必要に応じてその割合を指定します。もし一方の色の割合のみを指定した場合、残りの割合はもう一方の色に自動的に割り当てられます。例えば、color-mix(in srgb, red 30%, blue)と記述すると、sRGB色空間で赤色を30%、青色を70%の割合で混合した新しい色が生成されます。
この機能は、CSSのカスタムプロパティ（CSS変数）と組み合わせることで、アプリケーション全体の色テーマを動的に変更したり、アクセシビリティ要件に合わせて色のコントラストを調整したりする際にも強力なツールとなります。デザイナーや開発者がより柔軟に色を扱い、一貫性のある美しいユーザーインターフェースを実現するための、現代のCSSにおける重要な関数の一つです。
構文(syntax)
1color-mix(in srgb, red, blue)
引数(parameters)
in <colorspace>, <color> [ <percentage> ]?, <color> [ <percentage> ]?
- in <colorspace>: 混合に使用する色空間を指定します。例:
in srgb - <color> [<percentage>]?: 混合する1つ目の色と、その混合比率（パーセント）を指定します。
- <color> [<percentage>]?: 混合する2つ目の色と、その混合比率（パーセント）を指定します。
戻り値(return)
color-mix() 関数は、指定された2つの色を、指定された色空間で、指定された比率で混合した結果の色を返します。