Цветовые коды HTML: от красного к желтому и зеленому - PullRequest
Новая
       53

Цветовые коды HTML: от красного к желтому и зеленому

38 голосов
/ 12 ноября 2010

Я хотел бы придумать столько значений HEX HTML, чтобы иметь плавный градиент цвета от красного к зеленому:

Мне бы хотелось, чтобы это было похоже на следующее: http://www.utexas.edu/learn/html/colors.html

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

На этом сайте «1 из 6» больше всего похоже на то, что я ищу, но этот пример ограничен 11 цветами: 

(1) FF0000 Red, 
(2) FF3300 Red(Orange)
(3) ff6600 
(4) ff9900 
(5) FFCC00 Gold 
(6) FFFF00 Yellow
(7) ccff00
(8) 99ff00
(9) 66ff00
(10) 33ff00
(11) 00FF00 Lime

Было бы здорово иметь возможностьудвоить количество цветов, но при этом сделать их плавным переходом.

Спасибо за любые идеи и помощь.

Ответы [ 13 ]

43 голосов
/ 12 ноября 2010

В зависимости от того, сколько цветов вы хотите получить, решение состоит в том, чтобы просто увеличивать значение зеленого на определенную величину, а затем, когда зеленый становится максимальным (FF), многократно уменьшать значение красного на то же самое сумма.

Псевдо-код: 

int red = 255; //i.e. FF
int green = 0;
int stepSize = ?//how many colors do you want?
while(green < 255)
{
    green += stepSize;
    if(green > 255) { green = 255; }
    output(red, green, 0); //assume output is function that takes RGB
}
while(red > 0)
{
    red -= stepSize;
    if(red < 0) { red = 0; }
    output(red, green, 0); //assume output is function that takes RGB
}

Генерация вручную, вы можете просто увеличить на 16, например: 

FF0000
FF1000
FF2000
FF3000
FF4000
FF5000
FF6000
FF7000
FF8000
FF9000
FFA000
FFB000
FFC000
FFD000
FFE000
FFF000
FFFF00 //max, step by 15
F0FF00 //cheat, start with a -15 to simplify the rest
E0FF00
D0FF00
C0FF00
B0FF00
A0FF00
90FF00
80FF00
70FF00
60FF00
50FF00
40FF00
30FF00
20FF00
10FF00
25 голосов
/ 12 ноября 2010

Лучший способ сделать это - понять, что на самом деле означают шестнадцатеричные цветовые коды.Как только вы это поймете, станет понятно, как сделать градиенты произвольной плавности.Шестнадцатеричные цветовые коды представляют собой триплеты, представляющие красный, зеленый и синий компоненты цвета соответственно.Например, в цвете FF0000 красный компонент - FF, зеленый - 00, а синий - 00.FF0000 выглядит красным, потому что красный компонент набирается до FF, а зеленый и синий - до 00.Точно так же чистый зеленый - 00FF00, а чистый синий - 0000FF.Если вы преобразуете шестнадцатеричные числа в десятичные, вы получите значение от 0 до 255.

Итак, как теперь сделать градиент, переходящий от красного к желтому к зеленому?Легко;Вы берете конечные точки, решаете, сколько шагов вы хотите сделать между ними, а затем равномерно проходите через каждый из 3 цветовых каналов для перехода от одного цвета к следующему.Ниже приведен пример с шагом 11 hex (17 в десятичном виде): 

FF0000 <-- red
FF1100
FF2200
FF3300
FF4400
FF5500
FF6600
FF7700
FF8800
FF9900
FFAA00
FFBB00
FFCC00
FFDD00
FFEE00
FFFF00 <-- yellow
EEFF00
DDFF00
CCFF00
BBFF00
AAFF00
99FF00
88FF00
77FF00
66FF00
55FF00
44FF00
33FF00
22FF00
11FF00
00FF00 <-- green
10 голосов
/ 06 августа 2012

У меня только что был проект, и я начал с более или менее похожего решения для jball и Asaph.То есть плавно увеличивается от красного (FF0000) до (FFFF00) до (00FF00).

Однако я обнаружил, что визуально изменения казались гораздо более резкими в отношении «желтого», тогда как они были едва заметны в «красном» и «зеленом».Я обнаружил, что могу компенсировать это, делая изменения экспоненциальными, а не линейными, в результате чего приращения будут меньше вокруг «желтого» и больше вокруг «красного» и «зеленого».Решение (в Javascript), которое я разработал, выглядело так: 

    /**
     * Converts integer to a hexidecimal code, prepad's single 
     * digit hex codes with 0 to always return a two digit code. 
     * 
     * @param {Integer} i Integer to convert 
     * @returns {String} The hexidecimal code
     */
    function intToHex(i) {
        var hex = parseInt(i).toString(16);
        return (hex.length < 2) ? "0" + hex : hex;
    }   

    /**
     * Return hex color from scalar *value*.
     *
     * @param {float} value Scalar value between 0 and 1
     * @return {String} color
     */
    function makeColor(value) {
        // value must be between [0, 510]
        value = Math.min(Math.max(0,value), 1) * 510;

        var redValue;
        var greenValue;
        if (value < 255) {
            redValue = 255;
            greenValue = Math.sqrt(value) * 16;
            greenValue = Math.round(greenValue);
        } else {
            greenValue = 255;
            value = value - 255;
            redValue = 256 - (value * value / 255)
            redValue = Math.round(redValue);
        }

        return "#" + intToHex(redValue) + intToHex(greenValue) + "00";
    }

Это дало намного более плавный градиент, когда я менял значение, и изменение inputValue на определенное, казалось, влияло на цвет в большей или меньшей степени.одинаковая степень независимо от начальной точки.

2 голосов
/ 04 июня 2017

Здесь хорошо выглядит градиент от зеленого к красному 

    /* Green - Yellow - Red */
    .gradient_0    {background: #57bb8a;}
    .gradient_5    {background: #63b682;}
    .gradient_10   {background: #73b87e;}
    .gradient_15   {background: #84bb7b;}
    .gradient_20   {background: #94bd77;}
    .gradient_25   {background: #a4c073;}
    .gradient_30   {background: #b0be6e;}
    .gradient_35   {background: #c4c56d;}
    .gradient_40   {background: #d4c86a;}
    .gradient_45   {background: #e2c965;}
    .gradient_50   {background: #f5ce62;}
    .gradient_55   {background: #f3c563;}
    .gradient_60   {background: #e9b861;}
    .gradient_65   {background: #e6ad61;}
    .gradient_70   {background: #ecac67;}
    .gradient_75   {background: #e9a268;}
    .gradient_80   {background: #e79a69;}
    .gradient_85   {background: #e5926b;}
    .gradient_90   {background: #e2886c;}
    .gradient_95   {background: #e0816d;}
    .gradient_100  {background: #dd776e;}

    /* Red - Yellow - Green */
    .anti-gradient_100  {background: #57bb8a;}
    .anti-gradient_95   {background: #63b682;}
    .anti-gradient_90   {background: #73b87e;}
    .anti-gradient_85   {background: #84bb7b;}
    .anti-gradient_80   {background: #94bd77;}
    .anti-gradient_75   {background: #a4c073;}
    .anti-gradient_70   {background: #b0be6e;}
    .anti-gradient_65   {background: #c4c56d;}
    .anti-gradient_60   {background: #d4c86a;}
    .anti-gradient_55   {background: #e2c965;}
    .anti-gradient_50   {background: #f5ce62;}
    .anti-gradient_45   {background: #f3c563;}
    .anti-gradient_40   {background: #e9b861;}
    .anti-gradient_35   {background: #e6ad61;}
    .anti-gradient_30   {background: #ecac67;}
    .anti-gradient_25   {background: #e9a268;}
    .anti-gradient_20   {background: #e79a69;}
    .anti-gradient_15   {background: #e5926b;}
    .anti-gradient_10   {background: #e2886c;}
    .anti-gradient_5    {background: #e0816d;}
    .anti-gradient_0    {background: #dd776e;}
<div class="gradient_0">0</div>
<div class="gradient_5">5</div>
<div class="gradient_10">10</div>
<div class="gradient_15">15</div>
<div class="gradient_20">20</div>
<div class="gradient_25">25</div>
<div class="gradient_30">30</div>
<div class="gradient_35">35</div>
<div class="gradient_40">40</div>
<div class="gradient_45">45</div>
<div class="gradient_50">50</div>
<div class="gradient_55">55</div>
<div class="gradient_60">60</div>
<div class="gradient_65">65</div>
<div class="gradient_70">70</div>
<div class="gradient_75">75</div>
<div class="gradient_80">80</div>
<div class="gradient_85">85</div>
<div class="gradient_90">90</div>
<div class="gradient_95">95</div>
<div class="gradient_100">100</div>
2 голосов
/ 15 ноября 2015

Причина, по которой я нашел этот вопрос, заключалась в том, что я пытался создать цветной индикатор времени безотказной работы для таблицы, полной устройств, которые регистрируются ежечасно.Идея состоит в том, что он будет красным при 0%, переходит в желтый при 50% и будет зеленым при 100%.Это, конечно, довольно бесполезно, но это был простой способ сделать стол более впечатляющим, чем на самом деле.Учитывая min, max и value, он возвращает значения rgb 0-255 для правильного цвета.Предполагается действительный ввод. 

function redYellowGreen(min, max, value)
{
	var green_max = 220;
	var red_max = 220;
	var red = 0;
	var green = 0;
	var blue = 0;

	if (value < max/2)
	{
		red = red_max;
		green = Math.round((value/(max/2))*green_max);
	}
	else
	{
		green = green_max;
		red = Math.round((1-((value-(max/2))/(max/2)))*red_max);
	}

	var to_return = new Object();
	to_return.red = red;
	to_return.green = green;
	to_return.blue = blue;

	return to_return;
}
2 голосов
/ 12 ноября 2010

Глядя на любую диаграмму создаст иллюзию, что «цветовые коды» являются отдельными значениями, которые вы должны искать. На самом деле, самый плавный переход, который вы можете получить, это просто увеличить количество зеленого в цвете и уменьшить количество красного.

Видите, загадочные шестнадцатеричные коды на самом деле совсем не загадочны. У них есть шесть цифр, где первые две показывают количество красного в цвете, средние две показывают количество зеленого, а последние две показывают количество синего.

И в отличие от подсчета людей, когда, когда мы получаем от 0 до 9, мы перемещаемся к следующему значению места и получаем 10, с шестнадцатеричным мы считаем до Ф. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10

Итак, ваша цель - перейти от FF 00 00 (только красный, без зеленого или синего) к FF FF 00 (красный с зеленым, то есть желтым) и, наконец, к 00 FF 00.

Как вы можете это сделать? Просто продолжайте добавлять немного к зеленому количеству за раз, пока оно не достигнет полного FF, а затем начните немного убирать с красного, пока оно не опустится до 00.

А сколько стоит "немного"? Сколько бы вы ни думали, чтобы получить плавный переход. Вы можете добавить 30 за раз и получить довольно крупные переходы от одного цвета к другому, или добавить 1 за один раз, и переход будет проходить более плавно (но, возможно, также медленнее). Поэкспериментируйте и посмотрите, что работает для вас.

1 голос
/ 14 августа 2012

В настоящее время все современные браузеры поддерживают цветовые градиенты в CSS, которые позволяют абсолютно плавные градиенты по любой ширине / высоте. Однако все еще не все браузеры поддерживают официальный CSS linear-gradient, поэтому для поддержки всех браузеров используйте следующий класс CSS: 

.gradient {
    background:    -moz-linear-gradient(left, red, yellow, green); /* FF3.6+ */
    background:        -webkit-gradient(linear, left top, right top, color-stop(0%, red), color-stop(50%, yellow), color-stop(100%, green)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, red, yellow, green); /* Chrome10+,Safari5.1+ */
    background:      -o-linear-gradient(left, red, yellow, green); /* Opera 11.10+ */
    background:     -ms-linear-gradient(left, red, yellow, green); /* IE10+ */
    background:         linear-gradient(to right, red, yellow, green); /* W3C */
}

Дополнительную информацию о функциях градиента CSS см. В следующих статьях в Mozilla Developer Network:

Очень хорошим веб-сайтом для быстрого создания полностью настроенных цветовых градиентов для всех браузеров является Ultimate CSS Gradient Generator .

0 голосов
/ 02 февраля 2019

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

Полезно при программировании информационных панелей или отчетов, которые должны показывать анализ «что, если» и повышать среднее или плохое значения. Нашел интересные статьи в нескольких источниках, но выполнил эту очень простую функцию JavaScript: 

function fSemaphor(minimal, maximal, value) {
  var difference = maximal - minimal;
  var medium = (minimal + difference / 2) | 0; // |0 returns INT
  var RED = 255,
    GREEN = 255;

  if (value <= medium)
    GREEN = (GREEN * (value / medium)) | 0;
  else
    RED = (RED * (1.0 - value / maximal)) | 0;

  // returns HEX color, for usage in CSS or any style
  return ("#" + (('0') + RED.toString(16)).substr(-2) + ('0' + GREEN.toString(16)).substr(-2) + '00'); // blue

}

Я даже приведу полный пример его использования. Просто скопируйте и вставьте страницу HTML и посмотрите, что она делает. 

Max value: <input value=0 id="minim" /> Min value: <input value=20 id="maxim" />
<input type=submit value="Calculate colors" onClick="fCalcul()">
<table id=tColors border=2></table>
<script>
  function fCalcul() {
    var i;
    var tblRows = "<tr><th>value</th><th>Color</th></tr>";
    var minValue = parseInt(minim.value);
    var maxValue = parseInt(maxim.value);
    var tblBody = "";
    var increment = 1;

    if ((maxValue - minValue) > 40) //  don't show more than 40 rows, for sample sake
      increment = ((maxValue - minValue) / 40) | 0;

    for (i = minValue; i <= maxValue; i += increment) {
      tblBody += "<tr><td>" + i + "</td><td style='background: " +
        fSemaphor(minValue, maxValue, i) + "'>" +
        fSemaphor(minValue, maxValue, i) + "</td></tr>";
    }

    tColors.innerHTML = tblRows + tblBody;
  }


    function fSemaphor(minimal, maximal, value) {
      var difference = maximal - minimal;
      var medium = (minimal + difference / 2) | 0; // |0 returns INT
      var RED = 255,
        GREEN = 255;

      if (value <= medium)
        GREEN = (GREEN * (value / medium)) | 0;
      else
        RED = (RED * (1.0 - value / maximal)) | 0;

      // returns HEX color, for usage in CSS or any style
      return ("#" + (('0') + RED.toString(16)).substr(-2) + ('0' + GREEN.toString(16)).substr(-2) + '00'); // blue

    }
</script>

Особая благодарность блогу Ovid в http://blogs.perl.org/users/ovid/2010/12/perl101-red-to-green-gradient.html,, который дал техническое объяснение, которое помогло мне упростить его

0 голосов
/ 24 июля 2018

Я использовал это на странице php: 

$percent = .....; //whatever the percentage you want to colour

If ($percent <= 50) {
    $red = 255;
    $green = $percent * 5.1;
}

If ($percent >= 50) {
    $green = 255;
    $red = 255 - ($percent - 50) * 5.1;
}

$blue = 0;

Тогда ваш RGB (красный, зеленый, синий)

Примечание: значения коэффициента 5,1 от 255/50

0 голосов
/ 12 мая 2016

Со своей стороны я решил проблему с 2 кистями: 

float sweepAngle = 45.0F; // angle you want ...
LinearGradientBrush linGrBrushUp = new LinearGradientBrush(
    new Point(0, 0), new     Point(w, 0),
    Color.FromArgb(255, 0, 255, 0),     // green
    Color.FromArgb(255, 255, 255, 0)    // yellow
);
LinearGradientBrush linGrBrushDown = new LinearGradientBrush(
    new Point(w, 0), new Point(0, 0),
Color.FromArgb(255, 255, 255, 0),   // yellow
Color.FromArgb(255, 255, 0, 0)      // red
);
g.DrawArc( new Pen(linGrBrushUp, 5), x, y, w, h, 180.0F, sweepAngle>180.0F?180.0F:sweepAngle );
g.DrawArc( new Pen(linGrBrushDown, 5), x, y, w, h, 0.0F, sweepAngle>180.0F?sweepAngle-180.0F:0 );
Страница:
...