Условное форматирование — процент к преобразованию цветов

@media print {
  .no-print {
    visibility: hidden;
  }
}
<div class="no-print">
  Nope
</div>

<div>
  Yup
</div>

19
задан Community 10 September 2008 в 00:13
поделиться

7 ответов

Я сделал эту функцию в 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)";
}
13
ответ дан 30 November 2019 в 04:21
поделиться

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

см.:

6
ответ дан 30 November 2019 в 04:21
поделиться

В псевдокоде.

  • От 0-50% Ваше шестнадцатеричное значение было бы FFxx00 где:

    XX = ( Percentage / 50 ) * 255 converted into hex.
    
  • От 50-100 Ваше шестнадцатеричное значение было бы xxFF00 где:

    XX = ((100-Percentage) / 50) * 255 converted into hex.  
    

Hope, которая помогает и понятна.

5
ответ дан 30 November 2019 в 04:21
поделиться

Я записал эту функцию 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'
1
ответ дан 30 November 2019 в 04:21
поделиться

Как желтый соединение красного и зеленого цвета, можно, вероятно, запустить с #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);
}
1
ответ дан 30 November 2019 в 04:21
поделиться

Я использую следующие стандартные программы 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"
0
ответ дан 30 November 2019 в 04:21
поделиться

Поскольку это - RGB, цвета идут от целочисленных значений-1 (белого), к-16777216 для черного цвета. с красным зеленым и желтым цветом где-нибудь в середине это. Желтый на самом деле-256, в то время как красный-65536, и зеленый-16744448. Таким образом желтый на самом деле не между красным и зеленым цветом в нотации RGB. Я знаю, что с точки зрения длин волны, зеленых, находится на одной стороне, и красный имеет с другой стороны спектр, но я никогда не видел этот тип нотации, используемой в компьютерах, поскольку спектр не представляет все видимые цвета.

-1
ответ дан 30 November 2019 в 04:21
поделиться
Другие вопросы по тегам:

Похожие вопросы: