Условное форматирование — преобразование процентов в цвета
Вопрос
Как проще всего преобразовать процент в цвет от зеленого (100%) до красного (0%) с желтым для 50%?
Я использую обычный 32-битный RGB, поэтому каждый компонент представляет собой целое число от 0 до 255.Я делаю это на C#, но думаю, что для такой проблемы язык не имеет большого значения.
Основываясь на ответах Мариуса и Энди, я использую следующее решение:
double red = (percent < 50) ? 255 : 256 - (percent - 50) * 5.12;
double green = (percent > 50) ? 255 : percent * 5.12;
var color = Color.FromArgb(255, (byte)red, (byte)green, 0);
Работает отлично. Единственная корректировка, которую мне пришлось внести в решение Мариуса, заключалась в том, чтобы использовать 256, так как (255 - (проценты - 50) * 5,12 дают -1 при 100%, что по какой-то причине приводит к желтому цвету в Silverlight (-1, 255, 0). ) -> Желтый...
Решение
Я сделал эту функцию на 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.Это даст вам красивый градиент между ними.
Однако если предположить, что вы будете использовать цвет в качестве индикатора состояния и с точки зрения пользовательского интерфейса, это, вероятно, не такая уж хорошая идея, поскольку мы плохо видим небольшие изменения в цвете.Таким образом, разделение значения, например, на три-семь сегментов даст вам более заметные различия при изменении ситуации за счет некоторой точности (которую вы, скорее всего, все равно не сможете оценить).
Итак, если отбросить всю математику, в конце я бы порекомендовал справочную таблицу со следующими цветами, где 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%
Они были очень наивно преобразованы из значений 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) и возможно, вы захотите немного настроить цвета в соответствии со своими целями (некоторым не нравится, что красный и зеленый не являются «чистыми»).
Пожалуйста, посмотри:
- Использование цвета HSL (оттенок, насыщенность, яркость) для создания более красивых графических интерфейсов для некоторого обсуждения и
- Преобразование цветового пространства RGB и HSL для примера исходного кода C#.
В псевдокоде.
От 0 до 50% ваше шестнадцатеричное значение будет FFxx00, где:
XX = ( Percentage / 50 ) * 255 converted into hex.
От 50 до 100 ваше шестнадцатеричное значение будет xxFF00, где:
XX = ((100-Percentage) / 50) * 255 converted into hex.
Надеюсь, это поможет и понятно.
Это хорошее чистое решение, которое улучшает принятый в настоящее время ответ тремя способами:
- Удаляет магическое число (5.12), что упрощает понимание кода.
- Не будет возникать ошибка округления, которая дает -1, когда процент равен 100%.
- Позволяет вам настроить минимальное и максимальное значения RGB, которые вы используете, чтобы вы могли создавать более светлый или темный диапазон, чем простой rgb(255, 0, 0) - rgb(0, 255, 0).
Показанный код написан на C#, но адаптировать алгоритм к любому другому языку нетрудно.
private const int RGB_MAX = 255; // Reduce this for a darker range
private const int RGB_MIN = 0; // Increase this for a lighter range
private Color getColorFromPercentage(int percentage)
{
// Work out the percentage of red and green to use (i.e. a percentage
// of the range from RGB_MIN to RGB_MAX)
var redPercent = Math.Min(200 - (percentage * 2), 100) / 100f;
var greenPercent = Math.Min(percentage * 2, 100) / 100f;
// Now convert those percentages to actual RGB values in the range
// RGB_MIN - RGB_MAX
var red = RGB_MIN + ((RGB_MAX - RGB_MIN) * redPercent);
var green = RGB_MIN + ((RGB_MAX - RGB_MIN) * greenPercent);
return Color.FromArgb(red, green, RGB_MIN);
}
Примечания
Вот простая таблица, показывающая некоторые процентные значения и соответствующие пропорции красного и зеленого, которые мы хотим получить:
VALUE GREEN RED RESULTING COLOUR
100% 100% 0% green
75% 100% 50% yellowy green
50% 100% 100% yellow
25% 50% 100% orange
0% 0% 100% red
Надеюсь, вы это ясно видите
- зеленое значение в 2 раза превышает процентное значение (но ограничено 100)
- красный является обратным:2x (100 - процент) (но ограничено 100)
Итак, мой алгоритм вычисляет значения из таблицы, которая выглядит примерно так...
VALUE GREEN RED
100% 200% 0%
75% 150% 50%
50% 100% 100%
25% 50% 150%
0% 0% 200%
...а затем использует Math.Min()
ограничить их до 100%.
Я написал эту функцию 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
Итак, в случае с Йонасом:
>>> colourRange(0, "FF0000", 50, "FFFF00", 100, "00FF00", 25)
"FF7F00"
Мое решение для ActionScript 3:
var red:Number = (percentage <= 50) ? 255 : 256 - (percentage - 50) * 5.12;
var green:Number = (percentage >= 50) ? 255 : percentage * 5.12;
var redHex:Number = Math.round(red) * 0x10000;
var greenHex:Number = Math.round(green) * 0x100;
var colorToReturn:uint = redHex + greenHex;
Поскольку это RGB, цвета варьируются от целочисленных значений от -1 (белый) до -16777216 для черного.с красным, зеленым и желтым где-то посередине.Желтый на самом деле равен -256, красный - -65536, а зеленый - -16744448.Таким образом, желтый на самом деле не находится между красным и зеленым в обозначениях RGB.Я знаю, что с точки зрения длин волн зеленый находится на одной стороне спектра, а красный — на другой стороне спектра, но я никогда не видел, чтобы этот тип обозначения использовался в компьютерах, поскольку спектр не представляет все видимые цвета.