Eine Farbe programmgesteuert aufhellen

Question

Motivation

Ich würde gerne eine Möglichkeit finden, eine beliebige Farbe zu nehmen und sie um ein paar Schattierungen aufzuhellen, damit ich programmgesteuert einen schönen Farbverlauf von einer Farbe zu einer helleren Version erstellen kann.Der Farbverlauf wird als Hintergrund in einer Benutzeroberfläche verwendet.

Möglichkeit 1

Natürlich kann ich die RGB-Werte einfach aufteilen und einzeln um einen bestimmten Betrag erhöhen.Ist das tatsächlich das, was ich will?

Möglichkeit 2

Mein zweiter Gedanke war, RGB in HSV/HSB/HSL (Farbton, Sättigung, Wert/Helligkeit/Helligkeit) umzuwandeln, die Helligkeit etwas zu erhöhen, die Sättigung etwas zu verringern und es dann wieder in RGB umzuwandeln.Wird dies im Allgemeinen den gewünschten Effekt haben?

Answer 1

Ich würde für die zweite Option gehen. Im Allgemeinen des Raumes RGB ist nicht wirklich gut für Farbmanipulation zu tun (Erstellen Übergang von einer Farbe zu einem anderen, Blitz / Verdunkeln eine Farbe, usw.). Im Folgenden sind zwei Seiten, die ich mit einer schnellen Suche gefunden habe, von / nach RGB zu / von HSL zu konvertieren:

• von den "Grundlagen der Computergrafik"
• einige Sourcecode in # C - sollte auf andere Programmiersprachen leicht anpassen .

Answer 2

Wie Wedge sagte , möchten Sie multiplizieren Dinge heller zu machen, aber das funktioniert nur, bis eine der Farben gesättigt (dh trifft 255 oder höher). An diesem Punkt können Sie klemmen nur die Werte auf 255, aber Sie werden auf subtile Weise den Farbton zu ändern, wie Sie leichter zu bekommen. Um den Farbton zu halten, wollen Sie das Verhältnis von (Mitte niedrigste) / (höchsten niedrigste) zu halten.

Hier sind zwei Funktionen in Python. Die erste führt den naiven Ansatz, der gerade klemmt die RGB-Werte auf 255, wenn sie gehen. Der zweite umverteilt die überschüssigen Werte des Farbtons intakt zu halten.

def clamp_rgb(r, g, b):
    return min(255, int(r)), min(255, int(g)), min(255, int(b))

def redistribute_rgb(r, g, b):
    threshold = 255.999
    m = max(r, g, b)
    if m <= threshold:
        return int(r), int(g), int(b)
    total = r + g + b
    if total >= 3 * threshold:
        return int(threshold), int(threshold), int(threshold)
    x = (3 * threshold - total) / (3 * m - total)
    gray = threshold - x * m
    return int(gray + x * r), int(gray + x * g), int(gray + x * b)

habe ich eine Steigung mit dem Wert RGB Ausgang (224,128,0) und von 1,0 multipliziert, 1.1, 1.2, usw. bis zu 2,0. Die obere Hälfte ist das Ergebnis unter Verwendung clamp_rgb und die untere Hälfte ist das Ergebnis mit redistribute_rgb. Ich denke, es ist leicht zu sehen, dass die Überläufe Umverteilen gibt ein viel besseres Ergebnis, ohne den RGB-Farbraum zu verlassen.

Zum Vergleich, hier ist die gleiche Steigung in den HLS und HSV-Farbräumen, wie Pythons colorsys Modul. Es wurde nur die L Komponente modifiziert und Klemm auf dem resultierenden RGB-Wert durchgeführt wurde. Die Ergebnisse sind ähnlich, aber erfordern Farbraumkonvertierungen für jedes Pixel.

Answer 3

In C #:

public static Color Lighten(Color inColor, double inAmount)
{
  return Color.FromArgb(
    inColor.A,
    (int) Math.Min(255, inColor.R + 255 * inAmount),
    (int) Math.Min(255, inColor.G + 255 * inAmount),
    (int) Math.Min(255, inColor.B + 255 * inAmount) );
}

ich das alles über den Ort verwendet haben.

Answer 4

Control Klasse in System.Windows.Forms-Namespace hat statische Methoden Licht und Dunkel:

public static Color Dark(Color baseColor, float percOfDarkDark);

Diese Methoden verwenden private Implementierung von HLSColor. Ich wünsche, diese Struktur wurde öffentlich und in System.Drawing.

Alternativ können Sie GetHue, GetSaturation, GetBrightness auf Farbe Struktur zu erhalten HSB-Komponenten verwenden. Leider habe ich nicht die umgekehrte Umwandlung finden.

Answer 5

wandelt es in RGB und linear zwischen der Originalfarbe und der Zielfarbe (oft weiß) interpoliert werden. Also, wenn Sie 16 Farben zwischen zwei Farben möchten, können Sie tun:

for(i = 0; i < 16; i++)
{
  colors[i].R = start.R + (i * (end.R - start.R)) / 15;
  colors[i].G = start.G + (i * (end.G - start.G)) / 15;
  colors[i].B = start.B + (i * (end.B - start.B)) / 15;
}

Answer 6

Um eine hellere oder dunklere Version einer bestimmten Farbe zu erhalten, sollten Sie seine Helligkeit ändern. Sie können dies tun, leicht auch ohne Ihre Farbe HSL oder HSB-Farb zu konvertieren. Zum Beispiel kann eine Farbe leichter machen können Sie den folgenden Code verwenden:

float correctionFactor = 0.5f;
float red = (255 - color.R) * correctionFactor + color.R;
float green = (255 - color.G) * correctionFactor + color.G;
float blue = (255 - color.B) * correctionFactor + color.B;
Color lighterColor = Color.FromArgb(color.A, (int)red, (int)green, (int)blue);

Wenn Sie weitere Informationen benötigen, die ganze Geschichte lesen auf meinem Blog .

Answer 7

Eine sehr ähnliche Frage, mit nützlichen Antworten wurde vorher gefragt: Wie bestimme ich, dunkler oder hellere Farbe Variante einer bestimmten Farbe?

Kurze Antwort:. Multiplizieren den RGB-Wert durch eine Konstante, wenn Sie nur „gut genug“ brauchen, um HSV zu übersetzen, wenn Sie Genauigkeit erfordern

Answer 8

habe ich Andrew Antwort und die Antwort von Mark diese zu machen (Stand 1/2013 kein Bereich Eingang für ff).

function calcLightness(l, r, g, b) {
    var tmp_r = r;
    var tmp_g = g;
    var tmp_b = b;

    tmp_r = (255 - r) * l + r;
    tmp_g = (255 - g) * l + g;
    tmp_b = (255 - b) * l + b;

    if (tmp_r > 255 || tmp_g > 255 || tmp_b > 255) 
        return { r: r, g: g, b: b };
    else 
        return { r:parseInt(tmp_r), g:parseInt(tmp_g), b:parseInt(tmp_b) }
}

Answer 9

Umwandeln in HS (LVB), um die Helligkeit zu erhöhen und dann zurück in den RGB-Umwandlung ist der einzige Weg, um zuverlässig die Farbe aufzuhellen, ohne den Farbton und Sättigungswerte zu bewirken (dh, nur die Farbe aufzuhellen, ohne es auf andere Weise zu ändern) .

Answer 10

Ich habe diese beiden Arten geschehen -. Sie mit Möglichkeit 2 viel bessere Ergebnisse

Jeder einfachen Algorithmus Sie die Möglichkeit konstruieren 1 wird wahrscheinlich für einen begrenzten Bereich nur gut funktionieren, Sättigungen zu starten.

Sie wollen in Poss 1 suchen, wenn (1) Sie die Farben und Helligkeiten verwendet beschränken können, und (2) können Sie die Berechnung eine Menge in einer Rendering durchführen.

Die Erzeugung der Hintergrund für eine UI nicht benötigen sehr viele Schattierungen Berechnungen, so schlage ich vor, Poss 2.

-Al.

Answer 11

Wenn Sie einen Gradienten fade-out produzieren wollen, würde ich die folgende Optimierung vorschlagen: Anstatt RGB- tun> HSB-> RGB für jede einzelne Farbe, die Sie nur die Zielfarbe berechnen soll. Sobald Sie das Ziel RGB kennen, können Sie einfach die Zwischenwerte im RGB-Raum berechnen, ohne hin und her konvertieren zu müssen. Ob Sie nun einen linearen Übergang Nutzungs eine Art Kurve berechnen, ist bis zu Ihnen.

Answer 12

. Methode 1: Konvertieren von RGB zu HSL HSL anpassen, konvertieren zurück zu RGB

Methode 2: Lerp , um die RGB-Farbwerte - http: //en.wikipedia.org/wiki/Lerp_(computing)

Siehe

Angenommen, Sie alpha zu Weiß gemischt:

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

wo amount ist von 0 bis 1, wobei 0 die ursprüngliche Farbe zurückkehrt und 1 zurückkehr weiß.

Sie können mit mischen wollen, was auch immer die Hintergrundfarbe, wenn Sie Aufhellung etwas deaktiviert angezeigt werden:

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

wobei (dest_r, dest_g, dest_b) wird die Farbe gemischt werden, um amount und ist von 0 bis 1, mit Null zurückkehr (r, g, b) und 1 zurückzukehr (dest.r, dest.g, dest.b)

konnte nicht gefunden werden, diese Frage erst nach es eine weitere Frage auf meine ursprüngliche Frage wurde.

Doch von diesen großen Antworten mit Einsicht. Ich pieced eine schöne Zweizeiler-Funktion für diesen zusammen:

Programmatically aufzuhellen oder abzudunkeln eine Hex-Farbe (oder rgb, und mischen Farben)

Es ist eine Version der Methode 1. Aber mit Übersättigung berücksichtigt. Wie Keith sagte in seiner Antwort oben; verwenden Lerp schicklich das gleiche Problem lösen Mark erwähnt, aber ohne Umverteilung. Die Ergebnisse der shadeColor2 sollten viel näher sein, um es den richtigen Weg mit HSL zu tun, aber ohne den Overhead.

Ein bisschen spät zur Party, aber wenn Sie javascript oder nodejs verwenden, können Sie tinycolor Bibliothek verwenden , und manipuliert die Farbe, wie Sie wollen:

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

Ich hätte Nummer # 1 versucht zuerst, aber # 2 klingt ziemlich gut. Probieren Sie es selbst zu tun und sehen, wenn Sie mit den Ergebnissen zufrieden sind, es klingt wie es Sie nehmen vielleicht 10 Minuten, um eine Test-Peitsche.

Technisch, ich glaube auch nicht richtig ist, aber ich glaube, dass Sie eine Variante der Option # wollen 2. Das Problem ist, dass genommen RGB 990000 und „Aufhellen“ es wäre wirklich nur auf den roten Kanal hinzufügen (Wert, Helligkeit, Helligkeit), bis Sie auf FF bekamen. Danach (fest rot), würde es die Sättigung die ganzen Weg zu soliden weißen gehen nimmt nach unten.

Die Conversions ärgerlich, vor allem, da Sie nicht zu und von RGB und Lab direkt gehen können, aber ich denke, Sie wirklich die Chrominanz und Luminanz-Werte trennen möchten, und ändern nur die Luminanz, um wirklich zu erreichen, was Sie wollen.

Code zum Konvertieren zwischen Farbräumen finden Sie im Farbtools Ruby-Bibliothek

Ich habe einen Blog-Post rel="nofollow , dass zeigt, wie dies in Delphi zu tun. Es ist ziemlich einfach, da die Funktionen ColorRGBToHSL und ColorHLSToRGB Teil der Standardbibliothek sind.

Hier ist ein Beispiel einer RGB-Farbe in Python aufzuhellen:

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 13

Answer 14

Answer 15

Angenommen, Sie alpha zu Weiß gemischt:

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

wo amount ist von 0 bis 1, wobei 0 die ursprüngliche Farbe zurückkehrt und 1 zurückkehr weiß.

Sie können mit mischen wollen, was auch immer die Hintergrundfarbe, wenn Sie Aufhellung etwas deaktiviert angezeigt werden:

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

wobei (dest_r, dest_g, dest_b) wird die Farbe gemischt werden, um amount und ist von 0 bis 1, mit Null zurückkehr (r, g, b) und 1 zurückzukehr (dest.r, dest.g, dest.b)

Answer 16

Answer 17

konnte nicht gefunden werden, diese Frage erst nach es eine weitere Frage auf meine ursprüngliche Frage wurde.

Doch von diesen großen Antworten mit Einsicht. Ich pieced eine schöne Zweizeiler-Funktion für diesen zusammen:

Programmatically aufzuhellen oder abzudunkeln eine Hex-Farbe (oder rgb, und mischen Farben)

Es ist eine Version der Methode 1. Aber mit Übersättigung berücksichtigt. Wie Keith sagte in seiner Antwort oben; verwenden Lerp schicklich das gleiche Problem lösen Mark erwähnt, aber ohne Umverteilung. Die Ergebnisse der shadeColor2 sollten viel näher sein, um es den richtigen Weg mit HSL zu tun, aber ohne den Overhead.

Answer 18

Answer 19

konnte nicht gefunden werden, diese Frage erst nach es eine weitere Frage auf meine ursprüngliche Frage wurde.

Doch von diesen großen Antworten mit Einsicht. Ich pieced eine schöne Zweizeiler-Funktion für diesen zusammen:

Answer 20

Answer 21

Ein bisschen spät zur Party, aber wenn Sie javascript oder nodejs verwenden, können Sie tinycolor Bibliothek verwenden , und manipuliert die Farbe, wie Sie wollen:

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

Answer 22

Ich hätte Nummer # 1 versucht zuerst, aber # 2 klingt ziemlich gut. Probieren Sie es selbst zu tun und sehen, wenn Sie mit den Ergebnissen zufrieden sind, es klingt wie es Sie nehmen vielleicht 10 Minuten, um eine Test-Peitsche.

Answer 23

Technisch, ich glaube auch nicht richtig ist, aber ich glaube, dass Sie eine Variante der Option # wollen 2. Das Problem ist, dass genommen RGB 990000 und „Aufhellen“ es wäre wirklich nur auf den roten Kanal hinzufügen (Wert, Helligkeit, Helligkeit), bis Sie auf FF bekamen. Danach (fest rot), würde es die Sättigung die ganzen Weg zu soliden weißen gehen nimmt nach unten.

Die Conversions ärgerlich, vor allem, da Sie nicht zu und von RGB und Lab direkt gehen können, aber ich denke, Sie wirklich die Chrominanz und Luminanz-Werte trennen möchten, und ändern nur die Luminanz, um wirklich zu erreichen, was Sie wollen.

Answer 24

Code zum Konvertieren zwischen Farbräumen finden Sie im Farbtools Ruby-Bibliothek

Answer 25

Ich habe einen Blog-Post rel="nofollow , dass zeigt, wie dies in Delphi zu tun. Es ist ziemlich einfach, da die Funktionen ColorRGBToHSL und ColorHLSToRGB Teil der Standardbibliothek sind.

Answer 26

Hier ist ein Beispiel einer RGB-Farbe in Python aufzuhellen:

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