9
votes

Créer de manière dynamique des couleurs avec une luminosité différente

J'ai une couleur, ce que je sais seulement au moment de l'exécution. Utilisation de cette couleur, je veux créer deux nouvelles couleurs, une version très lumineuse et une version lumineuse de la couleur.

Pour clarifier, disons que j'ai la couleur rouge; Je souhaite créer la valeur hexagonale pour une couleur "rouge rouge" et une couleur "rouge foncé".

Comment allais-je faire cela? Mon code est écrit en Java en utilisant GWT.


0 commentaires

5 Réponses :


2
votes

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

Quoi qu'il en soit, si vous Avoir une valeur pour chaque composant (rouge, vert, bleu) et chaque valeur varie entre 0 et 255 -C'est standard, puis appliquez cet algorithme: P>

  • pour chaque composant
    • Multipliez la valeur d'origine par un facteur (disons 1.1, 10% plus lumineux) li>
    • Convertir le flotteur / double valeur en int li>
    • Si cette valeur dépasse 255, coupez-la à 255 li> ul> li> ul>

      alors vous aurez une nouvelle couleur (un nouveau tuple de trois composants). P>

      Couleurs hexa forts> p>

      Si vous avez des couleurs Dans le format Web: P>

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


0 commentaires

18
votes

Convertissez les couleurs en l'espace HSB / HSV (HUE-SATURH-LUMINESS / VALUE / VALUE) et ajustez la luminosité du plus léger et du bas pour plus sombre. Puis convertir à nouveau. En Java: xxx

L'espace HSB est conçu pour ce type de fonctionnement.

Le point essentiel est que vous n'avez besoin que de varier le terme de luminosité pour obtenir l'éclairage / Effet d'assombrissement que vous voulez. Vous devrez expérimenter avec combien vous allumez / assombrir.

Le code ci-dessus déplace la luminosité à mi-chemin vers le blanc pour la surbrillance et à mi-chemin vers le noir pour l'ombre. (J'ai utilisé ce code pour créer un effet de bordure en surbrillance sur un bouton.)

voir: http://fr.wikipedia.org/wiki/hsl_and_hsv et http://www.acasysystems.com/fr/color-picker/faq-hsb-hsv-color.htm

EDIT: Selon les commentaires, la classe java.awt.color ne peut pas être utilisée dans GWT. Étant donné que la seule partie de la classe Color Nous utilisons sont les conversions HSV à RVB et RVB aux HSV, à mesure que vous utilisiez GWT, vous pouvez plutôt que Google pour une mise en œuvre de ces algorithmes: Algorithme de conversion RGB Google HSV . Par exemple:


1 commentaires

Bien que cette réponse ait deux ans, je veux commenter que c'est faux. OP a déclaré qu'il utilise GWT, ce qui n'autorise pas l'utilisation du forfait AWT. Utilisation de Java.Awt.color provoque une erreur GWT lors de la création du projet (Eclipse et Devel Mode, cependant, ne verra aucun problème avec lui).



6
votes

Il y a au moins deux solutions décentes à cela, une meilleure (plus «appropriée», de toute façon) que l'autre. Cela dépend de ce que vous voulez utiliser la couleur, ou un compromis contre un code court et simple.

à l'aide d'un espace de couleur qui modélise la luminosité

Le problème est que vos couleurs sont probablement spécifiées comme RVB (c.-à-d. , des quantités de rouge, de vert et de bleu, reflétant votre moniteur.) Le meilleur moyen de modifier la luminosité d'une couleur est de spécifier vos couleurs dans un espace de couleur différent où la luminosité est une composante, telle que HSB - Hue (la couleur '), Saturation («quantité» de la couleur) et luminosité (explicative auto-explicative, je pense!)

Ceci Wikipedia Article sur les modèles de couleur HSL et HSV explique beaucoup plus que ce que vous voulez probablement savoir :)

regarder cette démo HSB .

Le point est, une fois vos couleurs spécifiées dans un espace différent dans lequel un composant est une luminosité, la modification de la luminosité est facile. parce que tu peux incer ASI ou diminuez de la même manière que vous le souhaitez, de la même manière que vous pourriez augmenter ou diminuer la quantité de bleu dans une couleur RVB. Java, je pense, a des fonctions de conversion de couleur intégrées - certaines googling trouvées Cette page avec un exemple pratique de couleur.rgbtohsb () et revenant à nouveau avec couleur.hsbtorgb .

mélange avec blanc ou noir

Ceci est HIGHIER, mais efficace dans la plupart des situations, et la plupart des codes que j'ai écrits pour obtenir deux versions d'une couleur (pour un gradient, par exemple) pour quelque chose d'inactivé comme une interface utilisateur utilise ce genre de méthode. La logique est qu'une couleur sera plus lumineuse car elle se rapprochera de blanc (RGB 255.255.255) et plus sombre car il se rapproche de noir (RVB 0,0,0). Donc, d'égayer quelque chose, mélanger le blanc par, dire, 25%. Vous pouvez mélanger entre deux couleurs en prenant une proportion d'une couleur et l'inverse de cette proportion de l'autre, pour chaque canal / composant.

Ce qui suit est non testé, et est une conversion du code Delphi i ont l'habitude de faire la même chose (le code est pris à partir de la mémoire et, en plus de cela, je n'ai pas utilisé Java depuis des années et ne vous souvenez pas de la syntaxe et des classes bien, je ne m'attends donc pas à ce que cela compilait, mais vous devrait être capable d'avoir une idée): xxx

et vous l'utiliseriez probablement comme: xxx

vous pourriez Voulez-vous ajouter du code de sécurité, par exemple pour assurer une pince entre 0..255 pour chaque composant, ou vérifier que damount est vraiment dans la plage 0..1.

le La documentation de couleur Java ressemble à la < Code> Couleur La classe a toutes sortes de méthodes utiles. (EDIT: Je viens de remarquer que vous avez dit que vous utilisez GWT non AWT - Je ne l'ai pas utilisé et je n'ai aucune idée de ce que les classes de Java standard sont incluses. Cela devrait vous diriger dans la bonne direction de toute façon.) Il est possible que ce n'est pas le moyen le plus propre de Java - qui sera dû à mon manque de connaissance des classes et des méthodes ces jours-ci - mais il devrait suffire à vous faire baisser la piste . J'espère que cela aide!


1 commentaires

C'est la solution parfaite que je cherchais. Je me demande pourquoi cette réponse n'est pas beaucoup plus évitée. Le deuxième paramètre CLTWO ICODED SANS COLOR.CORT. donc j'utilise mélange (mycolor, facteur); avec facteur entre 0,0 et 1,0 pour la foudre. Parfait. Merci.



2
votes

Comme vous utilisez GWT, vous devez effectuer vos calculs de couleur à l'aide de HSL plutôt que RVB, car il est plus intuitif et peut être appliqué comme une couleur de style directement sur vos composants.

Votre couleur initiale est "rouge" est "rouge". défini comme "couleur: HSL (0,100%, 50%)", voir http: //www.w3.org/tr/css3-color/#hsl-color pour plus de couleurs de style. P>

Pour obtenir un rouge clair, tout ce dont vous avez besoin est d'augmenter le L ( Légèreté) Composant, de sorte qu'un rouge clair serait "Couleur: HSL (0,100%, 75%)". Pour obtenir un rouge foncé, diminuer le composant L, "Couleur: HSL (0,100%, 25%)" P>

Pour appliquer votre couleur, définissez simplement la couleur en utilisant P>

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


0 commentaires

0
votes

Ajoutez simplement la fonction suivante à votre code. Il retournera la valeur de hachage pour la couleur plus claire et plus sombre selon vos besoins.

passe deux arguments. (1) La valeur de hachage de votre couleur sélectionnée. (2) Combien de temps plus léger ou plus sombre vous voulez (ex. Si vous voulez 10% d'ombre plus légère, passez 0,1 comme deuxième argument et si vous voulez 40% sombre, passez -0,4 (valeur négative pour plus sombre) comme deuxième argument)

Donc, si vous voulez trouver 20% de nuance plus légère de rouge, appelez alors ci-dessous
String LightRed = Convert ("FF0000", 0.2); CODE> P>

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


0 commentaires