от зеленого до красного цвета зависят от процента

Question 1

У меня есть система опросов, и я хочу, чтобы ответы на этот опрос были цветными. Например: если это 10%, оно будет красным, если 40% - желтым, а если 80% - зеленым, поэтому я хочу, чтобы мой код javascript использовал цвета rgb для создания цвета в соответствии с заданным процентом.

function hexFromRGB(r, g, b) {
    var hex = [
        r.toString( 16 ),
        g.toString( 16 ),
        b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}

Теперь хочу шестнадцатеричный от процентов.

Question 2

Это может быть больше, чем вам нужно, но это позволяет вам настроить любую произвольную цветовую карту:

var percentColors = [
    { pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
    { pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
    { pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function(pct) {
    for (var i = 1; i < percentColors.length - 1; i++) {
        if (pct < percentColors[i].pct) {
            break;
        }
    }
    var lower = percentColors[i - 1];
    var upper = percentColors[i];
    var range = upper.pct - lower.pct;
    var rangePct = (pct - lower.pct) / range;
    var pctLower = 1 - rangePct;
    var pctUpper = rangePct;
    var color = {
        r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
        g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
        b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
    };
    return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
    // or output as hex if preferred
};

Question 3

Простая схема с использованием HSL вместе со скрипкой:

function getColor(value){
    //value from 0 to 1
    var hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

настроить насыщенность и яркость по мере необходимости. и скрипка .

function getColor(value) {
  //value from 0 to 1
  var hue = ((1 - value) * 120).toString(10);
  return ["hsl(", hue, ",100%,50%)"].join("");
}
var len = 20;
for (var i = 0; i <= len; i++) {
  var value = i / len;
  var d = document.createElement('div');
  d.textContent = "value=" + value;
  d.style.backgroundColor = getColor(value);
  document.body.appendChild(d);
}

Развернуть фрагмент

Question 4

Вы можете сделать это в нескольких строках кода (без комментариев) без необходимости использования цветовых карт.

function hsl_col_perc(percent, start, end) {
  var a = percent / 100,
      b = (end - start) * a,
      c = b + start;

  // Return a CSS HSL string
  return 'hsl('+c+', 100%, 50%)';
}
//Change the start and end values to reflect the hue map
//Refernece : http://www.ncl.ucar.edu/Applications/Images/colormap_6_3_lg.png

/*
Quick ref:
    0 – red
    60 – yellow
    120 – green
    180 – turquoise
    240 – blue
    300 – pink
    360 – red
*/

Пример: https://jsfiddle.net/x363g1yc/634/

Нет необходимости в цветовых картах (если только это не нелинейное изменение цвета, о котором не спрашивали)

Предупреждение: это несовместимо с IE8 или ниже. (Спасибо Бернхарду Фюрсту)

Показать фрагмент кода

// Just used as a shortcut for below, completely optional
const red = 0,
  yellow = 60,
  green = 120,
  turquoise = 180,
  blue = 240,
  pink = 300;

function hsl_col_perc(percent, start, end) {
  var a = percent / 100,
    b = (end - start) * a,
    c = b + start;

  // Return a CSS HSL string
  return 'hsl(' + c + ', 100%, 50%)';
}

// Simple little animation
var percent = 0,
  progressDiv = document.getElementById('progress'),
  textDiv = document.getElementById('progress-text'),
  progressContainerDiv = document.getElementById('progress-container')

function step(timestamp) {
  percent = (percent < 100) ? percent + 0.5 : 0;

  // Play with me!
  let colour = hsl_col_perc(percent, red, green); //Red -> Green
  progressDiv.style.backgroundColor = colour;
  progressContainerDiv.style.borderColor = colour;
  progressDiv.style.width = percent + '%';
  textDiv.innerHTML = Math.floor(percent);
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

#progress {
  width: 0%;
  white-space: nowrap;
  text-wrap: none;
  height: 50px;
}

#progress-container {
  border: solid 2px black;
  width: 200px;
}

<h1 id="progress-text"></h1>
<div id="progress-container">
  <div id="progress"></div>
</div>

Развернуть фрагмент

Question 5

Этот метод хорошо работает в этом случае (проценты от 0 до 100):

function getGreenToRed(percent){
            r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
            g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
            return 'rgb('+r+','+g+',0)';
        }

Question 6

function hexFromRGBPercent(r, g, b) {
    var hex = [
        Math.floor(r / 100 * 255).toString( 16 ),
        Math.floor(g / 100 * 255).toString( 16 ),
        Math.floor(b / 100 * 255).toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}

Благодарим Эндрю. Он был быстрее.

Question 7

Я знаю, что это изначально старый вопрос javascript, но я пришел сюда в поисках решения только для CSS , поэтому, возможно, это поможет другим в равной степени: на самом деле это довольно просто:

Используйте процентное значение в качестве значения цвета HSL! От красного к зеленому в диапазоне H от 0до 128(так что вы можете увеличить процент, 1.2если хотите). Пример:

background-color:hsl(perc,100%,50%);

Где perc - это просто число без %знака.

Question 8

Вот что я придумал:

function rgbify(maxval, minval, val, moreisgood) {
    var intnsty = (val - minval) / (maxval - minval);
    var r, g;
    if (moreisgood) {
        if (intnsty > 0.5) {
            g = 255;
            r = Math.round(2 * (1 - intnsty) * 255);
        } else {
            r = 255;
            g = Math.round(2 * intnsty * 255);
        }

    } else { //lessisgood
        if (intnsty > 0.5) {
            r = 255;
            g = Math.round(2 * (1 - intnsty) * 255);
        } else {
            g = 255;
            r = Math.round(2 * intnsty * 255);
        }
    }
    return "rgb(" + r.toString() + ", " + g.toString() + ", 0)";
}

jsfiddle

В moreisgoodфлаг переключает , если более высокие значения должны быть красным или зеленым. maxvalи minvalявляются пороговыми значениями для вашего диапазона. valэто значение, которое нужно преобразовать в rgb

Question 9

Переход от цвета redк greenцвету с помощью HLS. Значение должно быть от 0 до 100, в данном случае имитируя процент (%).

function getColorFromRedToGreenByPercentage(value) {
    const hue = Math.round(value);
    return ["hsl(", hue, ", 50%, 50%)"].join("");
}

Question 10

Основываясь на ответе Джейкобса, я сделал загрузочную панель. Этот цвет от зеленого до красного, но вы можете изменить цвета. Для интересующихся вот мой код и jsfiddle ( http://jsfiddle.net/rxR3x/ )

var percentColors = [
    { pct: 0, color: '#00FF00' },   { pct: 3, color: '#12FF00' },   { pct: 6, color: '#24FF00' },
    { pct: 10, color: '#47FF00' },  { pct: 13, color: '#58FF00' },  { pct: 16, color: '#6AFF00' },
    { pct: 20, color: '#7CFF00' },  { pct: 23, color: '#8DFF00' },  { pct: 26, color: '#9FFF00' },
    { pct: 30, color: '#B0FF00' },  { pct: 33, color: '#C2FF00' },  { pct: 36, color: '#D4FF00' },
    { pct: 40, color: '#E5FF00' },  { pct: 43, color: '#F7FF00' },  { pct: 46, color: '#FFF600' },
    { pct: 50, color: '#FFE400' },  { pct: 53, color: '#FFD300' },  { pct: 56, color: '#FFC100' },
    { pct: 60, color: '#FFAF00' },  { pct: 63, color: '#FF9E00' },  { pct: 66, color: '#FF8C00' },
    { pct: 70, color: '#FF7B00' },  { pct: 73, color: '#FF6900' },  { pct: 76, color: '#FF5700' },
    { pct: 80, color: '#FF4600' },  { pct: 83, color: '#FF3400' },  { pct: 86, color: '#FF2300' },
    { pct: 90, color: '#FF1100' },  { pct: 93, color: '#FF0000' },  { pct: 96, color: '#FF0000' },
    { pct: 100, color: '#FF0000' }
];
var getColorPercent = function(selector, percent, time){
    var i = 0;
    var percentInterval = setInterval(function() {
         i++;
         if(percent >= percentColors[i].pct) {
            console.log(percentColors[i].color);
            $(selector).css('background-color', percentColors[i].color);
        }
        if(percentColors[i].pct>=percent) {
            clearInterval(percentInterval);
        }
    }, time/25);
    $(selector).animate({width:(200/100)*percent}, time);
}
getColorPercent('#loadbar_storage', 100, 1500);

Показать фрагмент кода

var percentColors = [
    { pct: 0, color: '#00FF00' },	{ pct: 3, color: '#12FF00' },	{ pct: 6, color: '#24FF00' },
    { pct: 10, color: '#47FF00' },	{ pct: 13, color: '#58FF00' },	{ pct: 16, color: '#6AFF00' },
    { pct: 20, color: '#7CFF00' },	{ pct: 23, color: '#8DFF00' },	{ pct: 26, color: '#9FFF00' },
    { pct: 30, color: '#B0FF00' },	{ pct: 33, color: '#C2FF00' },	{ pct: 36, color: '#D4FF00' },
    { pct: 40, color: '#E5FF00' },	{ pct: 43, color: '#F7FF00' },	{ pct: 46, color: '#FFF600' },
    { pct: 50, color: '#FFE400' },	{ pct: 53, color: '#FFD300' },	{ pct: 56, color: '#FFC100' },
    { pct: 60, color: '#FFAF00' },	{ pct: 63, color: '#FF9E00' },	{ pct: 66, color: '#FF8C00' },
    { pct: 70, color: '#FF7B00' },	{ pct: 73, color: '#FF6900' },	{ pct: 76, color: '#FF5700' },
    { pct: 80, color: '#FF4600' },	{ pct: 83, color: '#FF3400' },	{ pct: 86, color: '#FF2300' },
    { pct: 90, color: '#FF1100' },	{ pct: 93, color: '#FF0000' },	{ pct: 96, color: '#FF0000' },
    { pct: 100, color: '#FF0000' }
];
var getColorPercent = function(selector, percent, time) {
  var i = 0;
  var percentInterval = setInterval(function() {
    i++;
    if (percent >= percentColors[i].pct) {
      $(selector).css('background-color', percentColors[i].color);
    }
    if (percentColors[i].pct >= percent) {
      clearInterval(percentInterval);
    }
  }, time / 25);
  $(selector).animate({
    width: (200 / 100) * percent
  }, time);
}
getColorPercent('#loadbar', 100, 1500);

#loadbar_wrapper {
  width: 200px;
  height: 25px;
  border: 1px solid #CECECE;
}

#loadbar {
  width: 0px;
  height: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loadbar_wrapper">
  <div id="loadbar"></div>
</div>

Развернуть фрагмент

Question 11

Измените эти две строки в коде Джейкоба:

var lower = percentColors[i - 1];
var upper = percentColors[i];

кому:

var lower = (i === 0) ?  percentColors[i] : percentColors[i - 1];
var upper = (i === 0) ? percentColors[i + 1] : percentColors[i];

если вы хотите, чтобы он работал для двух крайностей (например, 0,0 и 1,0).

Question 12

Я знаю, что это своего рода удар по теме, но я нашел еще один способ сделать это.

Для этого вы также можете создать динамический холст размером 100x1 и применить к нему градиент, а затем из функции вам просто нужно получить цвет пикселя для процентного местоположения.

Вот код: Это глобальный:

/* dynamic canvas */

// this should be done once in a page so out of function, makes function faster
var colorBook = $('<canvas />')[0];
colorBook.width = 101;
colorBook.height = 1;
var ctx = colorBook.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 101, 0);
grd.addColorStop(0, "rgb(255,0,0)"); //red
grd.addColorStop(0.5, "rgb(255,255,0)"); //yellow
grd.addColorStop(1, "rgb(0,255,0)"); //green    
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 101, 1);

Тогда функция:

function getColor(value) {
  return 'rgba(' + ctx.getImageData(Math.round(value), 0, 1, 1).data.join() + ')';
}

Демо: https://jsfiddle.net/asu09csj/

Question 13

HSL будет работать в IE8 с использованием jquery-ui-1.10.4.

Я изменил ответ jongo45, чтобы принять легкость в функции.

function getColor(value, lightness) {
    //value from 0 to 1
    var hue = ((value) * 120).toString(10);
    return ["hsl(", hue, ",100%,", lightness, "%)"].join("");
}

Question 14

Код Маттисдады мне очень помог, когда я делал диаграмму для отображения статистики некоторых результатов викторины. Я немного изменил его, чтобы разрешить "отсечение" процента (не уверен, какой термин правильный), а также работать в обоих направлениях по цветовому кругу, например, от зеленого (120) к красному (0) и наоборот.

function pickColourByScale(percent, clip, saturation, start, end)
{
    var a = (percent <= clip) ? 0 : (((percent - clip) / (100 - clip))),
        b = Math.abs(end - start) * a,
        c = (end > start) ? (start + b) : (start - b);
    return 'hsl(' + c + ','+ saturation +'%,50%)';
}

По сути, если установить процентное значение для обрезки масштабирования, все, что ниже этого значения, будет окрашено как ваш начальный цвет. Он также пересчитывает масштаб в соответствии со 100% клипом.

Давайте рассмотрим пример сценария, в котором я ввожу следующие значения:

процентов: 75
обойма: 50
насыщенность: 100 (неважно, я использую это для выделения диаграммы Chart.js)
начало: 0 (красный)
конец: 120 (зеленый)
1. Я проверяю, меньше ли процент, чем clip, и возвращаю 0%, если это так. В противном случае я пересчитываю процент - 75% находится на полпути между 50% и 100%, поэтому я получаю 50%. Это дает мне 0,5.
2. Я понимаю разницу между началом и концом. Вам нужно использовать Math.abs () в случае, если ваше начальное значение оттенка больше, чем ваше конечное значение оттенка. Затем я умножаю разницу на результат, полученный на шаге 1, чтобы увидеть, насколько мне нужно сместить начальное значение оттенка.
3. Если начальное значение больше конечного значения, то нужно двигаться по цветовому кругу в противоположном направлении. Соответственно прибавить или отнять от начального значения.

Я получаю желтый, который находится на полпути между красным и зеленым. Если бы я не выполнил пересчет на шаге 1, я бы получил более зеленоватый цвет, что могло бы ввести в заблуждение.

Question 15

Я изменил ответ zmc, чтобы дать градиент от зеленого (0%) до красного (100%).

const getGreenToRed = (percent) => {
    const r = 255 * percent/100;
    const g = 255 - (255 * percent/100);
    return 'rgb('+r+','+g+',0)';
}

Answer 1

У меня есть система опросов, и я хочу, чтобы ответы на этот опрос были цветными. Например: если это 10%, оно будет красным, если 40% - желтым, а если 80% - зеленым, поэтому я хочу, чтобы мой код javascript использовал цвета rgb для создания цвета в соответствии с заданным процентом.

function hexFromRGB(r, g, b) {
    var hex = [
        r.toString( 16 ),
        g.toString( 16 ),
        b.toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}

Теперь хочу шестнадцатеричный от процентов.

Answer 2

npmjs.com/package/percent-to-hex

Евгений

Answer 3

Это может быть больше, чем вам нужно, но это позволяет вам настроить любую произвольную цветовую карту:

var percentColors = [
    { pct: 0.0, color: { r: 0xff, g: 0x00, b: 0 } },
    { pct: 0.5, color: { r: 0xff, g: 0xff, b: 0 } },
    { pct: 1.0, color: { r: 0x00, g: 0xff, b: 0 } } ];

var getColorForPercentage = function(pct) {
    for (var i = 1; i < percentColors.length - 1; i++) {
        if (pct < percentColors[i].pct) {
            break;
        }
    }
    var lower = percentColors[i - 1];
    var upper = percentColors[i];
    var range = upper.pct - lower.pct;
    var rangePct = (pct - lower.pct) / range;
    var pctLower = 1 - rangePct;
    var pctUpper = rangePct;
    var color = {
        r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
        g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
        b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
    };
    return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
    // or output as hex if preferred
};

Answer 4

1

Вау, спасибо, мистер @Jacob ^ - ^ https://jsfiddle.net/JeancarloFontalvo/1sco9Lpe/3/

Jeancarlo Fontalvo 06

Answer 5

Это именно то, что мне нужно для проекта. Большое спасибо @Jacob!

Савадо

Answer 6

1

Господи, это потрясающе

Tallboy

Answer 7

Большое спасибо. Это просто пригодилось для проекта, над которым я работаю!

rayalois22

Answer 8

127

Простая схема с использованием HSL вместе со скрипкой:

function getColor(value){
    //value from 0 to 1
    var hue=((1-value)*120).toString(10);
    return ["hsl(",hue,",100%,50%)"].join("");
}

настроить насыщенность и яркость по мере необходимости. и скрипка .

function getColor(value) {
  //value from 0 to 1
  var hue = ((1 - value) * 120).toString(10);
  return ["hsl(", hue, ",100%,50%)"].join("");
}
var len = 20;
for (var i = 0; i <= len; i++) {
  var value = i / len;
  var d = document.createElement('div');
  d.textContent = "value=" + value;
  d.style.backgroundColor = getColor(value);
  document.body.appendChild(d);
}

Развернуть фрагмент

jongo45
источник

3

Итак, это черный ящик. Любое объяснение?

Саид Нямати,

7

От красного к зеленому. var hue = (значение * 120) .toString (10);

Цянь Чен,

3

Как бы вы могли адаптировать это, чтобы включить минимальное и максимальное значение? Например, getColor(12,0,100)( getColor(value, min, max))?

Адвокат дьявола

Поцарапайте это, не работает на 100%: stackoverflow.com/questions/40110721/…

Devil's Advocate

@SaeedNeamati Устанавливает оттенок от 0 до 120 (от красного к зеленому) на основе передаваемого вами значения (от 0 до 1). Он преобразует оттенок в строку (от «0» до «120»), затем возвращает строку, кодирующую цвет в формате hsl (оттенок, насыщенность, яркость), с насыщенностью, установленной на 100%, и яркостью, установленной на 50%.

mattsoave

Answer 9

3

Итак, это черный ящик. Любое объяснение?

Саид Нямати,

Answer 10

7

От красного к зеленому. var hue = (значение * 120) .toString (10);

Цянь Чен,

Answer 11

3

Как бы вы могли адаптировать это, чтобы включить минимальное и максимальное значение? Например, getColor(12,0,100)( getColor(value, min, max))?

Адвокат дьявола

Answer 12

Поцарапайте это, не работает на 100%: stackoverflow.com/questions/40110721/…

Devil's Advocate

Answer 13

@SaeedNeamati Устанавливает оттенок от 0 до 120 (от красного к зеленому) на основе передаваемого вами значения (от 0 до 1). Он преобразует оттенок в строку (от «0» до «120»), затем возвращает строку, кодирующую цвет в формате hsl (оттенок, насыщенность, яркость), с насыщенностью, установленной на 100%, и яркостью, установленной на 50%.

mattsoave

Answer 14

Вы можете сделать это в нескольких строках кода (без комментариев) без необходимости использования цветовых карт.

function hsl_col_perc(percent, start, end) {
  var a = percent / 100,
      b = (end - start) * a,
      c = b + start;

  // Return a CSS HSL string
  return 'hsl('+c+', 100%, 50%)';
}
//Change the start and end values to reflect the hue map
//Refernece : http://www.ncl.ucar.edu/Applications/Images/colormap_6_3_lg.png

/*
Quick ref:
    0 – red
    60 – yellow
    120 – green
    180 – turquoise
    240 – blue
    300 – pink
    360 – red
*/

Пример: https://jsfiddle.net/x363g1yc/634/

Нет необходимости в цветовых картах (если только это не нелинейное изменение цвета, о котором не спрашивали)

Предупреждение: это несовместимо с IE8 или ниже. (Спасибо Бернхарду Фюрсту)

Показать фрагмент кода

// Just used as a shortcut for below, completely optional
const red = 0,
  yellow = 60,
  green = 120,
  turquoise = 180,
  blue = 240,
  pink = 300;

function hsl_col_perc(percent, start, end) {
  var a = percent / 100,
    b = (end - start) * a,
    c = b + start;

  // Return a CSS HSL string
  return 'hsl(' + c + ', 100%, 50%)';
}

// Simple little animation
var percent = 0,
  progressDiv = document.getElementById('progress'),
  textDiv = document.getElementById('progress-text'),
  progressContainerDiv = document.getElementById('progress-container')

function step(timestamp) {
  percent = (percent < 100) ? percent + 0.5 : 0;

  // Play with me!
  let colour = hsl_col_perc(percent, red, green); //Red -> Green
  progressDiv.style.backgroundColor = colour;
  progressContainerDiv.style.borderColor = colour;
  progressDiv.style.width = percent + '%';
  textDiv.innerHTML = Math.floor(percent);
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);

#progress {
  width: 0%;
  white-space: nowrap;
  text-wrap: none;
  height: 50px;
}

#progress-container {
  border: solid 2px black;
  width: 200px;
}

<h1 id="progress-text"></h1>
<div id="progress-container">
  <div id="progress"></div>
</div>

Развернуть фрагмент

Answer 15

Использование цветовой модели HSL - это круто, но, к сожалению, в Internet Explorer 8 она не работает.

Bernhard Fürst

Answer 16

Это правда, я

исправлю

Answer 17

Можете объяснить startи endв этом?

Devil's Advocate

Answer 18

1

Нет, endэто разница между начальным и конечным цветом в приведенном выше коде. hsl_col_perc(100, 60, 120)приведет к бирюзовому цвету вместо зеленого. Вам нужно изменить вторую строку на b = (end-start)*aили просто сделать ее однострочным, так как это будет легче читать.

riv

Answer 19

1

Спасибо, что оставили в кратком обзоре цветов HSL!

охуулли

Answer 20

Этот метод хорошо работает в этом случае (проценты от 0 до 100):

function getGreenToRed(percent){
            r = percent<50 ? 255 : Math.floor(255-(percent*2-100)*255/100);
            g = percent>50 ? 255 : Math.floor((percent*2)*255/100);
            return 'rgb('+r+','+g+',0)';
        }

Answer 21

function hexFromRGBPercent(r, g, b) {
    var hex = [
        Math.floor(r / 100 * 255).toString( 16 ),
        Math.floor(g / 100 * 255).toString( 16 ),
        Math.floor(b / 100 * 255).toString( 16 )
    ];
    $.each( hex, function( nr, val ) {
        if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
        }
    });
    return hex.join( "" ).toUpperCase();
}

Благодарим Эндрю. Он был быстрее.

Answer 22

Я знаю, что это изначально старый вопрос javascript, но я пришел сюда в поисках решения только для CSS , поэтому, возможно, это поможет другим в равной степени: на самом деле это довольно просто:

Используйте процентное значение в качестве значения цвета HSL! От красного к зеленому в диапазоне H от 0до 128(так что вы можете увеличить процент, 1.2если хотите). Пример:

background-color:hsl(perc,100%,50%);

Где perc - это просто число без %знака.

Answer 23

Вот что я придумал:

function rgbify(maxval, minval, val, moreisgood) {
    var intnsty = (val - minval) / (maxval - minval);
    var r, g;
    if (moreisgood) {
        if (intnsty > 0.5) {
            g = 255;
            r = Math.round(2 * (1 - intnsty) * 255);
        } else {
            r = 255;
            g = Math.round(2 * intnsty * 255);
        }

    } else { //lessisgood
        if (intnsty > 0.5) {
            r = 255;
            g = Math.round(2 * (1 - intnsty) * 255);
        } else {
            g = 255;
            r = Math.round(2 * intnsty * 255);
        }
    }
    return "rgb(" + r.toString() + ", " + g.toString() + ", 0)";
}

jsfiddle

В moreisgoodфлаг переключает , если более высокие значения должны быть красным или зеленым. maxvalи minvalявляются пороговыми значениями для вашего диапазона. valэто значение, которое нужно преобразовать в rgb

Answer 24

3

Переход от цвета redк greenцвету с помощью HLS. Значение должно быть от 0 до 100, в данном случае имитируя процент (%).

function getColorFromRedToGreenByPercentage(value) {
    const hue = Math.round(value);
    return ["hsl(", hue, ", 50%, 50%)"].join("");
}

fgfernandez0321
источник

Очень красиво, потому что поддерживает приличные приглушенные цвета, если они вам нужны :)

dijipiji

Answer 25

Очень красиво, потому что поддерживает приличные приглушенные цвета, если они вам нужны :)

dijipiji

Answer 26

Основываясь на ответе Джейкобса, я сделал загрузочную панель. Этот цвет от зеленого до красного, но вы можете изменить цвета. Для интересующихся вот мой код и jsfiddle ( http://jsfiddle.net/rxR3x/ )

var percentColors = [
    { pct: 0, color: '#00FF00' },   { pct: 3, color: '#12FF00' },   { pct: 6, color: '#24FF00' },
    { pct: 10, color: '#47FF00' },  { pct: 13, color: '#58FF00' },  { pct: 16, color: '#6AFF00' },
    { pct: 20, color: '#7CFF00' },  { pct: 23, color: '#8DFF00' },  { pct: 26, color: '#9FFF00' },
    { pct: 30, color: '#B0FF00' },  { pct: 33, color: '#C2FF00' },  { pct: 36, color: '#D4FF00' },
    { pct: 40, color: '#E5FF00' },  { pct: 43, color: '#F7FF00' },  { pct: 46, color: '#FFF600' },
    { pct: 50, color: '#FFE400' },  { pct: 53, color: '#FFD300' },  { pct: 56, color: '#FFC100' },
    { pct: 60, color: '#FFAF00' },  { pct: 63, color: '#FF9E00' },  { pct: 66, color: '#FF8C00' },
    { pct: 70, color: '#FF7B00' },  { pct: 73, color: '#FF6900' },  { pct: 76, color: '#FF5700' },
    { pct: 80, color: '#FF4600' },  { pct: 83, color: '#FF3400' },  { pct: 86, color: '#FF2300' },
    { pct: 90, color: '#FF1100' },  { pct: 93, color: '#FF0000' },  { pct: 96, color: '#FF0000' },
    { pct: 100, color: '#FF0000' }
];
var getColorPercent = function(selector, percent, time){
    var i = 0;
    var percentInterval = setInterval(function() {
         i++;
         if(percent >= percentColors[i].pct) {
            console.log(percentColors[i].color);
            $(selector).css('background-color', percentColors[i].color);
        }
        if(percentColors[i].pct>=percent) {
            clearInterval(percentInterval);
        }
    }, time/25);
    $(selector).animate({width:(200/100)*percent}, time);
}
getColorPercent('#loadbar_storage', 100, 1500);

Показать фрагмент кода

var percentColors = [
    { pct: 0, color: '#00FF00' },	{ pct: 3, color: '#12FF00' },	{ pct: 6, color: '#24FF00' },
    { pct: 10, color: '#47FF00' },	{ pct: 13, color: '#58FF00' },	{ pct: 16, color: '#6AFF00' },
    { pct: 20, color: '#7CFF00' },	{ pct: 23, color: '#8DFF00' },	{ pct: 26, color: '#9FFF00' },
    { pct: 30, color: '#B0FF00' },	{ pct: 33, color: '#C2FF00' },	{ pct: 36, color: '#D4FF00' },
    { pct: 40, color: '#E5FF00' },	{ pct: 43, color: '#F7FF00' },	{ pct: 46, color: '#FFF600' },
    { pct: 50, color: '#FFE400' },	{ pct: 53, color: '#FFD300' },	{ pct: 56, color: '#FFC100' },
    { pct: 60, color: '#FFAF00' },	{ pct: 63, color: '#FF9E00' },	{ pct: 66, color: '#FF8C00' },
    { pct: 70, color: '#FF7B00' },	{ pct: 73, color: '#FF6900' },	{ pct: 76, color: '#FF5700' },
    { pct: 80, color: '#FF4600' },	{ pct: 83, color: '#FF3400' },	{ pct: 86, color: '#FF2300' },
    { pct: 90, color: '#FF1100' },	{ pct: 93, color: '#FF0000' },	{ pct: 96, color: '#FF0000' },
    { pct: 100, color: '#FF0000' }
];
var getColorPercent = function(selector, percent, time) {
  var i = 0;
  var percentInterval = setInterval(function() {
    i++;
    if (percent >= percentColors[i].pct) {
      $(selector).css('background-color', percentColors[i].color);
    }
    if (percentColors[i].pct >= percent) {
      clearInterval(percentInterval);
    }
  }, time / 25);
  $(selector).animate({
    width: (200 / 100) * percent
  }, time);
}
getColorPercent('#loadbar', 100, 1500);

#loadbar_wrapper {
  width: 200px;
  height: 25px;
  border: 1px solid #CECECE;
}

#loadbar {
  width: 0px;
  height: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loadbar_wrapper">
  <div id="loadbar"></div>
</div>

Развернуть фрагмент

Answer 27

Измените эти две строки в коде Джейкоба:

var lower = percentColors[i - 1];
var upper = percentColors[i];

кому:

var lower = (i === 0) ?  percentColors[i] : percentColors[i - 1];
var upper = (i === 0) ? percentColors[i + 1] : percentColors[i];

если вы хотите, чтобы он работал для двух крайностей (например, 0,0 и 1,0).

Answer 28

Я знаю, что это своего рода удар по теме, но я нашел еще один способ сделать это.

Для этого вы также можете создать динамический холст размером 100x1 и применить к нему градиент, а затем из функции вам просто нужно получить цвет пикселя для процентного местоположения.

Вот код: Это глобальный:

/* dynamic canvas */

// this should be done once in a page so out of function, makes function faster
var colorBook = $('<canvas />')[0];
colorBook.width = 101;
colorBook.height = 1;
var ctx = colorBook.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 101, 0);
grd.addColorStop(0, "rgb(255,0,0)"); //red
grd.addColorStop(0.5, "rgb(255,255,0)"); //yellow
grd.addColorStop(1, "rgb(0,255,0)"); //green    
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 101, 1);

Тогда функция:

function getColor(value) {
  return 'rgba(' + ctx.getImageData(Math.round(value), 0, 1, 1).data.join() + ')';
}

Демо: https://jsfiddle.net/asu09csj/

Answer 29

HSL будет работать в IE8 с использованием jquery-ui-1.10.4.

Я изменил ответ jongo45, чтобы принять легкость в функции.

function getColor(value, lightness) {
    //value from 0 to 1
    var hue = ((value) * 120).toString(10);
    return ["hsl(", hue, ",100%,", lightness, "%)"].join("");
}

Answer 30

Код Маттисдады мне очень помог, когда я делал диаграмму для отображения статистики некоторых результатов викторины. Я немного изменил его, чтобы разрешить "отсечение" процента (не уверен, какой термин правильный), а также работать в обоих направлениях по цветовому кругу, например, от зеленого (120) к красному (0) и наоборот.

function pickColourByScale(percent, clip, saturation, start, end)
{
    var a = (percent <= clip) ? 0 : (((percent - clip) / (100 - clip))),
        b = Math.abs(end - start) * a,
        c = (end > start) ? (start + b) : (start - b);
    return 'hsl(' + c + ','+ saturation +'%,50%)';
}

По сути, если установить процентное значение для обрезки масштабирования, все, что ниже этого значения, будет окрашено как ваш начальный цвет. Он также пересчитывает масштаб в соответствии со 100% клипом.

Давайте рассмотрим пример сценария, в котором я ввожу следующие значения:

процентов: 75
обойма: 50
насыщенность: 100 (неважно, я использую это для выделения диаграммы Chart.js)
начало: 0 (красный)
конец: 120 (зеленый)
1. Я проверяю, меньше ли процент, чем clip, и возвращаю 0%, если это так. В противном случае я пересчитываю процент - 75% находится на полпути между 50% и 100%, поэтому я получаю 50%. Это дает мне 0,5.
2. Я понимаю разницу между началом и концом. Вам нужно использовать Math.abs () в случае, если ваше начальное значение оттенка больше, чем ваше конечное значение оттенка. Затем я умножаю разницу на результат, полученный на шаге 1, чтобы увидеть, насколько мне нужно сместить начальное значение оттенка.
3. Если начальное значение больше конечного значения, то нужно двигаться по цветовому кругу в противоположном направлении. Соответственно прибавить или отнять от начального значения.

Я получаю желтый, который находится на полпути между красным и зеленым. Если бы я не выполнил пересчет на шаге 1, я бы получил более зеленоватый цвет, что могло бы ввести в заблуждение.

Answer 31

Я изменил ответ zmc, чтобы дать градиент от зеленого (0%) до красного (100%).

const getGreenToRed = (percent) => {
    const r = 255 * percent/100;
    const g = 255 - (255 * percent/100);
    return 'rgb('+r+','+g+',0)';
}

от зеленого до красного цвета зависят от процента

Ответы: