Подтвердить что ты не робот

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

Я хотел бы найти столько значений 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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

В зависимости от того, сколько цветов вы хотите закончить, решение состоит в том, чтобы просто увеличивать значение зеленого на определенную величину, а затем, когда зеленый максимум (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

Ответ 2

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

Итак, как же сделать градиент, переход от красного к желтому в зеленый? Легко; вы берете конечные точки, решаете, сколько шагов вы хотите между ними, а затем равномерно проходите через каждый из трех цветных каналов для перехода от одного цвета к следующему цвету. Ниже приведен пример шагов 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

Ответ 3

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

Тем не менее, я обнаружил, что визуально изменения, казалось, были намного более резкими вокруг "желтого", в то время как они были едва заметны вокруг "красного" и "зеленого". Я обнаружил, что могу компенсировать это, сделав изменения экспоненциальными, а не линейными, в результате чего приращения будут меньше вокруг "желтого" и большего вокруг "красного" и "зеленого". Решение (в Javascript), которое я разработал, выглядело так: 
    /**
     * Converts integer to a hexidecimal code, prepad 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 определенным, казалось, повлияло на цвет более или менее одинаковой степени независимо от начальной точки.

Ответ 4

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

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

И в отличие от человеческого подсчета, где, когда мы получаем от 0 до 9, мы переходим к следующему значению места и получаем 10, с шестнадцатеричным числом мы рассчитываем вплоть до F. 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 за один раз и получить довольно крупные прыжки от одного цвета к другому или добавить по одному за раз и добиться более плавного перехода (но, возможно, еще медленнее). Экспериментируйте и посмотрите, что сработает для вас.

Ответ 5

Моя причина для поиска этого вопроса заключалась в том, что я пытался сделать цветной индикатор безотказной работы для таблицы, полной устройств, которые "регистрируются" почасово. Идея заключается в том, что она будет красной на 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;
}

Ответ 6

В настоящее время все современные браузеры поддерживают цветовые градиенты в 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.

Ответ 7

Вот красивый градиент от зеленого до красного

    /* 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>

Ответ 8

Работает только в Chrome и Safari

Из NiceWebType.com:

<style type="text/css">
    h1 {
        position: relative;
        font-size: 60px;
        line-height: 60px;
        text-shadow: 0px 0px 3px #000;
    }
    h1 a {
        position: absolute;
        top: 0; z-index: 2;
        color: #F00;
        -webkit-mask-image: -webkit-gradient(linear, left center, right center, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    }
    h1:after {
        content: "CSS Text Gradient (Webkit)";
        color: #0F0;
    }
</style>

<h1><a>CSS Text Gradient (Webkit)</a></h1>

Ответ 10

Вот простой, но грязный способ генерации этих цветов:

COLORS = [ "FF00%0.2XFF" % x for x in range(0,260,5) ] + [ "FF00FF%0.2X" % x for x in range(250,-1,-5) ]

Кодировка цвета предназначена для карт Google: aabbggrr.

Это даст вам список из 103 цветов. Я удалил три, а затем проиндексировал список с использованием процента как целого числа.

Ответ 11

На моей стороне я решил проблему с двумя кистями:

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 );

Ответ 12

Я использовал это на странице 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

Ответ 13

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

Полезно при программировании информационных панелей или отчетов, которые должны показывать анализ "что, если" и повышать средние и плохие значения. Нашел интересные статьи в нескольких источниках, но выполнил эту очень простую функцию 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

}