Y a-t-il une formule que je peux utiliser pour faire une valeur de couleur hexagonale plus brillante?
4 Réponses :
Vous pouvez convertir en HSV (à l'aide d'une formule de Wikipedia ici ) puis augmentez la
Ou utilisez un convertisseur en ligne à http://www.rapidtables.com/convert/color/rgb-to-hsv.htm . Le convertisseur inverse est également là. N'oubliez pas - c'est la valeur , la troisième partie de l'augmentation de la HSV. Pour moi, le premier semblait naturel d'utiliser.
Bien voir alors que les couleurs ne sont que 3 octets de R / G / B Ce que vous pouvez faire est de convertir chaque octet en un int (0-255) et d'augmenter chaque octet par le même nombre arbitraire. Terminer en convertissant chaque octet en arrière en hex. Exemple:
à partir de la couleur: converti en Ints c'est incrément d'un nombre arbitraire (dire 60) Vous obtenez Convertir le retour à Hex vous donne: Notez que la limite supérieure est de 255 (blanc) et inférieure est 0 (noir)
EDIT: Comme marque indique une faille avec cela. Il peut être corrigé par une règle supplémentaire: si la valeur initiale est à 0, ne le change pas;) # 224466
r = 34 , g = 68 et b = 102
r = 94 , g = 128 et b = 162
# 5e80a2
Cela changerait la couleur, imo.
Pour développer le commentaire de Chrisw, imaginez une couleur n ° 800000, un rouge sombre mais intense. L'éclaircissement de cette manière entraînerait une ff7f7f, plus proche du rose que rouge.
Il y a 16 millions de couleurs dans cette gamme. Changer Toute valeur change la "couleur". Je pense que cela peut signifier que cela change les ratios R / G / B, qui n'est qu'un axe arbitraire pour une seule dimension de «couleur».
Il s'agit plus d'un éclaircissement rapide et approximatif utilisé pour éviter la diapositive avec HSL - J'aurais probablement dû dire cela. Merci également à avoir souligné que la faille de la marque Logic Out Mark a été modifiée avec une nouvelle règle.
Mark Ransom, vous venez de faire la célèbre demande de couleur rouge clair, mais pas de rose ...
La nouvelle règle n'aide pas. Imaginez à partir de # 800101 au lieu de # 800000.
La réponse standard consiste à convertir en un espace de couleur différent ayant une luminosité comme un axe, puis manipule cette valeur directement. Je n'aime pas cette réponse, car cela ne vous dit pas ce que vous obtiendrez lorsque vous dépasserez la gamme de l'espace de couleur.
Si par plus brillant, vous voulez dire plus intense, vous pouvez simplement multiplier chaque valeur R, G, B de la même valeur, où cette valeur est> 1. Par exemple, pour le rendre 20% plus lumineux, multipliez chaque valeur de 1,2.
Si l'une des valeurs résultantes est supérieure à 255, vous avez dépassé les limites de la gamme RVB. La meilleure chose à faire dans ce cas est probablement d'apporter la couleur plus proche du blanc, il est donc plus léger mais moins saturé ou intense. Prenons l'exemple d'un RVB de départ de (50,192,240) que vous souhaitez rendre 20% plus lumineux. Le résultat est (60, 230.288) - rouge et vert sont à proximité, mais le bleu est trop brillant et a débordé. Prenez l'excédent et distribuez-le aux autres couleurs équitablement - 288-255 est 33, alors ajoutez 16,5 au rouge et au vert; L'arrondi vous donne le résultat de (77,247 255).
Merci d'avoir apporté cette question à mon attention. N'était même pas au courant de cela.
Qu'en est-il de la cartographie [0,255] à [O, INF), de multiplier, puis de mapper à [0,255]? Cela éviterait le problème de la gamme, mais je suppose que vous obtiendrez des résultats différents avec la teinte et la saturation en fonction de la carte que vous avez utilisée ...
@ Naught101, ce serait le même que de simplement serrer les résultats à 255. C'est une stratégie viable, mais je pense que le mien est meilleur. En outre, comment évitez-vous à l'infini?
euh .. Tan ((PI / 2) * x / 255)? (Techniquement non défini à X = 255, vous voudrez peut-être diviser par 256 ou 255.0001 ou quelque chose). Il y a un certain nombre de Fonctions de courage qui remontent dans l'autre sens, et je pense qu'ils ont tous Inverses sur cet intervalle (bien qu'il n'y ait peut-être pas de joli facile à utiliser algébrique).
@ NOTHARD101 J'ai eu une réponse similaire à une autre question où j'ai laissé du code pour gérer l'affaire hors gamme. Ça marche assez bien. Stackoverflow.com/questions/141855/...
Ceci est vieux mais je vais ajouter un commentaire: l'idée d'ajouter 20% à tous les RBG est correcte, mais pas à traiter de l'excès de 255. Ce que vous devriez faire est de déterminer l'augmentation de% nécessaire pour apporter la valeur la plus élevée à 255, puis appliquer ce% aux deux autres. Donc (50,192.240) est multiplié par 1,0265 pour obtenir (53 204,255). Dans HSB, la couleur va de (195,79,94) à (195 79 100), ce que vous voulez.
@Scottyb Avez-vous vérifié mon lien dans le commentaire juste au-dessus de la vôtre? Ce code peut bien aller au-delà de prendre la valeur la plus élevée à 255, en ajoutant une blancheur à la couleur. Cela a l'effet secondaire de réduire la saturation mais qui est inévitable et les résultats sont ce que l'on s'attendait intuitive.
Si vous utilisez le code VS, il y a un piratage rapide. Il suffit de survoler la souris sur la couleur hexagone et vous verrez une popup de sélecteur de couleur.
Cliquez sur la zone supérieure pour modifier la couleur de la notation hexadécique en HSLA, RGBA, etc. Convertissez en notation HSL / HSLA, comme indiqué ci-dessous.
Modifiez maintenant la légèreté (le troisième paramètre dans le Remarque: veuillez ne pas être confondu avec différentes couleurs utilisées dans les 2 captures d'écran ci-dessus. Chaque capture d'écran correspond à une couleur différente dans le même fichier CSS.
HSL / HSLA Fonction) selon votre exigence. Une fois que vous êtes satisfait du niveau d'altitude survoler sur la couleur (maintenant dans la notation HSL) et le reconverti sur Hex en appuyant sur la zone d'en-tête de la fenêtre contextuelle du sélecteur de couleur.