Программно облегчить цвет

Question

Мотивация

Я бы хотел найти способ взять произвольный цвет и осветлить его на несколько оттенков, чтобы я мог программно создать хороший градиент от одного цвета к более светлой версии. Градиент будет использоваться в качестве фона в пользовательском интерфейсе.

Возможность 1

Очевидно, я могу просто разделить значения RGB и увеличить их по отдельности на определенную величину. Это на самом деле то, что я хочу?

Возможность 2

Моя вторая мысль состояла в том, чтобы преобразовать RGB в HSV / HSB / HSL (оттенок, насыщенность, значение / яркость / яркость), немного увеличить яркость, немного уменьшить насыщенность, а затем преобразовать его обратно в RGB. Будет ли это иметь желаемый эффект в целом?

Answer 1

Немного опоздал на вечеринку, но если вы используете javascript или nodejs, вы можете использовать tinycolor library и манипулировать цветом так, как вам хочется:

tinycolor("red").lighten().desaturate().toHexString() // "#f53d3d" 

Answer 2

Я не нашел этот вопрос, пока он не стал связанным с моим первоначальным вопросом.

Однако, используя понимание этих великих ответов. Я собрал хорошую двухстрочную функцию для этого:

Программно осветлить или затемнить шестнадцатеричный цвет (или RGB, и смешать цвета)

Это вариант метода 1. Но с учетом перенасыщения. Как сказал Кит в своем ответе выше; используйте Lerp, чтобы решить ту же проблему, о которой говорил Марк, но без перераспределения. Результаты shadeColor2 должны быть намного ближе к правильной работе с HSL, но без накладных расходов.

Answer 3

Представьте, что вы смешали альфа с белым:

oneMinus = 1.0 - amount
r = amount + oneMinus * r
g = amount + oneMinus * g
b = amount + oneMinus * b

, где amount - от 0 до 1, где 0 возвращает исходный цвет, а 1 - белый.

Возможно, вы захотите смешать с любым цветом фона, если вы светитесь, чтобы отобразить что-то отключенное:

oneMinus = 1.0 - amount
r = amount * dest_r + oneMinus * r
g = amount * dest_g + oneMinus * g
b = amount * dest_b + oneMinus * b

, где (dest_r, dest_g, dest_b) - это цвет, который смешивается, а amount - от 0 до 1, с нулем, возвращающим (r, g, b), и 1, возвращающим (dest.r, dest.g, dest.b)

Answer 4

Метод 1: преобразование RGB в HSL, настройка HSL, преобразование обратно в RGB.

Метод 2: Lerp значения цвета RGB - http://en.wikipedia.org/wiki/Lerp_(computing)

См. мой ответ на этот похожий вопрос для реализации метода C # 2.

Answer 5

Если вы хотите произвести постепенное исчезновение градиента, я бы предложил следующую оптимизацию: Вместо того, чтобы делать RGB-> HSB-> RGB для каждого отдельного цвета, вы должны только рассчитать целевой цвет. Как только вы знаете целевой RGB, вы можете просто вычислить промежуточные значения в пространстве RGB без необходимости конвертировать туда-сюда. Независимо от того, рассчитываете ли вы линейный переход использования, какая-то кривая зависит от вас.

Answer 6

Вот пример освещения цвета RGB в Python:

def lighten(hex, amount):
    """ Lighten an RGB color by an amount (between 0 and 1),

    e.g. lighten('#4290e5', .5) = #C1FFFF
    """
    hex = hex.replace('#','')
    red = min(255, int(hex[0:2], 16) + 255 * amount)
    green = min(255, int(hex[2:4], 16) + 255 * amount)
    blue = min(255, int(hex[4:6], 16) + 255 * amount)
    return "#%X%X%X" % (int(red), int(green), int(blue))

Answer 7

У меня есть сообщение в блоге , в котором показано, как это сделать в Delphi. Это довольно просто, потому что функции ColorRGBToHSL и ColorHLSToRGB являются частью стандартной библиотеки.

Answer 8

Сначала я бы попробовал номер 1, но номер 2 звучит довольно хорошо. Попробуйте сделать это сами и посмотрите, удовлетворены ли вы результатами. Похоже, вам понадобится 10 минут, чтобы подготовить тест.

Answer 9

Вы найдете код для преобразования между цветовыми пространствами в библиотеке color-tools ruby ​​

Answer 10

Технически, я не думаю, что либо является правильным, но я полагаю, что вы хотите вариант варианта # 2. Проблема в том, что RGB 990000 и «осветление» действительно добавлялись на красный канал (Value, Brightness, Lightness), пока вы не добрались до FF. После этого (сплошной красный цвет) будет необходимо убрать насыщенность , чтобы полностью перейти к сплошному белому.

Преобразования раздражают, особенно если учесть, что вы не можете переходить напрямую в RGB и Lab и обратно, но я думаю, что вы действительно хотите разделить значения цветности и яркости и просто изменить яркость, чтобы действительно достичь того, чего вы хотите. 1005 *