Как точно должны быть написаны цвета HSL?

Question

Непонятно, как должны быть написаны цвета HSL. W3 имеет их следующим образом:

color: hsl(120, 100%, 50%); 

В то время как ThreeJs спрашивает их, как это:

h — hue value between 0.0 and 1.0 
s — saturation value between 0.0 and 1.0 
l — lightness value between 0.0 and 1.0 

Я видел HSL цвета написаны в обоих направлениях по всей сети, и на самом деле не понимаю - что правильно, и как вы конвертируете между ними?

Cheers.

Answer 1

для CSS, то W3C Recommendation CSS Color Module Level 3 определяет, как HSL color values должны быть указаны в color собственности:

HSL цвета, кодирующие как тройной (оттенок, насыщенность, легкость). Оттенок представлен как угол цветового круга (то есть радуга, представленная в круге). Этот угол обычно так измеряется в градусах, что единица неявна в CSS; синтаксически дается только а. [...] Насыщенность и легкость представлены в процентах.

Т.Л., д-р:

1. Оттенок: безразмерный
2. насыщения: процент
3. легковесность: процент

Следующая версия, CSS Color Module Level 4 (который в настоящее время является только редактором) specifies это лучше (и кажется, что аргумент оттенка может иметь больше значений):

Цвета HSL указаны как триплет оттенка, насыщенности и легкости. Синтаксис функции hsl() является:

hsl() = hsl(<hue>, <percentage>, <percentage>) 
hsla() = hsla(<hue>, <percentage>, <percentage>, <alpha-value>) 
<hue> = <number> | <angle> | <named-hue> 

Answer 2

Для CSS значение цветового тона должно находиться в диапазоне от 0 до 360 градусов, насыщенности и светлоты должна находиться в диапазоне от 0 до 100 процентов, альфа-канал должен находиться в диапазоне от 0 до 1. Вы можете использовать регулярные выражения для разбора строк CSS цвета и получить числовые значения:

function parseHsl(color) { 
    var hslRegexp = /^\s*hsl\s*\(\s*(\d{1,3}\.?\d?)\s*,\s*(\d{1,3}\.?\d*)%\s*,\s*(\d{1,3}\.?\d*)%\s*\)\s*$/ 
    var match = color.match(hslRegexp); 
    if (!match) { 
     throw new Error('Not an HSL color.'); 
    } 
    var h = +match[1]; 
    var s = +match[2]; 
    var l = +match[3]; 
    if (isNaN(h) || isNaN(s) || isNaN(l)) { 
     throw new Error('Not a number.'); 
    } 
    h = h/360; 
    s = s/100; 
    l = l/100; 
    if (h < 0 || h > 1 || s < 0 || s > 1 || l < 0 || l > 1) { 
     throw new Error('Out of range.'); 
    } 
    return { 
     h: h, 
     s: s, 
     l: l 
    }; 
} 

function getCssHslColor(hsl) { 
    return 'hsl(' + hsl.h * 360 + ',' + hsl.s * 100 + '%,' + hsl.l * 100 + '%)'; 
}