HSLをRGBに変換する方法

Question

###前提・実現したいこと
入力された値を使ってHSLを生成しています。

この生成されたHSLを、RGBに変換するにはどのようなコードが良いか教えて頂けませんでしょうか。

###試したこと
下記のようにしてみたのですが、値を拾ってくれずうまくいきませんでした。

<div></div>

<h4>下記「#hsl」を、rgbに変換して「#rgb」に出力したい</h4>
<p>HSL→<span id="hsl"></span></p>
<p>RGB→<span id="rgb"></span></p>

<script>
// 1から360まで入力
var score = '30';

// hslを作る
var hsl = 'hsl('+score+', 50%, 50%)';
$('div').css('background','radial-gradient(circle, '+hsl+' 0%, transparent 50%)');
$('#hsl').text(hsl);

// rgbに変換
var div_bg = $('div').css('background');
var rgb = div_bg.substr( 21, 4 );
$('#rgb').text(rgb);
</script>

<style>
div{width:200px;height:200px;}
</style>

▲ https://jsfiddle.net/g8bwf031/

Answer 1

なぜbackgroundが取れないのかは分かりませんが、とりあえずbackground-colorなら取れるようですね。

$('div').css('background-color',hsl);
var div_bg = $('div').css('background-color');

なお、中でどのような変換がされているのか分からないので、私は自力で計算するほうが確実で良いのではないかと思います。

Answer 2

参考になれば（動作確認はしてません。あしからず）

HSLをRGBに変換する方法