RGBとHSLの相互変換 |
- RGB色空間とHSL色空間を相互に変換し、コードを取得することができます。
- HTMLのカラーコードの入力、及び、RGB、HSLのスライドバーからの色の設定が可能で、プレビュー画面にカラーコード、CSS用の rgb()、hsl() や、反対色、補色が表示されます。また、設定したカラーをテキストに反映させたサンプルを、太宰治「走れメロス」の書き出しで表示しました。
- 表示された各コードをクリックするとコピーすることができます。
- HSLでは透明度を指定することもできます。 「hsla(0, 100%, 50%, 0.2);」のように、「hsla();」を使って、alpha：透明度を 0（透明） ～ 1（不透明） の間で指定します。この例の4つ目の「0.2」が透明度です。これは、「rgba();」でも使えます。
赤/Red を 0.2 で設定したサンプル
#ff0000
rgb(255,0,0);
hsl(0,100%,50%);
反対色 #00ffff
補色 #00ffff
黒/Black #000000
メロスは激怒した。必ず、かの邪智暴虐
の王を除かなければならぬと決意した。メロスには政治がわからぬ。メロスは、村の牧人である。笛を吹き、羊と遊んで暮して来た。けれども邪悪に対しては、人一倍に敏感であった。
［背景色は、白/White #FFFFFF］
| HTMLカラーコード
＊入力後、枠外をクリックすると反映されます。
|
|---|
| RGB | ||
|---|---|---|
| R | ||
| G | ||
| B | ||
| HSL | ||
|---|---|---|
| H | ||
| S | ||
| L | ||
- HTMLカラーコードを3桁形式で入力した場合、自動的に6桁形式に変換されます。
［#fff → #ffffff］
《変換の誤差について》
- RGBとHSL色空間の変換は値の誤差が生じる場合があります。
《プログラム参考》「プチモンテ」