19

HSBカラーをHSLに変換するにはどうすればよいですか？

Photoshopは、カラーピッカーにHSBカラーを表示します。HSLカラーはCSSで使用できます。

私はこのJSを試しました：

関数hsb2hsl（h、s、b）{
  戻る {
    h：h、
    s：s、
    l：bs / 2
  }
}

しかし、hsb2hsl(0, 100, 50).l == 0代わりに25

更新： HSB→RGB→HSLを変換せずにそれを行うことはできますか？

4

8 に答える 8

16

これが最も正確だと思います。

function hsv_to_hsl(h, s, v) {
    // both hsv and hsl values are in [0, 1]
    var l = (2 - s) * v / 2;

    if (l != 0) {
        if (l == 1) {
            s = 0;
        } else if (l < 0.5) {
            s = s * v / (l * 2);
        } else {
            s = s * v / (2 - l * 2);
        }
    }

    return [h, s, l];
}
于 2015-08-06T09:14:47.643 に答える
16

短いが正確

これを試してください（[0,1 ]のs、v、l、詳細：hsv2rgbrgb2hsv およびhsl2rgbrgb2hsl ） 

let hsl2hsv = (h,s,l,v=s*Math.min(l,1-l)+l) => [h, v?2-2*l/v:0, v];

let hsv2hsl = (h,s,v,l=v-v*s/2, m=Math.min(l,1-l)) => [h,m?(v-l)/m:0,l];


let hsv2hsl = (h,s,v,l=v-v*s/2,m=Math.min(l,1-l)) => [h,m?(v-l)/m:0,l];
let hsl2hsv = (h,s,l,v=s*Math.min(l,1-l)+l) => [h, v?2-2*l/v:0, v];

console.log("hsv:["+ hsl2hsv(30,1,0.6) +"] hsl:["+ hsv2hsl(30,0.8,1) +"]");


// -------------------
// UI code
// -------------------

let $ = x => document.querySelector(x);
let c = (x,s) => $(x).style.backgroundColor=s;
let hsl=[0,1,0.5];
let hsv=hsl2hsv(...hsl);

let refreshHSV =(i,e) => {
   hsv[i]= e.target.value/(i?100:1);
   hsl=hsv2hsl(...hsv);
   refreshView();
}

let refreshHSL =(i,e) => {
   hsl[i]= e.target.value/(i?100:1);
   hsv=hsl2hsv(...hsl);  
   refreshView();
}

let hsv2rgb = (h,s,v) => {                              
  let f= (n,k=(n+h/60)%6) => v - v*s*Math.max( Math.min(k,4-k,1), 0);     
  return [f(5),f(3),f(1)];       
}

let refreshView = () => {
   let a= [hsl[0], (hsl[1]*100).toFixed(2), (hsl[2]*100).toFixed(2)]; 
   let b= [hsv[0], (hsv[1]*100).toFixed(2), (hsv[2]*100).toFixed(2)]; 
   
   let r= hsv2rgb(...hsv).map(x=>x*255|0);
   let ta= `hsl(${a[0]},${a[1]}%,${a[2]}%)`
   let tb= `hsv(${b[0]},${b[1]}%,${b[2]}%)`
   let tr= `rgb(${r[0]},${r[1]},${r[2]})`
   
   c('.hsl', tr);   
   $('#sv').value=hsv[1]*100;
   $('#v').value =hsv[2]*100;
   $('#sl').value=hsl[1]*100;
   $('#l').value =hsl[2]*100;
   $('.info').innerHTML=`${tr}\n${tb}\n${ta.padEnd(25)}`;   
}



refreshView();
.box {
  width: 50px;
  height: 50px;
  margin: 20px;
}

body {
    display: flex;
    background: white;
}
<div>
<input id="h" type="range" min="0" max="360" value="0" oninput="refreshHSV(0,event)">Hue<br>
<div class="box hsl"></div>
<pre class="info"></pre>
</div> 

<div>
<input id="sv" type="range" min="0" max="100" value="0" oninput="refreshHSV(1,event)">HSV Saturation<br>
<input id="v" type="range" min="0" max="100" value="100" oninput="refreshHSV(2,event)">HSV Value<br><br><br>
<input id="sl" type="range" min="0" max="100" value="0" oninput="refreshHSL(1,event)">HSL Saturation<br>
<input id="l" type="range" min="0" max="100" value="100" oninput="refreshHSL(2,event)">HSL Lightness<br>
</div>

このコードは、私が発見してwikiに書き込んだ数式に基づいています

ここに画像の説明を入力してください

于 2019-01-09T19:02:36.810 に答える
4

スティーブンモーリーはここにそれを釘付けにしたようです。

具体的には：

/* Calculates and stores the HSL components of this HSVColour so that they can
 * be returned be the getHSL function.
 */
function calculateHSL(){
  // determine the lightness in the range [0,100]
  var l = (2 - hsv.s / 100) * hsv.v / 2;

  // store the HSL components
  hsl =
    {
      'h' : hsv.h,
      's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
      'l' : l
    };

  // correct a division-by-zero error
  if (isNaN(hsl.s)) hsl.s = 0;
}

彼は色相に[0-360]を使用し、その他の値に[0-100]を使用します。

于 2013-07-16T05:01:24.920 に答える
3

まず、操作の順序は次のようになります。

b - s / 2 =
50 - 100 / 2 =
50 - 50 = 0

除算演算子は減算よりも優先順位が高いためです。25を期待している場合は、(b - s) / 2代わりに行う必要があります。

ただし、この結果があなたの望むものであるかどうかは正確にはわかりません。B（V）とLの両方の定義はRGB色空間に基づいているため、変換を計算するには、少なくともMとmの値を復元する方法が必要です。

詳細については、ウィキペディアの記事を参照してください。

于 2010-08-06T11:36:39.037 に答える
1

ウィキペディアには、 KamilKiełczewskiが示した数式は表示されなくなりました。これらは次のようになります。

const hsvToHsl = (h, s, v, l = v * (1 - (s / 2))) => [h, l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l), l];
const hslToHsv = (h, s, l, v = l + s * Math.min(l, 1 - l)) => [h, v === 0 ? 0 : 2 * (1 - (l / v)), v];

ここに画像の説明を入力してください

于 2021-03-04T06:21:33.143 に答える
0

Tinycolorライブラリを使用してみることができます。HSVからHSLに変換するには、これを行うことができます

tinycolor("hsv(34, 56%, 100%)").toHslString()

次のような結果が得られるはずです： "hsl（34、100％、72％）"

于 2017-02-02T08:52:45.770 に答える
-2

異なる色空間の間には多くの変換式があります：http ：//www.easyrgb.com/？X = MATH

于 2015-07-22T09:17:19.677 に答える
-3

私のJavascriptの知識が不足しているのではないかと思いますが、http：//ariya.blogspot.com/2008/07/converting-between-hsl-and-hsv.htmlから変換を推測できるはずです。

于 2010-08-06T11:34:33.797 に答える