Comment rendre une couleur donnée un peu plus foncée ou plus claire?

J'ai cette photo:

Les flèches montrent deux couleurs différentes mais en fait elles devraient être de la même couleur mais un peu plus claires ou plus foncées.

J'ai fait cette capture d'écran de l'application que je fais et la couleur brunâtre sur les bords n'est que la couleur bleue additionnée de 30. Comme vous pouvez le voir, cela ne fait pas l'affaire, c'est-à-dire que l'ajout de 30 à la couleur réelle ne fonctionnera pas pour tous couleurs.

Comment puis-je simplement nuancer une couleur donnée, c'est-à-dire la rendre plus claire ou plus foncée?

Aussi, que dois-je faire si je veux qu'il soit semi-transparent avec alpha?

Cool question.

Pour travailler avec des valeurs hexadécimales, vous devez penser en termes de proportion relative des valeurs RVB.

Je vais utiliser une échelle en chiffres, pas avec des lettres, afin que nous puissions voir les mathématiques derrière.

Imaginez que vous ayez une orange.

Vous pouvez avoir une valeur de R255 G128 B0

Si vous voulez une couleur plus foncée, vous devez réduire les valeurs par exemple à 50%

Cela vous donnera R128 G64 B0 Notez que toutes les couleurs ont été modifiées à l'aide d'une échelle proportionnelle.

Une couleur plus complexe pourrait être R255 G200 B100 Laissez-nous l'assombrir mais pas autant que le cas précédent. Laissez-nous simplement l'assombrir de 80%.

R255x0,8 G200x0,8 B100x0,8 = R204 G160 B80

Pour éclaircir une couleur, l'idée est à peu près la même, mais c'est plus délicat car les couleurs plafonneront à 255, vous pouvez donc réfléchir à la différence entre le 255 et vos valeurs.

Par exemple la même orange

R255 G128 B0

Vous ne pouvez plus augmenter R, et vous ne pouvez pas augmenter le vert et le bleu avec les mêmes valeurs, par exemple 100 de plus, car vous aurez

R255 G228 B100

qui est trop jaune.

Le calcul serait

1) La différence de 255 à la valeur actuelle (R255 G128 B0) est: R0 G127 B255

2) Faisons une orange plus claire de 50%

3) Rx50% Gx50% Bx50% = R0 G64 B128

4) Ajoutez cela à votre valeur initiale: R255 + 0 G128 + 64 B0 + 128 = R255 G192 B128.

J'ajoute une image pour vous donner l'idée de base. Les valeurs RVB ne sont pas les mêmes que celles de mon texte, juste parce qu'un travail paresseux, mais vous pouvez voir que les "escaliers" orange conservent leurs proportions intrinsèques.

Édité

Je suis tellement stupide. Vous pouvez également utiliser la notation HSL Color:

{background-color: hsl (45, 60%, 70%);} et modifiez la troisième couleur pour les couleurs plus foncées, et la deuxième et la troisième pour les plus claires.

Vous pouvez également utiliser une variante hsla pour inclure alpha.

Vous avez un peu mal compris, javaScript ne modélise pas la couleur en hexadécimal, pas plus que le système. La notation hexadécimale est juste pour le document lisible par l'homme. En interne, votre système stocke trois valeurs entières. Vous pouvez les interroger et les manipuler directement.

Mais disons simplement que vous voulez manipuler le document réel au lieu des internes du système. Ensuite, il est préférable de reporter votre calcul à une bibliothèque qui le fait pour vous. Vous voyez que le navigateur peut représenter les couleurs de plusieurs façons, vous devrez donc programmer toutes sortes de cas, comme les entrées ad rgb et hsv. Je vous suggère donc d'utiliser quelque chose comme Color.js, cela vous évite beaucoup de maux de tête, car vous n'avez pas besoin d'implémenter vous-même le mélange, l'assombrissement, l'éclaircissement, etc.

Edity:

Au cas où vous voudriez le faire vous-même, ce que je ne recommande pas. Commencez par transformer la représentation hexadécimale en triplets numériques d'entiers ou de nombres à virgule flottante dans la plage 0-1, ce qui facilite le calcul.

Maintenant, pour une manipulation facile des valeurs RVB de conversion de couleur en HSL ou HSB, cela rend les calculs de luminosité triviaux à faire (Wikipedia a des formulations). Il suffit donc d'ajouter ou de soustraire la luminosité ou la luminosité. Pour une simulation de lumière réelle, le calcul est assez facile, il suffit de multiplier la couleur de la lumière par la couleur de base. Ainsi, pour la lumière neutre, c'est simplement:

Résultat = intensité * couleur

Comme Rafael l'a expliqué, formule répétée par canal de couleur. Vous pouvez simuler la lumière colorée en faisant

Résultat = Intensité * LigtColor * Couleur

Pour que ce meilleur convertisse d'abord, il peut être linéaire également. Cela permet une lumière chaude ou froide sur votre zone, ce qui peut apporter une sensation plus naturelle.

Le mélange alpha (superposition de couleurs sur les autres) est tout simplement

Résultat = ColorTop * alpha + ColorBottom * (1-alpha)

Édition finale

Enfin, voici un code qui fait quelque chose par rapport à ce que vous demandez. La raison pour laquelle cela est difficile à comprendre est que son type d'abrégé sous forme en ce moment. Code en direct disponible ici

Image 1 : Résultat du code ci-dessous voir aussi la version live .

{
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    var Color = function(r, g, b) {
      this.r = r;
      this.g = g;
      this.b = b;
    }
    Color.prototype.asHex = function() {
      return "#" + ((1 << 24) + (this.r << 16) + (this.g << 8) + this.b).toString(16).slice(1);
    }
    Color.prototype.asRGB = function() {
      return 'rgb(' + this.r + ',' + this.g + ',' + this.b + ')';
    }
    Color.prototype.blendWith = function(col, a) {
      r = Math.round(col.r * (1 - a) + this.r * a);
      g = Math.round(col.g * (1 - a) + this.g * a);
      b = Math.round(col.b * (1 - a) + this.b * a);
      return new Color(r, g, b);
    }
    Color.prototype.Mul = function(col, a) {
      r = Math.round(col.r/255 * this.r * a);
      g = Math.round(col.g/255 * this.g * a);
      b = Math.round(col.b/255 * this.b * a);
      return new Color(r, g, b);
    }
    Color.prototype.fromHex = function(hex) {
      // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
      hex = hex.substring(1,7)
      var bigint = parseInt(hex, 16);
      this.r = (bigint >> 16) & 255;
      this.g = (bigint >> 8) & 255;
      this.b = bigint & 255;
    }

    ctx.font = "16px Arial";
    ctx.fillText("Manual Alpha Blend", 18, 20);

    var a = new Color(220, 0, 150);

    var b = new Color();
    b.fromHex('#00C864');

    //Alpha blend
    ctx.fillStyle = a.asHex();
    ctx.fillRect(25, 25, 100, 100);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(a.asHex(), 30, 45);
    ctx.fillStyle = b.asRGB()
    ctx.fillRect(50, 50, 100, 100);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(a.asHex(), 55, 145);
    var bl = a.blendWith(b, 0.3);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(50, 50, 75, 75);
    ctx.fillStyle = '#FFFFFF';
    ctx.fillText(bl.asHex(), 55, 70);

    // lighten 1

    ctx.fillStyle = '#000000';
    ctx.fillText('Neutral Light', 200, 20);

    var c = new Color(100, 100, 100);
    var purelight= new Color(255, 255, 255);

    ctx.fillStyle = c.asRGB();
    ctx.fillRect(200, 25, 100, 100);

    var bl = c.Mul(purelight,1.2);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(225, 50, 100, 100);

    var bl = c.Mul(purelight, 0.8);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(250, 75, 100, 100);

     // lighten 2

    ctx.fillStyle = '#000000';
    ctx.fillText('Yellowish Light', 400, 20);

    var c = new Color(100, 100, 100);
    var yellowlight= new Color(255, 255, 220);

    var bl = c.Mul(yellowlight,1.0);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(400, 25, 100, 100);

    var bl = c.Mul(yellowlight,1.2);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(425, 50, 100, 100);

    var bl = c.Mul(yellowlight, 0.8);
    ctx.fillStyle = bl.asRGB();
    ctx.fillRect(450, 75, 100, 100);
  }
}

PS, vous devriez demander sur stackoverflow car la plupart de cela peut en fait déjà être trouvé sur stackoverfow.

Manuellement si vous souhaitez modifier l'obscurité / luminosité d'une couleur à la main et sans même la regarder. en hexadécimal ou rgb est vraiment facile il suffit d'ajouter ou de soustraire une quantité égale de lumière à chaque canal.
Dites en RVB que vous avez 132,145,167 ans, vous pouvez ajouter 30 à chaque numéro pour obtenir une version plus claire de la même couleur, donc 162,175,207, et si vous vous rendez compte que vous l'avez fait par un peu, puis soustrayez 2 de chacun, donc 160,173,205. Idem avec hex mais en nombre hexadécimal. donc e4c3d5 est e4 c3 d5 vous pouvez ajouter 16 pour le rendre plus léger f4d3e5 ou soustraire 16 pour rendre la version plus sombre de la même couleur d4b3c5.
Vous pouvez ajouter ou soustraire autant que vous le souhaitez, et vous deviendrez mieux à deviner la bonne quantité à ajouter et à soustraire des heures supplémentaires, tant que vous ajoutez la même quantité aux trois canaux (les trois nombres), vous ne changerez que la façon dont beaucoup de blanc que vous ajoutez ou retirez du mélange.