Codes de couleur HTML: du rouge au jaune au vert
Je voudrais proposer autant de valeurs HTML HEX pour avoir un dégradé de couleur lisse du rouge au vert:
J'aimerais que cela ressemble à ce qui suit: http://www.utexas.edu/learn/html/colors.html
Je n’ai pas le meilleur œil pour le choix des couleurs, j’espère donc qu’un tableau standard montrant déjà comment passer du rouge au jaune en passant par le vert est déjà établi.
Sur ce site Web, "1 sur 6" ressemble le plus à ce que je recherche, mais cet exemple est limité à 11 couleurs:
(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
Ce serait formidable de pouvoir doubler le nombre de couleurs, tout en les faisant passer en douceur.
Merci pour vos idées et votre aide.
En fonction du nombre de couleurs que vous souhaitez utiliser, la solution consiste simplement à continuer à incrémenter la valeur verte d'un certain montant, puis, lorsque le maximum est atteint pour le vert (FF), décrémentez la valeur rouge de manière répétée du même montant.
Pseudo-code:
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
}
En générant à la main, vous pouvez simplement incrémenter de 16, comme ceci:
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
La meilleure façon de faire est de comprendre la signification réelle des codes de couleur hexadécimale. Une fois que vous aurez compris cela, vous comprendrez comment créer des dégradés de finesse arbitraire. Les codes de couleur hexadécimale sont des triplets représentant respectivement les composantes rouge, verte et bleue de la couleur. Ainsi, par exemple, dans la couleur FF0000, le composant rouge est FF, le composant vert est 00 et le composant bleu est 00. FF0000 est rouge parce que le composant rouge est composé jusqu’à FF et que les vert et bleu sont composés jusqu’à 00. De même, le vert pur est 00FF00 et le bleu pur est 0000FF. Si vous convertissez les nombres hexadécimaux en nombres décimaux, vous obtiendrez une valeur comprise entre 0 et 255.
Alors maintenant, comment faire un dégradé passant du rouge au jaune au vert? Facile; vous prenez les points finaux, décidez le nombre de pas que vous souhaitez, puis parcourez chacun des 3 canaux de couleur pour passer d'une couleur à l'autre. Vous trouverez ci-dessous un exemple pas à pas de 11 hex (17 en décimal):
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
Je viens d'avoir un projet et j'ai commencé avec une solution plus ou moins similaire à Jball et Asaph. C'est-à-dire que l'on passe progressivement du rouge (FF0000) à (FFFF00) à (00FF00).
Cependant, j’ai constaté que visuellement, les changements semblaient beaucoup plus radicaux autour de «jaune», alors qu’ils étaient à peine perceptibles autour de «rouge» et de «vert». J'ai trouvé que je pouvais compenser cela en rendant les modifications exponentielles plutôt que linéaires, ce qui réduirait les incréments autour de "jaune" et les tailles supérieures autour de "rouge" et "vert". La solution (en Javascript) que j'ai élaborée ressemblait à ceci:
/**
* 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";
}
Cela donnait un dégradé beaucoup plus doux au fur et à mesure que je changeais la valeur, et modifier inputValue par un certain semblait affecter la couleur plus ou moins au même degré quel que soit le point de départ.
Regarderanychart donnera l'illusion que les "codes de couleur" sont des valeurs individuelles que vous devez rechercher. En fait, la transition la plus douce que vous puissiez obtenir consiste simplement à incrémenter la quantité de vert dans la couleur et à décrémenter la quantité de rouge.
Vous voyez, les codes hexadécimaux cryptiques ne sont en réalité pas du tout cryptiques. Ils ont six chiffres, où les deux premiers indiquent la quantité de rouge dans la couleur, les deux du milieu indiquent la quantité de vert et les deux derniers indiquent la quantité de bleu.
Et contrairement au comptage humain où, lorsque nous passons de 0 à 9, nous passons à la valeur de position suivante et obtenons 10; avec hexidécimal, nous comptons jusqu’à F. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10
Votre objectif est donc de passer de FF 00 00 (rouge seulement, pas de vert ou de bleu) à FF FF 00 (rouge mélangé avec du vert, qui est jaune) et enfin à 00 FF 00.
Comment peux-tu faire ça? Continuez simplement d’ajouter petit à petit le montant vert jusqu’à atteindre FF, puis commencez à réduire un peu le montant rouge jusqu’à atteindre 00.
Et combien coûte "un petit peu"? Cependant, beaucoup de choses vous paraissent nécessaires pour une transition en douceur. Vous pouvez en ajouter 30 à la fois et obtenir des sauts assez importants d’une couleur à l’autre, ou en ajouter un à la fois et faire progresser la transition plus en douceur (mais peut-être aussi plus lentement). Expérimentez et voyez ce qui fonctionne pour vous.
La raison pour laquelle j'ai trouvé cette question était que j'essayais de créer un indicateur coloré de disponibilité de la table pour une table pleine de périphériques qui "s'enregistrent" toutes les heures. L’idée étant qu’il serait rouge à 0%, passe au jaune à 50% et vert à 100%. C’est bien sûr assez inutile, mais c’était un moyen facile de rendre une table plus impressionnante qu’elle ne l’était réellement. Étant donné min, max et value, il renvoie rgb 0-255 pour la couleur correcte. Suppose une entrée valide.
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;
}De nos jours, tous les navigateurs modernes supportent les dégradés de couleurs en CSS, ce qui permet des dégradés totalement lisses sur toutes les largeurs/hauteurs. Cependant, tous les navigateurs ne supportent toujours pas le CSS officiel linear-gradient, aussi, pour prendre en charge tous les navigateurs, utilisez la classe CSS suivante:
.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 */
}
Pour plus de détails sur les fonctions de gradient CSS, consultez les articles suivants dans le réseau de développeurs Mozilla:
- linear-gradient (répertorie également les navigateurs pris en charge)
- Utilisation des dégradés CSS
Le Ultimate CSS Gradient Generator est un très bon site web pour générer rapidement des dégradés de couleurs entièrement personnalisés pour tous les navigateurs.
Voici Nice dégradé du vert au rouge
/* 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>Je l'ai utilisé dans une page 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;
Votre RVB est alors ($ rouge, $ vert, $ bleu)
Note: Les facteurs de facteur 5.1 à partir de 255/50
Voici un moyen simple, mais sale, de générer ces couleurs:
COLORS = [ "FF00%0.2XFF" % x for x in range(0,260,5) ] + [ "FF00FF%0.2X" % x for x in range(250,-1,-5) ]
Le codage des couleurs concerne les cartes Google: aabbggrr.
Cela vous donnera une liste de 103 couleurs. J'ai supprimé trois, puis indexé la liste en utilisant un pourcentage sous forme d'entier.
Lorsque je devais faire cela, mon choix était de passer du code hexadécimal au code RVB, ce qui semblait plus facile à calculer.
Vous pouvez lire les détails ici:
http://blog.pathtosharepoint.com/2009/11/02/visualization-calculated-color-gradients/
Je suis venu à ce billet parce que je cherchais un moyen simple de générer une liste de couleurs rouge-jaune-vert pour un ensemble de valeurs.
Utile lorsque vous programmez des tableaux de bord ou des rapports qui doivent montrer une analyse "hypothétique" et améliorer les valeurs bonnes/moyennes/mauvaises. J'ai trouvé des articles intéressants sur plusieurs sources, mais cette fonction JavaScript très simple est apparue:
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
}Je fournis même un exemple complet de son utilisation. Il suffit de copier et coller dans une page HTML pour voir ce qu’elle fait.
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>Un merci spécial au blog Ovid dans http://blogs.Perl.org/users/ovid/2010/12/Perl101-red-to-green-gradient.html , qui a fourni une explication technique qui m'a aidé à le simplifier.
De mon côté, j'ai résolu le problème avec 2 brosses:
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 );
Fonctionne uniquement dans Chrome et Safari
De 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>