RGBとHSLの相互変換
= カラーコード、CSS用の 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色空間の変換は値の誤差が生じる場合があります。
《プログラム参考》「プチモンテ」


おすすめサイト・関連サイト…

Last updated : 2020/02/23