C #: Créer une couleur plus claire / plus sombre basée sur une couleur système

Question

  

Dupliquer

     

Comment ajuster la luminosité d'une couleur?
   Comment déterminer plus sombre ou variante de couleur plus claire d'une couleur donnée?
   Éclaircir une couleur par programme

Dites que j'ai

var c = Color.Red;

Je souhaite maintenant créer une nouvelle couleur plus claire ou plus sombre que cette couleur. Comment puis-je faire cela sans trop de soucis?

Answer 1

ControlPaint .Light .Dark .DarkDark, etc.

Color lightRed = ControlPaint.Light( Color.Red );

Answer 2

J'ai récemment publié un blog à ce sujet . L'idée principale est d'appliquer un facteur de correction donné à chacune des composantes de la couleur. La méthode statique suivante modifie la luminosité d'une couleur donnée avec un facteur de correction spécifié et produit une variante plus sombre ou plus claire de cette couleur:

/// <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);
}

Answer 3

Vous pouvez également le faire en utilisant une fonction Lerp . Il en existe un dans XNA, mais il est facile de s’écrire soi-même.

Voir ma réponse à cette question similaire pour une implémentation en C #.

La fonction vous permet de faire ceci:

// 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 );

Answer 4

La plupart de ces méthodes assombrissent la couleur, mais elles modifient trop la teinte afin que le résultat ne soit pas très esthétique. La meilleure solution consiste à utiliser la classe HSLColor de Rich Newman et à régler la luminosité.

public Color Darken(Color color, double darkenAmount) {
    HSLColor hslColor = new HSLColor(color);
    hslColor.Luminosity *= darkenAmount; // 0 to 1
    return hslColor;
}

Answer 5

Voici le code javascript que j’utilise pour éclaircir / assombrir une couleur donnée. Vous pouvez l'utiliser comme base pour une fonction C # équivalente

Il fonctionne en calculant la distance entre le blanc pur et chacune des composantes RVB, puis ajuste cette distance en fonction du facteur fourni. La nouvelle distance est utilisée pour calculer la nouvelle couleur. Un facteur compris entre 0 et 1 s'assombrit, un facteur supérieur à 1 éclaircit

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;

    }

Answer 6

Reprenant la méthode principale de la réponse de Pavel , j'ai préparé les deux petites méthodes d'extension suivantes pour une pour moi) signature.

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); 
}

Answer 7

J'ai changé la fonction de Pavel Vladov pour modifier même les composants RVB, afin d'obtenir des nuances pour toutes les combinaisons de directions 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

Answer 8

Vous pouvez également simplement travailler sur le pourcentage RVB pour le rendre plus clair ou plus foncé à votre guise. Voici un exemple montrant comment rendre une couleur plus sombre à x% de ce qu'elle est:

//_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));
    }

Une dernière chose, nous pouvons également inverser le processus pour le rendre plus léger. Nous obtenons uniquement le résultat de 255 - RVB, puis nous le multiplions par le pourcentage souhaité, comme dans l'exemple suivant:

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))
            );
    }

L’espoir que cela aide.

Answer 9

Utilisation de la bibliothèque de conversion HSI (recherche sur Google). Et puis, réglez le canal I pour une couleur plus claire / plus sombre.

Answer 10

Jetez un coup d’œil à la classe ControlPaint:

MSDN: membres de ControlPaint

Answer 11

J'ai créé un site qui effectue cette colorglower.com . peut y aller pour voir une démo.

Voici le code javascript que j'ai utilisé.

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;

}

Ce code fait qu’il reçoit une couleur hexadécimale puis il en sort 10 versions de couleurs les plus claires et les place dans le tableau. Vous pouvez modifier la luminosité à votre guise pour régler le pourcentage de teinte. Pour assombrir les couleurs, il vous suffit de changer:

luminosity -= calcPercentage();