Como tornar uma determinada cor um pouco mais escura ou mais clara?

Eu tenho esta foto:

As setas mostram duas cores diferentes, mas na verdade devem ser da mesma cor, mas um pouco mais claras ou mais escuras.

Eu fiz essa captura de tela do aplicativo que eu faço e a cor marrom nas bordas é apenas a cor azul resumida em 30. Como você pode ver, isso não funciona, ou seja, adicionar 30 à cor real não funcionará para todos cores.

Como posso sombrear uma determinada cor, ou seja, torná-la mais brilhante ou mais escura?

Além disso, o que devo fazer Se eu quiser parecer semitransparente com alfa?

Pergunta legal.

Para trabalhar com valores hexadecimais, você precisa pensar em termos de proporção relativa dos valores RGB.

Usarei uma escala em números, não em letras, para que possamos ver a matemática por trás disso.

Imagine que você tem uma laranja.

Você pode ter um valor de R255 G128 B0

Se você quiser uma cor mais escura, precisará reduzir os valores, por exemplo, em 50%

Isso fornecerá a você R128 G64 B0 Observe que todas as cores foram modificadas usando uma escala proporcional.

Uma cor mais complexa pode ser R255 G200 B100 Vamos escurecê- la, mas não tanto quanto no caso anterior. Vamos escurecer um 80%.

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

Para tornar uma cor mais clara, a idéia é praticamente a mesma, mas é mais complicado porque as cores terão limite de 255, para que você possa pensar na diferença entre os 255 e os seus valores.

Por exemplo, a mesma laranja

R255 G128 B0

Você não pode aumentar R mais e não pode aumentar o verde e o azul com os mesmos valores, por exemplo, mais 100, porque terá

R255 G228 B100

que é muito amarelo.

A matemática seria

1) A diferença de 255 para o valor atual (R255 G128 B0) é: R0 G127 B255

2) Vamos fazer uma laranja mais clara em 50%

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

4) Adicione isso ao seu valor inicial: R255 + 0 G128 + 64 B0 + 128 = R255 G192 B128.

Estou adicionando uma imagem para fornecer a idéia básica. Os valores RGB não são os mesmos do meu texto, apenas porque é um trabalho preguiçoso, mas você pode ver que as "escadas" alaranjadas mantêm suas proporções intrínsecas.

Editado

Eu sou tão burra. Você também pode usar a notação HSL Color:

{background-color: hsl (45, 60%, 70%);} e modifique a terceira cor para cores mais escuras e a segunda e terceira para as mais claras.

Você também pode usar uma variante hsla para incluir alfa.

Você entendeu um pouco as coisas, o javaScript não modela a cor como hexadecimal, nem o sistema. A notação hexadecimal é apenas para o documento legível por humanos. Internamente, seu sistema armazena três valores inteiros. Você pode consultar e manipular esses diretamente.

Mas digamos que você deseja manipular o documento real em vez dos internos do sistema. Então é melhor adiar seu cálculo para alguma biblioteca que faz isso por você. Você vê que o navegador pode representar cores de várias maneiras; portanto, é necessário programar todos os tipos de casos, como entradas ad rgb e hsv. Então, sugiro que você use algo como o Color.js , para evitar muita dor de cabeça, pois você não precisa implementar misturas, escurecimento, iluminação, etc ... você mesmo.

Edity:

Caso você queira fazer isso sozinho, o que eu não recomendo. Comece transformando a representação hexadecimal em trigêmeos numéricos de números inteiros ou números de ponto flutuante no intervalo 0-1, para facilitar a computação.

Agora, para facilitar a manipulação dos valores de conversão de cores RGB em HSL ou HSB, isso facilita os cálculos de brilho (a Wikipedia possui formulações). Então, basta adicionar ou subtrair a luminosidade ou o brilho. Para simulação de luz real, o cálculo é fácil o suficiente, basta multiplicar a cor da luz pela cor de base. Assim, para luz neutra, é simplesmente:

Resultado = Intensidade * Cor

Como Rafael explicou, fórmula repetida por canal de cores. Você pode simular a luz colorida fazendo

Resultado = Intensidade * LigtColor * Cor

Para isso, é melhor converter primeiro para flutuar, talvez também linear. Isso permite luz quente ou fria na sua área, o que pode trazer uma sensação mais natural.

A mistura alfa (camada de cor sobre a outra) é simplesmente

Resultado = ColorTop * alfa + ColorBottom * (1-alfa)

Edição final

Finalmente, aqui está um código que faz algo em relação ao que você pergunta. A razão pela qual isso é difícil de entender é que seu tipo de resumo está em forma no momento. Código ao vivo disponível aqui

Imagem 1 : Resultado do código abaixo, veja também a versão ao vivo .

{
  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: você deve perguntar no stackoverflow, já que quase tudo isso já pode ser encontrado no stackoverfow.

Manualmente, se você quiser alterar a escuridão / brilho de uma cor manualmente e sem sequer olhar para ela. em hexadecimal ou rgb é realmente fácil, basta adicionar ou subtrair uma quantidade igual de luz a cada canal.
Digamos que em rgb você tenha 132.145.167, você pode adicionar 30 a cada número para obter uma versão mais clara da mesma cor para 162.175.207, e se você perceber que fez isso apenas um pouco, subtraia 2 de cada um para 160.173.205. Mesmo com hexadecimal, mas em números hexadecimais. então e4c3d5 é e4 c3 d5, você pode adicionar 16 para torná-lo mais claro f4d3e5 ou subtrair 16 para criar uma versão mais escura da mesma cor d4b3c5.
Você pode adicionar ou subtrair o quanto quiser e adivinhar a quantidade certa para adicionar e subtrair horas extras, desde que você adicione a mesma quantidade a todos os três canais (todos os três números), você só mudará a forma como muito branco você adiciona ou remove da mistura.