Changez dynamiquement la couleur en plus clair ou plus foncé par pourcentage CSS

Question

Nous avons une grande application sur le site et nous avons quelques liens qui sont, disons de couleur bleue comme les liens bleus sur ce site. Maintenant, je veux créer d'autres liens, mais avec une couleur plus claire. Je peux évidemment le faire simplement en ajoutant le code hexadécimal dans le fichier CSS, mais notre site laisse l'utilisateur décider des couleurs qu'il souhaite pour son profil/site personnalisé (comme Twitter).

Ma question est donc la suivante : peut-on 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 reducing it
}

Existe-t-il un moyen de réduire une couleur par un pourcentage ?

Answer 1

Tous les navigateurs modernes ont 100% filter soutien depuis janvier 2020 . Même UC Browser pour Android (au lieu de Chrome, sur les téléphones à 80 $) le prend en charge.

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

En outre, vous pouvez contrôler cela de manière dynamique avec des variables CSS, qui sont prises en charge par la plupart des navigateurs. depuis octobre 2017 (à l'exclusion de QQ) :

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

Ce n'est pas mon projet, mais c'est un exemple concret de l'efficacité des CSS modernes : MVP.css

---

Réponse originale

Si vous utilisez une pile qui vous permet d'utiliser la fonction Sass o Moins vous pouvez utiliser l'option lighten fonction :

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

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

Il y a aussi darken qui fait la même chose, mais dans la direction opposée.

Answer 2

Il existe une "opacité" qui permet de faire ressortir l'arrière-plan :

opacity: 0.5;

mais je ne suis pas sûr que ce soit ce que vous voulez dire. Définissez "réduire la couleur" : Rendre transparent ? Ou ajouter du blanc ?

Answer 3

Les couleurs HSL apportent une réponse, une valeur de couleur HSL est spécifiée avec : hsl(hue [0,255], saturation %, lightness %).

HSL est supporté dans IE9+, Firefox, Chrome, Safari, et dans Opera 10+.

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

Answer 4

Dans LESS, vous utiliseriez les variables suivantes :

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

Cette méthode prend la première variable et l'éclaircit de 20 % (ou de tout autre pourcentage). Dans cet exemple, vous obtiendrez une couleur plus claire : #ccc

Answer 5

Pour autant que je sache, il n'y a aucun moyen de faire cela en CSS.

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

1. Vérifier un paramètre 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 afin de pouvoir conserver le cache du CSS.
2. Décomposer la couleur en ses composantes rouge, verte et bleue.
3. Augmentez chacun des trois composants d'une quantité déterminée. Faites des essais pour obtenir les résultats que vous recherchez.
4. Générer un CSS incorporant la nouvelle couleur

Les liens vers cette page génératrice de CSS ressembleraient à quelque chose comme :

<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">

Si vous n'utilisez pas l'extension .css, veillez à définir correctement le type MIME afin que le navigateur sache qu'il doit interpréter le fichier comme un fichier CSS.

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