CSSで全てを彩る(2025年版)
CSSにおける色指定の最新手法を包括的に解説。2025年時点で利用可能な色関数(rgb()、hsl()、oklch()など)、カスタムプロパティを使った高度なカラーマネジメント、アクセシビリティを考慮したコントラスト比の確保方法、グラデーションやアルファチャンネルの活用テクニックまで、モダンCSSで色を操るための完全ガイド。
背景メモ
- CSS-TricksはCSS(ウェブサイトの見た目を制御する言語)に特化した老舗テクニカルブログ。この記事は2025年時点での最新CSS色指定テクニックの総まとめ。
- 従来CSSでは「red」「#FF0000」「rgb(255,0,0)」などの限られた記法しか使えなかったが、近年のアップデート(CSS Color Module Level 4/5)で大きく拡張された。
- 注目すべき新機能:sRGBより広い色域(P3など)に対応する「OKLCH」「OKLAB」という人間の知覚により近い色空間の導入。色を「明度・彩度・色相」で直感的に指定できる「hsl()」に代わる、より正確な「oklch()」。
- 「color-mix()」関数を使えば2色を任意の割合で混ぜられる。「relative colors」で既存の色から明度だけ変えた派生色を生成可能に。
- @supportsを使ったフォールバック対応や、CSS変数との組み合わせでテーマ設計が劇的に柔軟になった。ウェブデザインの表現力がOSのネイティブアプリ水準に近づいてきたことを示す重要なトピック。