JQuery цвета, от RGB до HSL и обратно

Question

Я использую jquery colors , чтобы преобразовать цвет из шестнадцатеричного в hsl, изменить его оттенок, добавив к нему число от 0 до 360, а затем выполнить мод 360, чтобы получить новое значение оттенка, котороеЯ действительно заинтересован в получении

Проблема в том, что я не могу понять, как правильно преобразовать его обратно в RGB

Учитывая следующий пример (вы можете протестировать его на jsfiddle здесь), почему hslAfter имеет значение, отличное от hsl?

Из того, что я вижу, я просто преобразовываю originalColor, который находится в HEX, в массив значений HSLзатем, пытаясь сделать из него строку, в hslAfter.

function testHue() {
    var originalColor = $.colors($("#originalColor").val());

    var hsl = $.colors(originalColor).model('HSL').get();
    var hslAfter = $.colors(hsl).toString('hsl');
    var hex = $.colors(hsl).toString('hex');
}

не должны ли hslAfter иметь те же значения, что и hsl?(Я даже не упоминаю новое шестнадцатеричное значение здесь, которое, в свою очередь, должно совпадать с исходным шестнадцатеричным цветом)

Я что-то здесь упускаю (в любом случае, чтобы это исправить)?

Answer 1

Вы просто пропустили некоторые параметры согласно документации ...

$.colors( colorInput, [formatName], [modelName] )

Создает цвет на основе аргументов.Возвращает объект цвета.

colorInput Строка или массив, представляющий цвет

formatName Имя формата цвета

modelName Название цветовой модели цвета

Вот DEMO, где вывод HEX теперь совпадает с вводом HEX ...

http://jsfiddle.net/uEUJq/9/

Answer 2

Вы можете использовать jscolor.js из jscolor.com .У них много примеров .

См. Это jsfiddle для моего примера.

function testHue() {
    var originalColor = $.colors($("#originalColor").val());
    
    var rgb = $.colors(originalColor).model('RGB').get();
    var hsl = $.colors(originalColor).model('HSL').get();
    var hslAfter = $.colors(hsl,'array3Normalized', 'HSL').toString('hsl');
    var hex = $.colors(hsl,'array3Normalized', 'HSL').toString('hex');
  
    $("#rgbColor").html("<b>rgb: </b>" + rgb);
    $("#hslColor").html("<b>hsl: </b>" + hsl);
    $("#hslAfter").html("<b>hsl.toString('hsl'):</b> " + hslAfter);
    $("#hexColor").html("<b>hsl.toString('hex'): </b>" + hex);    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script
  src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" ></script>
<script src="http://http://jscolor.com/release/2.0/jscolor-2.0.4/jscolor.js"></script>

<div style="width:500px; margin:5px;">
    <div id="rgbColor"><b>rfb: </b></div>
    <div id="hslColor"><b>hsl: </b></div>
    <div id="hslAfter"><b>hsl.toString('hsl'):</b></div>
    <div id="hexColor"><b>hsl.toString('hex'): </b></div>
    
<br/>

<input type="text" id="originalColor" 
class="jscolor {hash:true}" 
onchange="testHue();"
value="ab2567" />
</div>