Webサイトやアプリのコーディングでは、ボタンのホバー時の色や半透明の背景、オーバーレイなど、透明度を活用したデザインが数多く使われています。
その際によく使用されるCSSプロパティが「opacity」ですが、要素全体に透明度が適用されるため、背景だけでなく文字や画像まで一緒に薄くなってしまうという特徴があります。
このような問題を解決し、「背景色だけ」「ボーダーだけ」といった特定の色に対して透明度を適用できるのが、CSSのカラー指定方法である「HSLA」です。
HSLAは、人間がイメージする「色合い・鮮やかさ・明るさ」の感覚に沿って直感的に色を表現できるHSLカラーモデルに、4つ目の要素として「透明度（Alpha）」を追加したカラーコードで、色味を直感的に動かしながら透明度も細かく設定できるため、デザインの表現力と自由度を劇的に高められます。
ここでは、HSLAの基本的な仕組みからCSS・HTMLでの具体的な書き方、半透明色の作り方、透明度（Alpha）の指定方法、実務でよく使われる使用例、注意点までをわかりやすく解説します。
HSLAとは？HSL色コードに「透明度」をプラスするカラーモデル
CSSでデザインを表現する際、色に「透け感」を与えて表現の幅を広げてくれるのが「HSLA」カラーモデル。
人間がイメージしやすい直感的な色調整の仕組みである「HSL（色相・彩度・明度）」に、新しく「A（Alpha：アルファ＝透明度）」の要素をプラスしたものです。
・HSL：「H（色相）」「S（彩度）」「L（明度）」の3つの要素で色を表現
・HSLA：HSLの3要素に、透明度を表す「Alpha値」を加えることで、色と透明度を同時に指定
同じ青色や赤色であっても、このAlpha値を調整することで、後ろが透けて見える背景（オーバーレイ）や、重ね合わせた要素の美しい馴染み具合など、モダンなWebデザインに欠かせない表現をミリ単位で自在にコントロールできるようになります。
現在の主要ブラウザで完全サポート
HSLAはCSS Color Moduleで定義されており、現在の主要ブラウザで広くサポートされています。
外部CSSファイルでの記述はもちろん、HTMLのstyle属性（インラインCSS）でもそのまま利用可能ですので、背景色（background-color）や文字色（color）だけでなく、境界線（border）やボックスの影（box-shadow）など、あらゆるCSSプロパティにおいて非常に強力な武器になります。
特に、透明度を活かしたデザインで効果を発揮します。
HSLAの「A（Alpha：不透明度）」の意味
・概念：HSL（色相・彩度・明度）に、4つ目の要素として「不透明度（Alpha）」を加えたもの。
・数値の範囲：0.0（完全な透明）〜1.0（完全な不透明）の小数、または 0% 〜 100% のパーセンテージで指定する。
HSLAの末尾にある「A」は、Alpha（アルファ値）のことで、色の「不透明度」を表します。
数値は、完全に透けて見えなくなる「0.0」から、一切透けない元の色の状態である「1.0」までの小数、または「0%」から「100%」までのパーセンテージで指定するのがルールです。
・1.0（または100%）：完全に不透明（元の色の状態）
・0.5（または50%）：半透明（背景が半分透けて見える状態）
・0.1（または10%）：ほぼ透明（うっすらと色味がかかっている状態）
・0.0（または0%）：完全に透明（目には見えない状態）
たとえば、背景にきれいな写真やグラデーションが敷かれている場合、その上に載せるカードやメニューの背景に 0.7（70%）ほどのアルファ値を設定することで、後ろの景色が美しく透き通るモダンなUIデザイン（グラスモーフィズムなど）が簡単に実現できます。
なお、0.0（または0%）を指定した場合は、色を指定しても、完全に透明になるため色は表示されません。
また、1.0（または100%）を指定した場合は、通常のHSLと同じように、不透明な色として表示されます。
HSLとHSLAの違いは？
HSLとHSLAの決定的な違いは、「指定した色に透明度（透け感）を持たせることができるかどうか」にあります。
・HSL：不透明な「色」そのものを作るためのカラーモデル。
・HSLA：作った色に対して「透明度（Alpha）」の情報を追加できるカラーモデル。
ベースとなる「色相（H）」「彩度（S）」「明度（L）」の役割や数値の決め方は、HSLもHSLAも完全に共通しています。
そのため、まずはHSLを使って「理想の赤」や「理想の青」を作り、それを「少し透けさせたいな」と思った段階で末尾にアルファ値を書き足すだけで、HSLAとしての指定が完了します。
なお、HSLの基本仕様や、色相・彩度・明度の具体的な数値の決め方については、「HSLとは？CSSカラーコード･HTMLでの色コードの使い方やHEX･RGBとの違いわかりやすく解説）]で詳しく解説していますので、あわせて参考にしてください。
【CSS/HTML】hsla() 関数の具体的な書き方
CSSファイルやHTMLの style 属性の中で、透明度を含んだ色を指定するときは hsla() 関数を使用します。
具体的な構文と、実務で頻出するコードの書き方を見ていきます。
hsla() 関数の基本的な構文
css
selector {
background-color: hsla(色相, 彩度%, 明度%, 不透明度);
}
■ hslaの各パラメータの意味
hsla()は次の4つの値で構成されています。
・色相（Hue）：0〜360の数値で色の種類を指定
・彩度（Saturation）：0〜100%で色の鮮やかさを指定
・明度（Lightness）：0〜100%で色の明るさを指定
・透明度（Alpha）：0〜1（または0〜100%）で透明度を指定
■ hslaの書き方のルール
書き方のルールは以下の3点のみです。
・最初の3要素はHSLと同じ：
第1引数（色相）は数値のみ（単位なし）、第2・第3引数（彩度・明度）には必ず「%」を付与します。
・第4引数に不透明度を書く：
最後にカンマで区切って、不透明度（0.0 〜 1.0 または 0% 〜 100%）を記述します。
値は 0〜1 が一般的（例：0.5）だが、「%」を付与した書き方でもOK。
・各引数の間はカンマ（,）で区切る：
従来から広く使われている記述方式では、4つの数値をカンマで繋ぎます。
たとえば、不透明な青 hsl(240, 100%, 50%) を半透明にしたい場合は、関数名を hsla に変えて末尾に数値を足し、hsla(240, 100%, 50%, 0.5) または、hsla(240, 100%, 50%, 50%) と記述します。
■ hslaの実際の使用例
不透明な青（通常のHSL）
background-color: hsl(240, 100%, 50%);
半透明の青（HSLA）
background-color: hsla(240, 100%, 50%, 0.5);
透明度を50%で指定する別パターン
background-color: hsla(240, 100%, 50%, 50%);
HSLAを使う際の注意点
HSLAは透明度を含めて色を指定できる便利なカラーコードですが、実務で使用する際にはいくつか押さえておきたいポイントがあります。
ここでは、最新のCSS仕様やブラウザ対応、透明度の扱いなど、HSLAを利用する際の注意点を解説します。
hsla()とhsl()の関係（CSS Color Level 4）
従来、HSLで透明度を指定する場合は、hsla()関数を使用するのが一般的でした。
background-color: hsla(210, 100%, 50%, 0.5);
しかし、CSS Color Module Level 4ではhsl()関数が拡張され、hsla()を使用しなくても透明度を指定できるようになりました。
新しい記法では、各値をスペースで区切り、透明度をスラッシュ（/）の後に指定します。
background-color: hsl(210 100% 50% / 0.5);
このように、現在のCSSではhsl()だけで色と透明度をまとめて指定できます。
なお、hsla()が廃止されたわけではありません。現在の主要ブラウザでは、従来のhsla()と新しいhsl()の記法のどちらもサポートされています。そのため、新規プロジェクトでは最新仕様のhsl()を採用し、既存プロジェクトでは従来のhsla()を継続するなど、プロジェクトのコーディングルールに合わせて使い分けるのがおすすめです。
ブラウザ対応
HSLAは主要なWebブラウザで広くサポートされており、現在のWeb制作では安心して利用できます。
・Google Chrome
・Microsoft Edge
・Mozilla Firefox
・Safari
いずれもhsla()およびCSS Color Level 4のhsl()記法に対応しています。
ただし、古いブラウザや長期間更新されていないシステムでは、最新のスペース区切り・スラッシュ区切りの記法に対応していない場合があります。
このような環境を考慮する必要がある場合は、従来のhsla()やカンマ区切りのhsl()を使用すると安心です。
Alpha値の扱い
HSLAのAlpha値は、0～1の範囲で指定します。
0：完全に透明
0.5：半透明
1：完全に不透明
Alpha値を変更しても、色相・彩度・明度は変わりません。そのため、同じ色のまま透明度だけを調整できるのがHSLAの大きなメリットです。
一方で、透明度を下げすぎると背景が透けて文字が読みにくくなったり、ボタンやアイコンの視認性が低下したりする場合があります。
特に、文字色や重要なUI要素にHSLAを使用する場合は、背景とのコントラストを確認し、読みやすさや操作性を損なわない透明度に設定することが重要です。
デザイナーとのルール統一
実務では、デザインツールとの色指定方法を統一しておくことも大切です。
例えば、FigmaやAdobe XDなどのデザインツールでは、初期設定でHEXカラー（#ffffffなど）が表示されることが多く、デザイナーから渡されるデザインデータもHEX形式になっているケースが一般的です。
一方、コーディングではHSLAを利用する場合、HEXからHSLAへ変換する工程が発生します。
そのため、チーム開発では、
・デザインデータはHEXで管理する
・コーディングではHSLAへ変換して使用する
・透明度が必要な色だけHSLAを使用する
といったルールをあらかじめ決めておくと、作業の効率化やコードの統一につながります。
また、CSS Color Level 4の新しいhsl()記法を採用するのか、従来のhsla()を使用するのかについても、プロジェクト内で統一しておくことで可読性や保守性を維持しやすくなります。
