Création dynamique de couleurs de luminosité différente

Question

J'ai une couleur, que je ne connais qu'au moment de l'exécution. En utilisant cette couleur, je veux créer deux nouvelles couleurs, une version très lumineuse et une version peu lumineuse de la couleur.

Pour clarifier, disons que j'ai la couleur Rouge ; je veux créer la valeur hexadécimale pour une couleur "Rouge clair" et une couleur "Rouge foncé".

Comment dois-je m'y prendre ? Mon code est écrit en Java avec GWT.

Answer 1

Convertissez les couleurs dans l'espace HSB/HSV (Hue-Saturation-Brightness/Value) et ajustez la luminosité vers le haut pour éclaircir et vers le bas pour assombrir. Puis reconvertissez à nouveau. En Java :

    import java.awt.Color;

    float hsbVals[] = Color.RGBtoHSB( originalColour.getRed(),
                                       originalColour.getGreen(),
                                       originalColour.getBlue(), null );
    Color highlight = Color.getHSBColor( hsbVals[0], hsbVals[1], 0.5f * ( 1f + hsbVals[2] ));
    Color shadow = Color.getHSBColor( hsbVals[0], hsbVals[1], 0.5f * hsbVals[2] );

L'espace HSB est conçu pour ce type d'opération.

L'essentiel est qu'il suffit de faire varier le terme Luminosité pour obtenir l'effet d'éclaircissement ou d'assombrissement souhaité. Vous devrez expérimenter l'ampleur de l'éclaircissement ou de l'assombrissement.

Le code ci-dessus modifie la luminosité à mi-chemin vers le blanc pour les hautes lumières et à mi-chemin vers le noir pour les ombres. (J'ai utilisé ce code pour créer un effet de bordure en surbrillance sur un bouton).

Voir : http://en.wikipedia.org/wiki/HSL_and_HSV y http://www.acasystems.com/en/color-picker/faq-hsb-hsv-color.htm

Editer : Selon les commentaires, le java.awt.Color ne peut pas être utilisée dans GWT. Puisque la seule partie de la classe Color La classe que nous utilisons est la conversion HSV vers RVB et RVB vers HSV. Comme vous utilisez GWT, vous pouvez chercher sur Google une implémentation de ces algorithmes : Algorithme de conversion HSV RVB de Google . Par exemple :

• javascripter.net
• cs.rit.edu/~ncs
• rapidtables.com (RVB à HSV)
• rapidtables.com (HSV à RVB)
• StackOverflow : Algorithme pour convertir RVB en HSV et HSV en RVB ?

Answer 2

Je ne sais pas dans quel format vous avez la couleur (j'ai essayé de voir si GWT utilise des couleurs... mais ils s'appuient fortement sur CSS et n'ont donc pas de propriétés spécifiques).

Quoi qu'il en soit, si vous avez une valeur pour chaque composante (rouge, vert, bleu), et que chaque valeur est comprise entre 0 et 255 - c'est la norme -, appliquez cet algorithme :

• pour chaque composant
  • multiplier la valeur d'origine par un facteur (disons 1,1, soit 10 % de luminosité en plus)
  • convertir la valeur float/double en int
  • si cette valeur dépasse 255, la ramener à 255

Vous obtiendrez alors une nouvelle couleur (un nouveau tuple à trois composantes).

Couleurs hexa

Si vous avez des couleurs au format web :

RRGGBB

RR - two hexa digits for red
GG - two hexa digits for green
BB - two hexa digits for blue

vous devrez les convertir en int et les reconvertir en hexa :

Chaîne hexa vers int

Integer.parseInt("AB", 16"); // returns 171

int vers Hexa string

Integer.toHexaString(171); // returns "AB"

Answer 3

Puisque vous utilisez GWT, vous devriez faire vos calculs de couleur en utilisant HSL plutôt que RGB, car c'est plus intuitif, et cela peut être appliqué comme une couleur de style directement à vos composants.

Votre couleur initiale est "rouge", définie comme "color : hsl(0,100%, 50%)", voir http://www.w3.org/TR/css3-color/#hsl-color pour en savoir plus sur les couleurs de style.

Pour obtenir un rouge clair, il suffit d'augmenter la composante L (luminosité). Un rouge clair serait donc "color : hsl(0,100%, 75%)". Pour obtenir un rouge foncé, il faut diminuer la composante L, "color : hsl(0,100%, 25%)"

Pour appliquer votre couleur, il suffit de définir la couleur à l'aide de la fonction

      component.getElement().getStyle().setColor("hsl(0,100%, 25%)")

Answer 4

Il suffit d'ajouter la fonction suivante à votre code. Elle renverra la valeur de hachage pour les couleurs plus claires et plus foncées selon vos besoins.

transmettent deux arguments. (1) la valeur de hachage de la couleur sélectionnée. (2) le degré d'éclaircissement ou d'assombrissement souhaité (par exemple, si vous souhaitez une teinte 10 % plus claire, passez 0,1 comme deuxième argument et si vous souhaitez une teinte 40 % plus foncée, passez -0,4 (valeur négative pour la teinte la plus foncée) comme deuxième argument).

Si vous souhaitez trouver 20 % de rouge plus clair, procédez comme suit
String lightred=convert("ff0000",0.2);

public static String convert(String hex, double num) {
    String rgb = "#",temp;
    int i;
    double c,cd;
    for (i = 0; i < 3; i++) {
        c = Integer.parseInt(hex.substring(i * 2,(i*2)+2), 16);
        c = Math.min(Math.max(0, c+(255*num)), 255);
        cd=c-(int)c;
        if(cd>0){c=(int)c+1;}
        temp = Integer.toHexString((int)c);
        if(temp.length()<2)
        {
            temp=temp+temp;
        }
        rgb += temp;
    }
    return rgb;
}