Belirli bir renk nasıl daha koyu veya daha açık hale getirilir?

Bu resmim var:

Oklar iki farklı renk gösterir, ancak aslında aynı renkte olmalılar ama biraz daha açık veya koyu olmalıdırlar.

Yaptığım uygulamanın bu ekran görüntüsünü yaptım ve kenarlardaki kahverengimsi renk sadece 30 ile toplanan mavi renktir. Gördüğünüz gibi hile yapmaz, yani gerçek renge 30 eklemek herkes için işe yaramaz renkler.

Belirli bir rengi nasıl gölgeleyebilirim, yani onu daha parlak veya daha koyu yapabilir miyim?

Ayrıca alfa ile yarı saydam görünmesini istiyorsam ne yapmalıyım?

Güzel soru.

Onaltılık değerlerle çalışmak için RGB değerlerinin göreli oranı açısından düşünmeniz gerekir.

Sayılarla bir ölçek kullanacağım, harflerle değil, arkasındaki matematiği görebilelim.

Bir portakalın olduğunu hayal et.

R255 G128 B0 değerine sahip olabilirsiniz

Daha koyu bir renk istiyorsanız, değerleri% 50 oranında azaltmanız gerekir.

Bu size R128 G64 B0 Tüm renklerin orantılı bir ölçek kullanılarak değiştirildiğini bildirir.

Daha karmaşık bir renk olabilir R255 G200 B100 Koyulaştıralım , ancak önceki durum kadar değil. Sadece% 80'i koyulaştıralım.

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

Bir rengi daha açık hale getirmek için fikir hemen hemen aynıdır, ancak renkler daha zordur, çünkü renkler 255'te kapanır, böylece 255 ile değerleriniz arasındaki farkı düşünebilirsiniz.

Örneğin aynı portakal

R255 G128 B0

Artık R'yi artıramazsınız ve Yeşil ve maviyi aynı değerlerle, örneğin 100 daha fazla artıramazsınız, çünkü

R255 G228 B100

çok sarı.

Matematik

1) 255 ile mevcut değer arasındaki fark (R255 G128 B0): R0 G127 B255

2) % 50 daha açık bir portakal yapalım

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

4) Bunu başlangıç ​​değerinize ekleyin: R255 + 0 G128 + 64 B0 + 128 = R255 G192 B128.

Size temel fikri vermek için bir resim ekliyorum. RGB değerleri metnimle aynı değil, sadece tembel bir çalışma nedeniyle, ancak turuncu "merdivenlerin" içsel oranlarını koruduğunu görebilirsiniz.

Düzenlenen

Ben çok aptalım. HSL Renk gösterimini de kullanabilirsiniz:

{background-color: hsl (45,% 60,% 70);} ve daha koyu renkler için üçüncü rengi ve daha açık renkler için üçüncü rengi değiştirin.

Alfa eklemek için bir hsla varyantı da kullanabilirsiniz.

Bazı şeyleri biraz yanlış anladınız, javaScript rengi onaltılık olarak modellemiyor, sistem de yok. Onaltılı gösterim yalnızca okunabilir belge içindir. Dahili olarak sisteminiz üç tamsayı değer depolar. Bunları doğrudan sorgulayabilir ve değiştirebilirsiniz.

Ancak diyelim ki sistem içi yerine gerçek belgeyi değiştirmek istiyorsunuz. Ardından, hesaplamanızı bunu sizin için yapan bir kütüphaneye ertelemek en iyisidir. Tarayıcının renkleri birçok şekilde temsil edebildiğini görüyorsunuz, bu nedenle reklam rgb ve hsv girişleri gibi her türlü durumu programlamanız gerekir. Bu nedenle, Color.js gibi bir şey kullanmanızı öneririm , size çok fazla baş ağrısı kazandırır, çünkü karıştırma, karartma, aydınlatma vb.

Edity:

Bunu kendiniz yapmak istiyorsanız, ben tavsiye etmiyorum. Onaltılık gösterimi, 0-1 aralığında tamsayıların veya kayan nokta sayılarının sayısal üçlülerine dönüştürerek başlayın, bu hesaplamayı kolaylaştırır.

Artık rengin kolayca manipüle edilmesi için RGB değerlerini HSL veya HSB'ye dönüştürmek, parlaklık hesaplamalarını önemsiz hale getirir (Wikipedia'nın formülasyonları vardır). Bu yüzden sadece hafiflik veya parlaklık ekleyin veya çıkarın. Gerçek ışık simülasyonu için hesaplama yeterince kolaydır, sadece açık rengi temel renkle çarpın. Böylece nötr ışık için basitçe:

Sonuç = Yoğunluk * Renk

Rafael'in açıkladığı gibi, formül renk kanalı tarafından tekrarlandı. Yaparak renkli ışığı simüle edebilirsiniz

Sonuç = Yoğunluk * LigtColor * Renk

Bu ilk önce float dönüştürmek için, belki de doğrusal. Bu, bölgenizde daha doğal bir his getirebilecek sıcak veya soğuk ışığa izin verir.

Alfa harmanlama (üst üste renk katmanı)

Sonuç = ColorTop * alfa + ColorBottom * (1-alfa)

Son Düzenleme

Son olarak, sorduğunuza doğru bir şeyler yapan bir kod. Bunun görülmesinin zor olmasının nedeni, şu andaki soyut biçimidir. Canlı kod burada bulunabilir

Resim 1 : Aşağıdaki kod sonucu ayrıca canlı sürüme de bakınız .

{
  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, aslında çoğu zaten stackoverfow üzerinde bulunabilir, çünkü stackoverflow sormalısınız.

Bir rengin koyuluğunu / parlaklığını elle ve hatta bakmadan değiştirmek istiyorsanız manuel olarak. hex veya rgb'de gerçekten kolaydır, sadece her kanala eşit miktarda ışık ekleyin veya hafifçe soyutlayın.
Rgb diyelim ki 132.145.167 aynı rengin daha açık bir versiyonunu elde etmek için her sayıya 30 ekleyebilirsin, yani 162.175.207 ve eğer biraz farkına varırsan, bunu biraz yaptım eğer 160.173.205. Hex ile aynı, ancak hex sayılarla. yani e4c3d5 e4 c3 d5'tir, f4d3e5'i daha hafif yapmak için 16 ekleyebilir veya aynı renkte d4b3c5'in daha koyu bir sürümünü yapmak için 16 çıkarabilirsiniz.
Her üç kanala (her üç sayıya) aynı miktarı eklediğiniz sürece, istediğiniz miktarı ekleyebilir veya alt özet ekleyebilirsiniz. çok beyaz ekleyin veya karışımdan çıkarın.