HSL を RGBA に変換
色相・彩度・輝度を、CSSですぐに透明度を設定できるrgba()の値に変換します。
hsl 入力
結果 · RGBA
rgba(255, 61, 119, 1)
HEX
#FF3D77
RGB
rgb(255, 61, 119)
HSL
hsl(342, 100%, 62%)
HSV
hsv(342, 76%, 100%)
CMYK
cmyk(0%, 76%, 53%, 0%)
使い方: HSL を RGBA に変換
- 1
色を入力する
カラーコードを入力するか、カラーピッカーで色を選びます。各フィールドには表示されている形式で入力できます。
- 2
変換結果を確認する
入力と同時に結果が更新され、色のライブプレビューも表示されます。
- 3
コードをコピーする
必要な値をワンクリックでコピーし、デザインや CSS、印刷設定に貼り付けます。
HSLとRGBAについて
HSLとRGBAは、色に対する2つの異なる考え方から生まれました。HSLは色相・彩度・輝度で色を定義するため、関連する色のセットをデザインしやすくなります。RGBAは0〜255の赤・緑・青のチャンネル値と、不透明度を表すアルファチャンネルで色を定義します。多くのJavaScriptライブラリ、canvasの描画コード、グラフ作成ツール、古いCSSのコードベースでは、この形式が求められます。
このツールは、HSLの値をアルファが1（完全に不透明）のrgba()に変換します。最後の数値を編集すると透明度を付けられます。少し透けるパネルなら0.8、写真へのオーバーレイなら0.3、見えなくするなら0です。ヒント：最新のCSSではhsl(160 60% 45% / 0.3)のようにHSLに直接アルファを加えることもできますが、ライブラリやメールテンプレートが新しい構文に対応していない場合は、rgba()のほうが安心です。
すべての処理はブラウザ内で完結します。画像がサーバーにアップロードされることはありません。