@media print {
.no-print {
visibility: hidden;
}
}
<div class="no-print">
Nope
</div>
<div>
Yup
</div>
Я сделал эту функцию в JavaScript. Это возвращается, цвет является строкой CSS. Это берет процент в качестве переменной с диапазоном от 0 до 100. Алгоритм мог быть сделан на любом языке:
function setColor(p){
var red = p<50 ? 255 : Math.round(256 - (p-50)*5.12);
var green = p>50 ? 255 : Math.round((p)*5.12);
return "rgb(" + red + "," + green + ",0)";
}
То, что Вы, вероятно, хотите сделать, должно присвоить Ваши от 0% до 100% некоторые точки в HSV или цветовом пространстве HSL. Оттуда можно интерполировать цвета (и желтый просто, оказывается, между красным и зеленым цветом :) и преобразовывают их в RGB. Это даст Вам симпатичный градиент между двумя.
Предположение, что Вы будете использовать цвет в качестве индикатора состояния и с точки зрения пользовательского интерфейса, однако, который является, вероятно, не такой хорошей идеей, так как мы довольно плохи при наблюдении небольших изменений в цвете. Так деля значение на, например, три - семь блоков дали бы Вам более заметные различия, когда вещи изменяются, за счет некоторой точности (который Вы, скорее всего, не смогли бы ценить так или иначе).
Так, вся математика в стороне, в конце я рекомендовал бы look-up-table со следующими цветами с v быть входным значением:
#e7241d for v <= 12%
#ef832c for v > 12% and v <= 36%
#fffd46 for v > 36% and v <= 60%
#9cfa40 for v > 60% and v <= 84%
#60f83d for v > 84%
Они были очень naГЇvely преобразованы из значений HSL (0.0, 1.0, 1.0), (30.0, 1.0, 1.0), (60.0, 1.0, 1.0), (90.0, 1.0, 1.0), (120.0, 1.0, 1.0), и Вы могли бы хотеть скорректировать цвета несколько для удовлетворения целям (некоторым не нравится тот красный, и зеленый не 'чисты').
см.:
В псевдокоде.
От 0-50% Ваше шестнадцатеричное значение было бы FFxx00 где:
XX = ( Percentage / 50 ) * 255 converted into hex.
От 50-100 Ваше шестнадцатеричное значение было бы xxFF00 где:
XX = ((100-Percentage) / 50) * 255 converted into hex.
Hope, которая помогает и понятна.
Я записал эту функцию Python на основе кода JavaScript. это берет процент в качестве десятичного числа. также я имею в квадрате значение для хранения цветов более красными для дольше ниже на масштаб процента. Я также сузил диапазон цветов от 255 до 180 для предоставления более темно-красного и зеленого цвета в каждом конце. они могут играться с дать хорошие цвета. Я хотел бы добавить легкий оранжевый в середине, но я должен продолжить надлежащую работу, шиканье.
def getBarColour(value):
red = int( (1 - (value*value) ) * 180 )
green = int( (value * value )* 180 )
red = "%02X" % red
green = "%02X" % green
return '#' + red + green +'00'
Как желтый соединение красного и зеленого цвета, можно, вероятно, запустить с #F00
и затем скользить зеленый вплоть до Вас, совершает нападки #FF0
, затем скользят красный вниз к #0F0
:
for (int i = 0; i < 100; i++) {
var red = i < 50
? 255
: 255 - (256.0 / 100 * ((i - 50) * 2));
var green = i < 50
? 256.0 / 100 * (i * 2)
: 255;
var col = Color.FromArgb((int) red, (int) green, 0);
}
Я использую следующие стандартные программы Python для смешивания между цветами:
def blendRGBHex(hex1, hex2, fraction):
return RGBDecToHex(blendRGB(RGBHexToDec(hex1),
RGBHexToDec(hex2), fraction))
def blendRGB(dec1, dec2, fraction):
return [int(v1 + (v2-v1)*fraction)
for (v1, v2) in zip(dec1, dec2)]
def RGBHexToDec(hex):
return [int(hex[n:n+2],16) for n in range(0,len(hex),2)]
def RGBDecToHex(dec):
return "".join(["%02x"%d for d in dec])
, Например:
>>> blendRGBHex("FF8080", "80FF80", 0.5)
"BFBF80"
Другая стандартная программа переносит это для смешивания приятно между численными значениями для "условного форматирования":
def colourRange(minV, minC, avgV, avgC, maxV, maxC, v):
if v < minV: return minC
if v > maxV: return maxC
if v < avgV:
return blendRGBHex(minC, avgC, (v - minV)/(avgV-minV))
elif v > avgV:
return blendRGBHex(avgC, maxC, (v - avgV)/(maxV-avgV))
else:
return avgC
Так, в случае Jonas:
>>> colourRange(0, "FF0000", 50, "FFFF00", 100, "00FF00", 25)
"FF7F00"
Поскольку это - RGB, цвета идут от целочисленных значений-1 (белого), к-16777216 для черного цвета. с красным зеленым и желтым цветом где-нибудь в середине это. Желтый на самом деле-256, в то время как красный-65536, и зеленый-16744448. Таким образом желтый на самом деле не между красным и зеленым цветом в нотации RGB. Я знаю, что с точки зрения длин волны, зеленых, находится на одной стороне, и красный имеет с другой стороны спектр, но я никогда не видел этот тип нотации, используемой в компьютерах, поскольку спектр не представляет все видимые цвета.