メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
カラー
/
HSL→RGB v2
◉
HSL→RGB v2
color/hsl-to-rgb-2
H,S,Lの整数3値を読み取り、CSSの rgb(R, G, B) 関数表記だけを返すHSL→RGB変換です。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
HSL→RGB v2では、H,S,Lの整数3値を読み取り、CSSの rgb(R, G, B) 関数表記だけを返すHSL→RGB変換です。
関連する観点として HSL→RGB v2、hsl to rgb v2、hsl to rgb を確認し、結果をコピーして別の作業に使えます。
カラーを入力
結果
コピー
使い方
色入力欄に 38, 92, 50 のようにH、S、Lの順で整数を入力します。
結果欄に rgb(...) だけが表示されることを確認します。
小数や負号は現在の抽出式では扱わないため、整数値に丸めて入力します。
Copy ボタンでrgb()関数表記をコピーします。
入力例・出力例
INPUT
38, 92, 50
OUTPUT
rgb(245, 159, 10)
node検算済み。v1と異なりHEXは併記されません。
よくある利用シーン
HSL指定をCSSの rgb() 関数へ直接貼り替えたいとき。
HEXコードを不要とし、RGBの3成分だけを確認したい場面。
hsl-to-rgb と同じ色を入れて、出力形式の違いを比較したいとき。
結果確認のポイント
色空間、透明度、コントラスト、コピーしたコード形式が用途に合うか確認してください。
HSL→RGB v2、hsl to rgb v2、hsl to rgbの観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
画面やOSの色管理により見え方が変わるため、最終判断は実機でも確認してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
HSL→RGB v2の主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
v1(hsl-to-rgb)との違いは何ですか?
このv2はHSL値の入力範囲や内部計算のアルゴリズムをわずかに変えた別実装です。同じ入力でも浮動小数点の丸め方が異なる場合があり、計算精度の比較や動作確認に使えます。
色相が負の値や360°を超えた場合はどうなりますか?
入力欄から最初に見つかった整数3値をH/S/Lとして素朴に処理します。負号は正規表現で拾わないため -30 は 30 として読まれ、360°超の値も事前の正規化は行いません。
彩度0%のときRGBはどうなりますか?
彩度S=0%のとき、色相の値に関わらず無彩色(グレー)になります。R・G・B はすべて輝度Lと同じ値になり、L=50%なら (128, 128, 128) になります。
関連ツール
カラーシェード生成
指定色の明暗バリエーション(10段階)を自動生成。
アクセシブルカラー生成
前景色・背景色をHEXで指定するとWCAG 2.1のコントラスト比を自動計算。通常テキスト(AA 4.5:1/AAA 7:1)と大きい文字(AA 3:1/AAA 4.5:1)それぞれの合否をバッジで表示し、プレビュー文で実際の見え方も確認できます。
ANSIカラー一覧
ANSIエスケープシーケンスの文字色コード(標準8色 SGR 30〜37、高輝度8色 90〜97)と背景色コード(40〜47、100〜107)を色名・番号・エスケープシーケンスの対応表で確認できるツール。ターミナル配色の把握やシェルスクリプトの色指定に。
ブランドカラー一覧
主要ブランド名と代表的なHEXカラー値を2列の固定表で確認できる。
CMYK→HEX変換
CMYKカラー値をHEXに変換する。
コントラスト比早見表
WCAGでよく使う1:1、3:1、4.5:1、7:1、21:1の意味を固定表で確認できる。
WCAG AA 白背景
入力HEX色を白背景と比較し、通常テキストと大テキストのWCAG AA到達可否を表示する。
HEX #追加
改行区切りの各行について、#が無いHEX表記の先頭に#を付ける単純変換。