Создание радужных цветов по значению

Я пытаюсь создать радужные цвета на основе числового значения.Создание радужных цветов по значению

var max = 10000; 
var min = 0; 
var val = 8890; 

function getcolor(min,max,val) { 
    // return red - black; 
}

цвета Красный Желтый Зеленый Синий черный (значение == 0)

Как и в URL http://i.stack.imgur.com/MRevs.jpg

Из приведенных выше значений, как генерировать цвет между красным - черный. Высокое значение красного цвета, а низкое значение черного.

источник

2016-04-18 user6217823

преобразовать их в шестнадцатеричный? попробуйте this.http: //stackoverflow.com/questions/57803/how-to-convert-decimal-to-hex-in-javascript – Giri

Нет, я хочу создать цветовой код на основе значения, max, min. – user6217823

Для выполнения этой задачи нужно всего лишь несколько вещей, которые вам нужно сделать и понять. Во-первых, понимание того, что цветовое пространство RGB - это не тот, который вы хотите для этой задачи - HSV или HSL намного лучше. Поскольку браузеры рады работать с HSL, мы будем использовать его.

Далее, если вы посмотрите на канал H в цветовом пространстве HSL, вы увидите, что там присутствует точная полоса цветов. Синий имеет оттенок около 240 °, а красный - один из 0 °.

Это означает, что мы хотим сопоставить диапазон [min..max] с оттенками [240..0] (да, отображение «назад») Имея это в виду, мы можем установить создавая функцию, которая будет выполнять сопоставление для нас и возвращает допустимую строку цвета.

function calcColor(min, max, val) 
{ 
    var minHue = 240, maxHue=0; 
    var curPercent = (val - min)/(max-min); 
    var colString = "hsl(" + ((curPercent * (maxHue-minHue)) + minHue) + ",100%,50%)"; 
    return colString; 
}

Сначала мы установили два конца тонов, которые мы хотим использовать. Далее мы выясним, где находится в текущем диапазоне текущее значение. Наконец, мы ставим себя в том же положении, что и в диапазоне Hue, а не в диапазоне ввода пользователем.

Показан простой пример его использования.

<!DOCTYPE html> 
<html> 
<head> 
<script> 
"use strict"; 
function newEl(tag){return document.createElement(tag);} 

window.addEventListener('load', onDocLoaded, false); 

function onDocLoaded() 
{ 
    for (var i=0; i<10; i++) 
    { 
     var elem = newEl('div'); 
     elem.style.backgroundColor = calcColor(0, 9, i); 
     elem.className = "rgb"; 
     document.body.appendChild(elem); 
    } 
} 

function calcColor(min, max, val) 
{ 
    var minHue = 240, maxHue=0; 
    var curPercent = (val - min)/(max-min); 
    var colString = "hsl(" + ((curPercent * (maxHue-minHue)) + minHue) + ",100%,50%)"; 
    return colString; 
} 

</script> 
<style> 
.rgb 
{ 
    width: 16px; 
    height: 16px; 
    display: inline-block; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

источник

2016-04-18 07:53:43 enhzflep

сделать некоторые пропорции:

если вы получили max - min диапазон, и вы хотите изменить цвет от черного до красного, как у описано, просто разделить диапазон на 6 этапов:

первый 1/4: RGB значения (0, 0, 0) при более низкой стоимости и (0, 0, 255) при более высоком, так что вы будете иметь градацию от черного до синего ..

второго 1/4: от (0, 0, 255) до (0, 255, 0), так что вы будете иметь градацию от синего до зеленого

третий 1/4: от (0, 255, 0) до (255, 255, 0) и это желтый

последний 1/4: от (255, 255, 0) до (255, 0, 0) и вот красный.

использовать пропорцию для определения промежуточных значений.

Наслаждайтесь :), вот небольшое объяснение с точки зрения кода ...

https://jsfiddle.net/4cq8fqjg/10/

источник

2016-04-18 07:26:46

Попробуйте это.

используйте эту библиотеку. https://github.com/bgrins/TinyColor

вычислить процентное значение вашего значения на основе максимального значения.

запустите сценарий с этим значением.

tinycolor("hsv (_CALCULATED PERCENTAGE_ 100% 100%)");

источник

2016-04-18 07:27:38 Giri

Я попробовал, он только генерировал красные и зеленые цвета. – user6217823

Создание радужных цветов по значению

ответ

Смежные вопросы