[Erledigt] RGB hellere Farbe berechenbar ?

dreamcatcher · 21.08.2011, 23:25

Es geht um folgendes Plugin:
http://jqueryui.com/demos/selectable/#event-selected

Dort hat man z.B. ein helles und ein normales Orange.

Nun habe ich dynamische Farben welche den "Selected" Zustand festlegen (In dem Beispiel das "dunkle" Orange).

Nun möchte ich auch den "selecting" (helles Orange) automatisch aus der Farbe berechnen bzw. abändern.

Der Farbcode liegt in RGB vor.

Gibt es die Möglichkeit, den vorliegenden Farbcode via JS heller zu berechnen ?
Gibt es dafür vllt. schon einen Codeschnipsel oder bestimmte Regeln die eingehalten werden müssen ?

Ich habe dazu ebend etwas mit den RGB Farben rumgespielt und gemerkt, dass die Farbe meist heller wird, wenn Green um 33 erhöht wird.

Allerdings kann ich mir vorstellen, dass es bei bestimmten Farben dadurch Farbverfälschungen gibt.

ChrisB · 21.08.2011, 23:29

In HSL/HSV umrechnen, heller machen, zurück rechnen.

Oder einen Browser verwenden, der schon HSL-Farbangaben versteht

dreamcatcher · 22.08.2011, 01:06

PHP-Code:

  /**
* JS Color lighter & darker
* 
* @desc Script return a given color (rgb(a) & hex (3 & 6 digit)) lighter/darker
* @use var darker = darkerColor('rgba(80, 75, 52, .5)', .2);
*      var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);
* @see http://stackoverflow.com/questions/1507931/generate-lighter-darker-color-in-css-using-javascript
*/

var pad = function(num, totalChars) {
    var pad = '0';
    num = num + '';
    while (num.length < totalChars) {
        num = pad + num;
    }
    return num;
};

// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
    // Trim trailing/leading whitespace
    color = color.replace(/^s*|s*$/, '');

    // Expand three-digit hex
    color = color.replace(
        /^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,
        '#$1$1$2$2$3$3'
        );

    // Calculate ratio
    var difference = Math.round(ratio * 256) * (darker ? -1 : 1),
    // Determine if input is RGB(A)
    rgb = color.match(new RegExp('^rgba?\\(\\s*' +
        '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
        '\\s*,\\s*' +
        '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
        '\\s*,\\s*' +
        '(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
        '(?:\\s*,\\s*' +
        '(0|1|0?\\.\\d+))?' +
        '\\s*\\)$'
        , 'i')),
    alpha = !!rgb && rgb[4] != null ? rgb[4] : null,

    // Convert hex to decimal
    decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(
        /^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,
        function() {
            return parseInt(arguments[1], 16) + ',' +
            parseInt(arguments[2], 16) + ',' +
            parseInt(arguments[3], 16);
        }
        ).split(/,/),
    returnValue;

    // Return RGB(A)
    return !!rgb ?
    'rgb' + (alpha !== null ? 'a' : '') + '(' +
    Math[darker ? 'max' : 'min'](
        parseInt(decimal[0], 10) + difference, darker ? 0 : 255
        ) + ', ' +
    Math[darker ? 'max' : 'min'](
        parseInt(decimal[1], 10) + difference, darker ? 0 : 255
        ) + ', ' +
    Math[darker ? 'max' : 'min'](
        parseInt(decimal[2], 10) + difference, darker ? 0 : 255
        ) +
    (alpha !== null ? ', ' + alpha : '') +
    ')' :
    // Return hex
    [
    '#',
    pad(Math[darker ? 'max' : 'min'](
        parseInt(decimal[0], 10) + difference, darker ? 0 : 255
        ).toString(16), 2),
    pad(Math[darker ? 'max' : 'min'](
        parseInt(decimal[1], 10) + difference, darker ? 0 : 255
        ).toString(16), 2),
    pad(Math[darker ? 'max' : 'min'](
        parseInt(decimal[2], 10) + difference, darker ? 0 : 255
        ).toString(16), 2)
    ].join('');
};
var lighterColor = function(color, ratio) {
    return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
    return changeColor(color, ratio, true);
};

Zitat:

lighterColor(123456, .3))
darkerColor(123456, .3))

An alle Leuts die das Gleiche brauchen und diesen Thread vllt. durch Google oder die SuFu finden

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Hintergrund Farbe beim Bild erstellen	fragnicht	PHP Tipps 2009	2	19.11.2009 16:28
einzelne worte eines strings in andere farbe ausgeben	litterauspirna	PHP Tipps 2009	18	16.11.2009 15:45
[Erledigt] Imagick - farbe eines Pixels ändern	charlie_harper	PHP Tipps 2009	7	03.11.2009 21:09
Zwei Texte vergleichen und Unterschiede mit Farbe kennzeich.	BartTheDevil89	PHP Tipps 2008	5	02.01.2008 19:18
Trennlinie (hr) hat nicht richtige Farbe...		HTML, Usability und Barrierefreiheit	3	11.01.2006 13:08
[Erledigt] Bild farbe ändern		PHP-Fortgeschrittene	2	22.08.2005 10:03
farbe abdunkeln!		HTML, Usability und Barrierefreiheit	3	17.05.2005 21:57
mouse over von farbe zu bild		HTML, Usability und Barrierefreiheit	3	15.05.2005 17:38
Links immer gleiche Farbe?	seejay	HTML, Usability und Barrierefreiheit	11	16.11.2004 23:12
Frameborder in Farbe, aber ohne Schatten	duerov	HTML, Usability und Barrierefreiheit	4	05.10.2004 22:24
[Erledigt] Farbe eines Bildes ändern?		PHP-Fortgeschrittene	3	09.09.2004 23:16
negative farbe...	konsti	PHP-Fortgeschrittene	21	17.08.2004 23:41
Link Farbe		PHP Tipps 2004	9	27.07.2004 11:24
[Erledigt] farbe durchsichtig?		HTML, Usability und Barrierefreiheit	5	27.06.2004 10:41

21.08.2011, 23:25
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	[Erledigt] RGB hellere Farbe berechenbar ? Es geht um folgendes Plugin: http://jqueryui.com/demos/selectable/#event-selected Dort hat man z.B. ein helles und ein normales Orange. Nun habe ich dynamische Farben welche den "Selected" Zustand festlegen (In dem Beispiel das "dunkle" Orange). Nun möchte ich auch den "selecting" (helles Orange) automatisch aus der Farbe berechnen bzw. abändern. Der Farbcode liegt in RGB vor. Gibt es die Möglichkeit, den vorliegenden Farbcode via JS heller zu berechnen ? Gibt es dafür vllt. schon einen Codeschnipsel oder bestimmte Regeln die eingehalten werden müssen ? Ich habe dazu ebend etwas mit den RGB Farben rumgespielt und gemerkt, dass die Farbe meist heller wird, wenn Green um 33 erhöht wird. Allerdings kann ich mir vorstellen, dass es bei bestimmten Farben dadurch Farbverfälschungen gibt.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.08.2011, 23:29
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	In HSL/HSV umrechnen, heller machen, zurück rechnen. Oder einen Browser verwenden, der schon HSL-Farbangaben versteht __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?