C #: создать более светлый / темный цвет на основе системного цвета - PullRequest
54 голосов
/ 29 апреля 2009

Дублирование

Как настроить яркость цвета?
Как определить вариант более темного или светлого цвета для данного цвета?
Программно осветлить цвет


Скажи, что у меня

var c = Color.Red;

Теперь я хочу создать новый Color, который будет светлее или темнее, чем этот цвет. Как я могу сделать это без особых хлопот?

Ответы [ 11 ]

94 голосов
/ 29 апреля 2009

ControlPaint .Light .Dark .DarkDark и т. Д.

Color lightRed = ControlPaint.Light( Color.Red );
71 голосов
/ 26 сентября 2012

Я недавно писал об этом . Основная идея заключается в применении заданного поправочного коэффициента к каждому из компонентов цвета. Следующий статический метод изменяет яркость данного цвета с помощью указанного поправочного коэффициента и создает более темный или более светлый вариант этого цвета:

/// <summary>
/// Creates color with corrected brightness.
/// </summary>
/// <param name="color">Color to correct.</param>
/// <param name="correctionFactor">The brightness correction factor. Must be between -1 and 1. 
/// Negative values produce darker colors.</param>
/// <returns>
/// Corrected <see cref="Color"/> structure.
/// </returns>
public static Color ChangeColorBrightness(Color color, float correctionFactor)
{
    float red = (float)color.R;
    float green = (float)color.G;
    float blue = (float)color.B;

    if (correctionFactor < 0)
    {
        correctionFactor = 1 + correctionFactor;
        red *= correctionFactor;
        green *= correctionFactor;
        blue *= correctionFactor;
    }
    else
    {
        red = (255 - red) * correctionFactor + red;
        green = (255 - green) * correctionFactor + green;
        blue = (255 - blue) * correctionFactor + blue;
    }

    return Color.FromArgb(color.A, (int)red, (int)green, (int)blue);
}
13 голосов
/ 22 апреля 2010

Вы также можете сделать это, используя функцию Lerp. В XNA есть такой, но написать его легко.

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

Функция позволяет вам сделать это:

// make red 50% lighter:
Color.Red.Lerp( Color.White, 0.5 );

// make red 75% darker:
Color.Red.Lerp( Color.Black, 0.75 );

// make white 10% bluer:
Color.White.Lerp( Color.Blue, 0.1 );
8 голосов
/ 14 сентября 2013

Большинство из этих методов затемняют цвет, но они сильно меняют оттенок, поэтому результат выглядит не очень хорошо. Лучший ответ - использовать класс Рича Ньюмана HSLColor и настроить яркость.

public Color Darken(Color color, double darkenAmount) {
    HSLColor hslColor = new HSLColor(color);
    hslColor.Luminosity *= darkenAmount; // 0 to 1
    return hslColor;
}
4 голосов
/ 23 августа 2014

Взяв основной метод @ Ответ Павла Я подготовил следующие два небольших метода расширения для более интуитивной (по крайней мере для меня) подписи.

public static Color LightenBy(this Color color, int percent)
{
    return ChangeColorBrightness(color, percent/100.0);
}

public static Color DarkenBy(this Color color, int percent)
{
    return ChangeColorBrightness(color, -1 * percent / 100.0); 
}
4 голосов
/ 29 апреля 2009

Вот код javascript, который я использую для осветления / затемнения данного цвета. Вы можете использовать его в качестве основы для эквивалентной функции C #

Он работает путем вычисления расстояния от чистого белого для каждого из компонентов RGB, а затем корректирует это расстояние с помощью предоставленного коэффициента. Новое расстояние используется для расчета нового цвета. Коэффициент от 0 до 1 темнеет, коэффициент выше 1 светлее

function Darken( hexColor, factor )
    {   
        if ( factor < 0 ) factor = 0;

        var c = hexColor;
        if ( c.substr(0,1) == "#" )
        {
            c = c.substring(1);
        }

        if ( c.length == 3 || c.length == 6 )
        {
            var i = c.length / 3;

            var f;  // the relative distance from white

            var r = parseInt( c.substr(0, i ), 16 );
            f = ( factor * r / (256-r) );
            r = Math.floor((256 * f) / (f+1));

            r = r.toString(16);
            if ( r.length == 1 ) r = "0" + r;

            var g = parseInt( c.substr(i, i), 16);
            f = ( factor * g / (256-g) );
            g = Math.floor((256 * f) / (f+1));
            g = g.toString(16);
            if ( g.length == 1 ) g = "0" + g;

            var b = parseInt( c.substr( 2*i, i),16 );
            f = ( factor * b / (256-b) );
            b = Math.floor((256 * f) / (f+1));
            b = b.toString(16);
            if ( b.length == 1 ) b = "0" + b;

            c =  r+g+b;
         }   

         return "#" + c;

    }
2 голосов
/ 08 января 2018

Я изменил функцию Павла Владова, чтобы изменить даже компонент RGB, чтобы получить тени для любой комбинации направлений R / G / B:

Public Function ChangeColorShades(color As Color, correctionFactor As Single, bR As Boolean, bG As Boolean, bB As Boolean) As Color


    Dim red As Single = CSng(color.R)
    Dim green As Single = CSng(color.G)
    Dim blue As Single = CSng(color.B)

    If (correctionFactor < 0) Then

        correctionFactor = 1 + correctionFactor
        If bR Then
            red *= correctionFactor
        End If
        If bG Then
            green *= correctionFactor
        End If
        If bB Then
            blue *= correctionFactor
        End If


    Else
        If bR Then
            red = (255 - red) * correctionFactor + red
        End If
        If bG Then
            green = (255 - green) * correctionFactor + green
        End If
        If bB Then
            blue = (255 - blue) * correctionFactor + blue
        End If

    End If

    Return color.FromArgb(color.A, CInt(red), CInt(green), CInt(blue))
End Function
1 голос
/ 20 июня 2016

Вы также можете просто поработать над процентом RGB, чтобы сделать его светлее или темнее, как вы хотите. Вот пример того, как сделать цвет темнее х%, чем он есть:

//_correctionfactory in percentage, e.g 50 = make it darker 50%
    private Color DarkerColor(Color color, float correctionfactory = 50f)
    {
        const float hundredpercent = 100f;                        
        return Color.FromArgb((int)(((float)color.R / hundredpercent) * correctionfactory),
            (int)(((float)color.G / hundredpercent) * correctionfactory), (int)(((float)color.B / hundredpercent) * correctionfactory));
    }

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

private Color LighterColor(Color color, float correctionfactory = 50f)
    {
        correctionfactory = correctionfactory / 100f;
        const float rgb255 = 255f;
        return Color.FromArgb((int)((float)color.R + ((rgb255 - (float)color.R) * correctionfactory)), (int)((float)color.G + ((rgb255 - (float)color.G) * correctionfactory)), (int)((float)color.B + ((rgb255 - (float)color.B) * correctionfactory))
            );
    }

Надеюсь, это поможет.

0 голосов
/ 04 января 2017

Я сделал сайт, который делает это colorglower.com Вы можете проверить его, чтобы увидеть демо.

Вот код JavaScript, который я использовал.

function lighten(color) {

// convert to decimal and change luminosity
var luminosity = 0.01
var computedColors = new Array();
var newColor = "#",
    c, i, n, black = 0,
    white = 255;
for (n = 0; n < 10; n++) {
    for (i = 0; i < 3; i++) {
        c = parseInt(color.substr(i * 2, 2), 16);
        c = Math.round(Math.min(Math.max(black, c + (luminosity * white)), white)).toString(16);
        newColor += ("00" + c).substr(c.length);
    }

    computedColors[n] = newColor;
    var arrayUnique = checkIfArrayIsUnique(computedColors);
    if (arrayUnique == false) {
        computedColors.pop();
        break;
    }

    computedColors[n] = newColor;
    newColor = "#";
    luminosity += calcPercentage();
}

return computedColors;

}

Что делает этот код, так это получает шестнадцатеричный цвет, а затем выводит 10 его самых легких цветовых версий и помещает их в массив. Вы можете изменить яркость на любую другую, чтобы настроить процент оттенка. Чтобы затемнить цвета, вам просто нужно изменить:

luminosity -= calcPercentage();
0 голосов
/ 29 апреля 2009

Посмотрите на класс ControlPaint:

MSDN: Члены ControlPaint

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...