Changez dynamicment la couleur pour la rendre plus claire ou plus foncée en pourcentage CSS (Javascript)

Nous avons une grande application sur le site et nous avons quelques liens qui sont, disons la couleur bleue comme les liens bleus sur ce site. Maintenant, je veux faire d’autres liens, mais avec des couleurs plus claires. Évidemment, je peux simplement faire simplement en ajoutant le code hexadécimal dans le fichier CSS, mais notre site permet aux utilisateurs de décider quelles couleurs ils veulent pour leur profil / site personnalisé (comme Twitter).

Alors, ma question est la suivante: pouvons-nous réduire la couleur en pourcentage?

Disons que le code suivant est CSS:

a { color: blue; } a.lighter { color: -50%; // obviously not correct way, but just an idea } 

OU

 a.lighter { color: blue -50%; // again not correct, but another example of setting color and then redcuing it } 

Est-il possible de réduire une couleur en pourcentage?

Si vous utilisez une stack qui vous permet d’utiliser SASS , vous pouvez utiliser la fonction lighten :

 $linkcolour: #0000FF; a { color: $linkcolour; } a.lighter { color: lighten($linkcolour, 50%); } 

Vous pouvez maintenant le faire avec les filtres CSS. Le support est difficile entre les navigateurs, mais comme la spécification continue à être implémentée et nettoyée, cela va être très pratique.

 .button { color: #ff0000; } /* note: 100% is baseline so 85% is slightly darker, 20% would be significantly darker */ .button:hover { filter: brightness(85%); } 
  

Il y a “l’opacité” qui fera briller le fond:

 opacity: 0.5; 

mais je ne suis pas sûr que ce soit ce que tu veux dire. Définir “réduire la couleur”: rendre transparent? Ou append du blanc?

Les couleurs HSL fournissent une réponse, une valeur de couleur HSL est spécifiée avec: hsl (teinte [0,255], saturation%, légèreté%).

HSL est pris en charge dans IE9 +, Firefox, Chrome, Safari et Opera 10+

 a { color:hsl(240,65%,50%); } a.lighter { color:hsl(240,65%,75%); } 

Dans LESS, vous utiliseriez les variables suivantes:

 @primary-color: #999; @primary-color-lighter: lighten(@primary-color, 20%); 

Cela prend la 1ère variable et l’allège de 20% (ou tout autre pourcentage). Dans cet exemple, vous #ccc couleur la plus claire: #ccc

Pour autant que je sache, il est impossible de le faire en CSS.

Mais je pense qu’une petite logique côté serveur pourrait facilement faire comme vous le suggérez. Les feuilles de style CSS sont normalement des ressources statiques, mais il n’y a pas de raison qu’elles ne puissent pas être générées dynamicment par du code côté serveur. Votre script côté serveur:

  1. Vérifiez un paramètre d’URL pour déterminer l’utilisateur et donc la couleur choisie par l’utilisateur. Utilisez un paramètre d’URL plutôt qu’une variable de session pour pouvoir toujours mettre en cache le CSS.
  2. Divisez la couleur en ses composantes rouge, verte et bleue
  3. Incrémentez chacune des trois composantes d’une quantité définie. Expérimentez avec cela pour obtenir les résultats que vous recherchez.
  4. Générer des CSS intégrant la nouvelle couleur

Les liens vers cette page générasortingce de CSS ressemblent à ceci:

  

Si vous n’utilisez pas l’extension .css, veillez à définir correctement le type MIME afin que le navigateur puisse interpréter le fichier en tant que CSS.

(Notez que pour rendre les couleurs plus claires, vous devez augmenter chacune des valeurs RVB)

Si vous voulez des couleurs plus foncées, vous pouvez utiliser le noir rgba avec une faible opacité:

 rgba(0,0,0,0.3) 

Pour un usage plus léger du blanc:

 rgba(255,255,255,0.3). 

Si vous décidez d’utiliser http://compass-style.org/ , un framework css basé sur sass, il fournit des fonctions sass darken() et lighten() très utiles pour générer dynamicment des css. c’est très propre:

 @import compass/utilities $link_color: #bb8f8f a color: $link_color a:visited color: $link_color a:hover color: darken($link_color,10) 

génère

 a { color: #bb8f8f; } a:visited { color: #bb8f8f; } a:hover { color: #a86f6f; } 

Vous pouvez utiliser un peu de javascript pour calculer la couleur la plus claire et la plus sombre en utilisant le rgb ().

Violon : Pas vraiment sympa, mais c’est juste pour illustration.

Ce qu’il fait essentiellement, c’est de définir une couleur et de sélectionner 20 couleurs avec la même quantité (par rapport à l’autre) de RVB que si 10 sont séparées.

 for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) { var r = 91; var g = 192; var b = 222; $('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+ (i*10)) ); }; 

Une réponse simple consiste à utiliser un PNG blanc transparent à 50% sur la couleur:

 div { background-color:red; } div:hover { background-image:url('lighten.png'); } 

Où lighten.png est un PNG d’un remplissage blanc avec 50% de transparence.

Vous pouvez utiliser RGBa («a» étant la transparence alpha), mais ce n’est pas encore largement supporté. Ce sera , cependant, pour que vous puissiez l’utiliser maintenant et append un repli:

 a:link { color: rgb(0,0,255); } a:link.lighter { color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */ } a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */ color: rgba(0,0,255,0.5); /* last value is transparency */ } 

Pas directement, non. Mais vous pouvez utiliser un site, tel que colorschemedesigner.com , qui vous donnera votre couleur de base, puis vous donnera les codes hexadécimaux et rgb pour différentes gammes de votre couleur de base.

Une fois que je trouve mes schémas de couleurs pour mon site, je mets les codes hexadécimaux pour les couleurs et les nomme dans une section de commentaires en haut de ma feuille de style.

Parmi les autres générateurs de couleurs, citons:

Essayer:

 a { color: hsl(240, 100%, 50%); } a:hover { color: hsl(240, 100%, 70%); } 

Je sais qu’il est tard, mais vous pouvez utiliser un wrapper pour vos boutons et changer le niveau d’opacité de la fonction couleur rgba, comme indiqué dans d’autres réponses, mais sans exemple explicite.

Voici un stylo:

https://codepen.io/aronkof/pen/WzGmjR

 #wrapper { width: 50vw; height: 50vh; background-color: #AAA; margin: 20px auto; border-radius: 5px; display: grid; place-items: center; } .btn-wrap { background-color: #000; display: inline-block; } button { transition: all 0.6s linear; background-color: rgba(0, 255, 0, 1); border: none; outline: none; color: #fff; padding: 50px; font-weight: 700; font-size: 2em; } button:hover { background-color: rgba(0, 255, 0, .5); } 
 

Voir mon commentaire sur la réponse de Ctford.

Je pense que le moyen le plus simple d’alléger une couleur serait de prendre chacun des composants RVB, d’append à 0xff et de diviser par 2. Si cela ne donne pas les résultats exacts que vous voulez, prenez 0xff moins la valeur actuelle multipliée par une constante puis rappend à la valeur actuelle. Par exemple, si vous souhaitez déplacer 1/3 du chemin vers le blanc, prenez (0xff – courant) / 3 + courant.

Vous devriez jouer avec pour voir quels résultats vous avez obtenus. Je crains que, avec cette simple formule, un facteur suffisamment important pour que les couleurs sombres s’affaiblissent légèrement puisse rendre les couleurs claires complètement blanches, alors qu’un facteur suffisamment petit pour que les couleurs claires s’éclairent un peu pourrait ne pas éclaircir suffisamment les couleurs sombres.

Pourtant, je pense que passer d’une fraction de distance au blanc est plus prometteur qu’un nombre fixe d’étapes.

Vous pouvez utiliser une bibliothèque JavaScript telle que JXtension qui donne à l’utilisateur la possibilité de rendre une couleur plus claire ou plus sombre. Si vous souhaitez trouver de la documentation pour cette nouvelle bibliothèque, cliquez ici . Vous pouvez également utiliser JXtension pour combiner une couleur avec une autre.

Il semble que jPaq ( http://jpaq.org/ ) remplace JXtension. L’avantage d’utiliser jPaq est le fait que vous ne pouvez télécharger que ce dont vous avez besoin au lieu de la bibliothèque JavaScript complète. Voici un lien vers la page de téléchargement pour la classe Color: http://jpaq.org/download/1.0.0.1008 .

J’ai trouvé une classe PHP qui me permettait de faire ce côté serveur. Je viens de sortir un style de couleur CSS en ligne pour tout ce dont j’ai besoin pour être plus clair / plus foncé. Fonctionne très bien.

http://www.barelyfitz.com/projects/csscolor/

(notez que la classe utilise PEAR pour les erreurs de jet, mais je ne voulais pas inclure PEAR juste pour modifier les couleurs, alors j’ai juste supprimé toutes les références PEAR)

Je l’ai transformé en une classe statique avec des méthodes statiques pour pouvoir appeler directement les fonctions “éclaircir” et “assombrir” sans créer de nouvel object.

Exemple d’utilisation:

 $original_color = 'E58D8D'; $lighter_color = Css::lighten($original_color, .7); $darker_color = Css::darken($original_color, .7); 

J’ai écrit un plugin pour jquery qui conteste ce même problème. Je prends la couleur comme une propriété, ou la couleur de la propriété css qu’ils veulent, et l’exécute à travers des calculs. Hex to RGB, puis multipliez le pourcentage de décalage, puis renvoyez une nouvelle valeur. Faites-moi savoir si vous voulez un exemple.

Le tout réuni, une solution de table faite uniquement avec DIV et CSS, essayez-le;) Le navigateur devrait cependant prendre en charge les couleurs RGBA ….

     
First Line
FL C2
FL C3>
Second Line
SL C2
SL C3>
Third Line
TL C2
TL C3>
Forth Line
FL C2
FL C3>
Fifth Line
FL C2
FL C3>
Sixth Line
SL C2
SL C3>
Seventh Line
SL C2
SL C3>
Eight Line
EL C2
EL C3>
Nineth Line
NL C2
NL C3>
Tenth Line
TL C2
TL C3>

Pour les CSS nommés “blue”, il y a “lightblue”

Pour ‘green’, il y a ‘lightgreen’

Pour ‘gris’, il y a ‘lightgrey’

Pour ‘jaune’, il y a ‘lightyellow’

Essayez de parcourir ce css nommé liste de couleurs pour plus d’informations: http://www.w3schools.com/CSS/css_colornames.asp