C #: créer une couleur plus claire/plus sombre basée sur une couleur système
Dupliquer
Comment ajuster la luminosité d'une couleur?
Comment déterminer une variante de couleur plus foncée ou plus claire d'une couleur donnée?
Allumer une couleur par programme
Dis que j'ai
var c = Color.Red;
Maintenant, je veux créer une nouvelle Color qui est plus claire ou plus sombre que cette couleur. Comment puis-je faire cela sans trop de soucis?
ControlPaint . Light. Noir, Noir, etc.
Color lightRed = ControlPaint.Light( Color.Red );
J'ai récemment blogué à propos de ceci . 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);
}
Vous pouvez également le faire en utilisant une fonction Lerp. Il y en a un dans XNA, mais c'est facile d'écrire vous-même.
Voir ma réponse à cette question similaire pour une implémentation 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 );
La plupart de ces méthodes assombrissent la couleur, mais elles ajustent la teinte de manière à rendre le résultat moins esthétique. La meilleure solution consiste à utiliser la classe HSLColor de Rich Newman et à ajuster la luminosité.
public Color Darken(Color color, double darkenAmount) {
HSLColor hslColor = new HSLColor(color);
hslColor.Luminosity *= darkenAmount; // 0 to 1
return hslColor;
}
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 calcule 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;
}
Prenant la méthode principale de @ Réponse de Pavel J'ai préparé les deux petites méthodes d'extension suivantes pour une signature plus intuitive (du moins pour moi).
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);
}
J'ai changé la fonction de Pavel Vladov pour modifier même les composants RVB, pour obtenir des nuances sur n'importe quelle combinaison 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
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 que nous pouvons également inverser pour rendre le processus plus léger. Nous obtenons uniquement le résultat de 255 - RGB, puis 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))
);
}
J'espère que cela pourra aider.
J'ai créé un site qui fait cela colorglower.com Vous pouvez y accéder 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();
Utilisation de la bibliothèque de conversion HSI (recherche sur Google). Et puis, ajustez I channel pour une couleur plus claire/plus sombre.
Jetez un coup d’œil à la classe ControlPaint: