Kody kolorów HTML: czerwony do żółtego do zielonego

Najlepszym sposobem na to jest zrozumienie, co znaczą kody kolorów szesnastkowych. Kiedy to zrozumiesz, stanie się jasne, jak tworzyć gradienty arbitralnej gładkości. Kody kolorów szesnastkowych to trojaczki reprezentujące odpowiednio czerwony, zielony i niebieski Składnik koloru. Na przykład w Kolorze FF0000 składnikiem czerwonym jest FF, składnikiem zielonym jest 00, a składnikiem niebieskim jest 00. FF0000 wygląda na czerwony, ponieważ czerwony składnik jest wybierany aż do FF i zielony i niebieski są wybierane aż do 00. Podobnie, czysta zieleń to 00FF00, A czysty niebieski to 0000FF. Jeśli przekonwertujesz liczby szesnastkowe na dziesiętne, otrzymasz wartość pomiędzy 0 i 255.

Więc jak zrobić gradient przechodzący z czerwonego na żółty na zielony? Łatwe; podejmujesz punkty końcowe, decydujesz, ile kroków chcesz pomiędzy nimi, a następnie równomiernie przechodzisz przez każdy z 3 kanałów kolorów, aby przejść z jednego koloru do następnego koloru. Poniżej znajduje się przykład w krokach 11 hex (17 w układzie dziesiętnym):

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

Właśnie miałem projekt i zacząłem od mniej lub bardziej podobnego rozwiązania do jball i Asaph. Oznacza to płynne zwiększanie z czerwonego (FF0000) do (FFFF00) do (00FF00).

Zauważyłem jednak, że wizualnie zmiany wydawały się znacznie bardziej drastyczne wokół "żółtego", podczas gdy były ledwo zauważalne wokół" czerwonego "i" zielonego."Odkryłem, że mogę to zrekompensować, wprowadzając zmiany wykładnicze, a nie liniowe, powodując przyrosty mniejsze wokół "żółtego" i większe wokół "czerwony" i "zielony". Rozwiązanie (w Javascript), które opracowałem, wyglądało tak:

    /**
     * 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";
    }

Dało to znacznie gładszy gradient, gdy zmieniłem wartość, a zmiana wartości wejściowej o pewną zdawała się wpływać na kolor w mniej więcej tym samym stopniu, niezależnie od punktu początkowego.

Patrząc na dowolne wykres daje złudzenie, że "kody kolorów" są indywidualnymi wartościami, które należy wyszukać. W rzeczywistości najłagodniejsze Przejście, jakie możesz uzyskać, to po prostu zwiększenie ilości zieleni w kolorze i zmniejszenie ilości Czerwieni.

Widzisz, szyfry hexidecimalne nie są w ogóle szyfry. Mają sześć cyfr, gdzie dwie pierwsze pokazują ilość czerwieni w Kolorze, dwie środkowe pokazują ilość zieleni, a dwie ostatnie pokazują ilość niebieskiego.

I w przeciwieństwie do liczenia ludzi, gdzie gdy otrzymamy od 0 do 9, przechodzimy do następnej wartości miejsca i otrzymujemy 10, z hexidecimal liczymy aż do F. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10

Więc twoim celem jest przejście z FF 00 00 (tylko czerwony, bez Zielonego lub niebieskiego) do FF FF 00 (Czerwony zmieszany z zielonym, który jest żółty), a na końcu do 00 FF 00.

A ile to jest "trochę"? Niezależnie od tego, ile potrzeba, aby uzyskać płynne przejście. Możesz dodać 30 na raz i uzyskać całkiem poważne skoki z jednego koloru do drugiego, lub dodać 1 na raz i mieć postęp przejścia płynniej (ale być może również wolniej). Poeksperymentuj i zobacz, co Ci odpowiada.

Moim powodem znalezienia tego pytania było to, że próbowałem zrobić kolorowy wskaźnik czasu pracy dla tabeli pełnej urządzeń, które" check-in " co godzinę. Idea jest taka, że będzie czerwony na 0%, przejście do żółtego na 50% , a zielony na 100%. To jest oczywiście dość bezużyteczne, ale to był łatwy sposób, aby stół wyglądać bardziej imponujące niż to było w rzeczywistości. Biorąc pod uwagę wartość min, max i zwraca wartości rgb 0-255 dla prawidłowego koloru. Przyjmuje poprawne dane wejściowe.

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

Obecnie wszystkie nowoczesne przeglądarki obsługują gradienty kolorów w CSS, które umożliwiają całkowicie płynne gradienty na dowolnej szerokości/wysokości. Jednak nadal nie wszystkie przeglądarki obsługują oficjalny CSS linear-gradient, więc aby obsługiwać wszystkie przeglądarki, użyj następującej klasy 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 */
}

Aby uzyskać więcej informacji na temat funkcji gradientu CSS, zobacz następujące artykuły w Mozilla Developer Network:

• linear-gradient (wyświetla również listę obsługiwanych przeglądarek)
• Korzystanie z CSS gradienty

Bardzo dobrą stroną internetową do szybkiego generowania całkowicie dostosowanych gradientów kolorów dla wszystkich przeglądarek jest Ultimate CSS Gradient Generator .

Działa tylko w Chrome & Safari

Z 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>

Kiedy musiałem to zrobić, moim wyborem było przejście z kodu hex NA RGB, który wydawał się bardziej przyjazny dla obliczeń.

Możesz przeczytać szczegóły tutaj:

Http://blog.pathtosharepoint.com/2009/11/02/visualization-calculated-color-gradients/

Oto prosty, ale brudny sposób na wygenerowanie tych kolorów:

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

Kodowanie kolorów jest dla Google maps: aabbggrr.

To da ci listę 103 kolorów. Usunąłem trzy, a następnie zindeksowałem listę za pomocą procentu jako liczby całkowitej.

Z mojej strony rozwiązałem problem za pomocą 2 pędzli:

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

Oto ładnie wyglądający gradient z zielonego na czerwony

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

Użyłem tego na stronie 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;

Twoje RGB jest wtedy ($red, $green, $blue)

Uwaga: współczynnik 5.1 wynosi od 255/50