L'utilisateur de l'application Web ASP.NET Je suis en construction peut sélectionner des couleurs à utiliser sur certains éléments (par exemple les boutons / titres) pour faciliter un certain degré de personnalisation.
Le problème est que, par défaut, le texte sur ces couches est noir ... Ce que j'essaie de faire est d'évaluer la valeur hexagonale choisie par l'utilisateur via un sélecteur et basculer entre le texte noir et blanc programmatique - ceci peut être en JavaScript, ou en code derrière.
Le creux du problème est que je ne suis tout simplement pas sûr de savoir comment évaluer l'hexagone pour prendre la décision si la proximité de la couleur choisie au noir est trop proche de l'utilisation de texte noir.
Des idées?
4 Réponses :
Un code de couleur hexagonale est composé de trois valeurs d'intensité, une pour rouge, une pour vert et une pour bleu, avec 2 chiffres hexagonaux pour chacun. Pour déterminer la lumière vse foncé, ajoutez simplement les trois valeurs ensemble. Les plus petits chiffres seraient plus sombres que les valeurs plus grandes.
Pour # 010203, l'ajout des valeurs RVB ensemble donne 01 + 02 + 03 = 06. Cela sera plus sombre que # 102030 = 60.
Merci - comment évalueriez-vous lorsque vous entrez dans les valeurs AA> FF?
Ricknz: Ceci est incorrect car le vert est beaucoup plus visible pour l'œil que bleu
Pour AA à FF, il vous suffit de convertir la valeur à deux chiffres de HEX, puis de faire le calcul. De JavaScript, vous pouvez utiliser la fonction parseint (). @Reinier: True, mais il suffit de les ajouter, d'une approximation approximative et est équivalente à une couleur simple -> Conversion de niveaux de gris / B & B.
Travaillé bien et vraiment facile à mettre en œuvre - pas aussi précis imo que la solution offerte par REINERIER. Merci encore
convertir en HSL et regardez la valeur Voici un fonction JavaScript pour faire la conversion. l uminance . Cela vous indiquera à quel point c'est brillant.
Pour convertir de la chaîne en chiffres, vous pouvez effectuer par exemple parseint ("café" .Substring (0,2), 16) pour le rouge
Merci pour les liens (+1), ils m'ont aidé à créer un testeur rapide - cela a fonctionné bien, mais semblait être moins précis sur les verts et les jaunes comme le suggèrent à la vente.
Le lien est cassé. S'il vous plaît mettre le code dans la réponse, les gens!
Doug S: Je suis d'accord avec le code de la réponse en général, mais le code de conversion HSL est si important que je sentais que cela nuirait à la réponse; Le code de conversion RVB au HSL devrait être suffisamment facile à trouver. J'ai remplacé les liens avec Wikipedia et Stackoverflow. J'espère qu'ils dureront plus longtemps :)
Au lieu d'ajouter les composants RVB ensemble, comme l'autre répondeur (Ricknz) dit, vous devriez en réalité en prendre la moyenne.
De plus, étant donné que le vert est plus visible pour l'œil humain que bleu, vous devez également ajouter un Poids.
Vous devez donc multiplier le composant rouge d'abord 0,299, les temps verts 0.587 et les temps bleues 0,114
de sorte que la luminance est donnée par: luminance = (R * 0.299 + g * 0.587 + B * 0.114) / 3
Edit:
Voici un extrait qui le calcule: p. La division de 256 depuis que nous avons couru de 0 à 256 (au lieu de 0-1) modifier: modifié le calcul de la division par 256 et non 768 comme intelligemment commenté >
Si vous comparez simplement pour la lumière vs sombre, prendre une moyenne ne changera pas le résultat.
Dans tous les cas, (R * 0.299F + g * 0.587F + B * 0.114F) sera toujours dans la plage 0-255, pas 768
C'est une approche très intéressante pour calculer la luminance, qui donnera des résultats différents que ma réponse - qui est la (autant que je sache) le calcul de la luminance standard. D'où avez-vous reçu les chiffres?
Johannes: Wikipedia..where ailleurs; ^) en.wikipedia.org/wiki/yuv le Y une partie de yuv est la luminance.
Après avoir testé (grâce au lien fourni par Johannes Hoff), c'était confortablement la méthode la plus fiable et manipulait bien les Verts qui se sont bien établis comme un problème avec les autres méthodes.
@TAOD - Comment puis-je d'abord convertir mon hex sur un int? Afin que je puisse utiliser cette méthode que vous avez?
@chobo: int numéro = convert.toint32 (hexstring, 16); Le 16 désigne la base (16 pour hexagonale).
Les méthodes pour le faire sont intégrées à .NET MAINTENANT:
var hexcolor = "#FA3CD0";
var color = System.Drawing.ColorTranslator.FromHtml(hexcolor);
var brightness = color.GetBrightness();
if (brightness > .5)
{
// color is light
}
else
{
// color is dark
}