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


9

Eu tenho esta foto:

cores

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.

cores reais

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?


Estou votando para fechar esta questão como fora de tópico, porque ela deve ser solicitada no stackoverflow.
Joojaa 29/07

3
Tecnicamente, ainda é uma questão de design gráfico, já que discutimos matemática por trás de cores e cores de sombreamento, produzindo diferentes variantes de cores.
Vlad

11
não, discutimos a conversão hexadecimal. Eu ficaria bem com uma questão de cores, mas você vinculou isso tão fortemente ao seu ambiente de computação que não satisfaz mais sua reivindicação. Então você especificou demais para se tornar uma questão de javascript e marcação de marcação e isso não é design gráfico.
Joojaa 29/07

11
Não, a pergunta está correta, o que devo fazer para tornar uma cor mais escura ou mais brilhante. A conversão em valor hexadecimal é uma adição útil, mas não uma necessidade.
Vlad

11
Eu não vou discutir. Eu não entendo as cores e como elas funcionam, eu estava pedindo um "como fazer", não um pedaço de código que alguém codifique para mim.
Vlad

Respostas:


12

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.

insira a descrição da imagem aqui

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.


Offcourse se este é um navegador seu completamente capaz de calcular isso para você
joojaa

Sim, um aplicativo JS / navegador. Mas Js não reconhece a cor formatada # 345464. Eu uso parseInt (hashString.replace ('#', ''), 16); onde hashString é uma cor em formato CSS como # 345464.
Vlad

Você traduz seus números como quiser. Eu disse que estava usando números para que você possa ver a matemática por trás disso. Mas o princípio é o mesmo. 8 é a metade da F.
Rafael

E você sempre pode usar a notação rgba (255,128,0,1).
24577 Rafael

Atualmente, eu uso o elemento Canvas e ele é JS puro, sem CSS embutido. Mas tive uma ideia de como resolver isso com código.
Vlad

2

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

insira a descrição da imagem 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.


Esta biblioteca pode ser autônoma?
Vlad

@ Vlad certeza que não vejo razão para não.
Joojaa 29/07

Eu tentei, ele usa alguns módulos do NodeJS, mas não quero tornar o aplicativo pesado em bibliotecas de terceiros. Vou tentar fazer meu próprio código.
Vlad

@Vlad adicionado algum código para você couro cabeludo
joojaa

: D uau, trabalho fantástico!
Vlad

1

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.


Legal! Isso foi tão fácil e útil para um não codificador!
amigos estão dizendo sobre brookdancer
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.