Как именно должны быть написаны цвета 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, написанные обоими способами в Интернете, и действительно не понимаю - что правильно, и как вы конвертируете между ними?

Приветствия.

Answer 1

Для CSS Рекомендация W3C Цветовой модуль CSS уровня 3 определяет, как значения цвета HSL должны быть указаны в color имущество:

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

тл; др:

1. оттенок: без единицы
2. насыщенность: процент
3. легкость: процент

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

Цвета 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 + '%)';
}