CSSカラープロパティ — ウェブ開発者のための完全ガイド

最も基本的な2つのCSSカラープロパティは、color（テキスト用）とbackground-color（要素の背景用）です。名前付きカラー、HEX、RGB、HSL、最新のカラー関数を含む、すべての有効なCSSカラー値を受け付けます。 colorプロパティは要素の前景色を設定し、主にテキストコンテンツに影響します。独自の色が指定されていないボーダー、テキストデコレーションなどのデフォルトカラーとしても使用されます。 background-colorプロパティは要素のコンテンツとパディング領域全体を塗りつぶします。背景画像の背後に位置し、画像の読み込み失敗時のフォールバックとしてよく使用されます。

CSSは基本的なrgb()とhsl()を超えて進化しました： rgb()関数は最新のスペース区切り構文をサポートしています：従来のrgb(255, 0, 0)の代わりにrgb(255 0 0)。アルファ透明度はスラッシュを使用：rgb(255 0 0 / 50%)。 hsl()関数も同様に動作します：hsl(210 100% 50%)は鮮やかな青です。HSLは明度と彩度を独立して調整できるため、色のバリエーション作成に便利です。 新しいcolor-mix()関数で2色をブレンドできます：color-mix(in srgb, red 30%, blue)。 oklch()とoklab()関数は知覚的に均一な色空間を提供します。

CSSグラデーションは滑らかな色の遷移を作成し、background-imageプロパティで設定します。 リニアグラデーションは直線状に流れます：background: linear-gradient(to right, #ff0000, #0000ff)。任意の角度を指定できます。 ラジアルグラデーションは中心点から放射状に広がります：background: radial-gradient(circle, red, blue)。 コニックグラデーションはパイチャートのように中心点の周りを回ります：background: conic-gradient(red, yellow, green, blue, red)。カラーホイールやパイチャートの作成に最適です。

CSSは透明度を制御する複数の方法を提供します： opacityプロパティは要素全体とすべての子要素に影響します：opacity: 0.5。ホバーエフェクトに便利ですが、背景だけを透明にすることはできません。 カラー値のアルファチャンネルは、適用された特定のプロパティのみに影響します。background-color: rgb(255 0 0 / 50%)はテキストを不透明に保ちながら背景だけを半透明にします。 transparentキーワードはrgba(0, 0, 0, 0)と等価です。 currentColorキーワードは現在のテキスト色を継承し、SVGアイコンやボーダーをテキスト色と同期させるのに便利です。

CSSカスタムプロパティ（変数）は最新のカラーシステムの基盤です。色を一度定義してスタイルシート全体で再利用できます。 var()で使用します：color: var(--color-primary)。カラー関数と組み合わせることで動的テーマの真の力が発揮されます。 ダークモードでは変数を上書きするだけです：@media (prefers-color-scheme: dark) { :root { --color-text: #f9fafb; } } 当サイトのカラーピッカーツールはすべてのCSS形式で色の値を即座に生成します。画像から色を選んで必要なCSSコードを取得してください。