Bagaimana membuat warna yang diberikan sedikit lebih gelap atau lebih terang?

Saya punya gambar ini:

Panah menunjukkan dua warna yang berbeda tetapi sebenarnya mereka harus memiliki warna yang sama tetapi sedikit lebih terang atau lebih gelap.

Saya membuat screen-shot dari aplikasi yang saya buat dan warna kecoklatan di tepinya hanyalah warna biru yang dijumlahkan dengan 30. Seperti yang Anda lihat itu tidak melakukan trik, yaitu menambahkan 30 ke warna yang sebenarnya tidak akan bekerja untuk semua warna.

Bagaimana saya bisa menaungi warna tertentu yaitu membuatnya lebih terang atau lebih gelap?

Juga apa yang harus saya lakukan Jika saya ingin terlihat semi transparan dengan alpha?

Pertanyaan keren

Untuk bekerja dengan nilai heksadesimal, Anda perlu memikirkan proporsi relatif dari nilai RGB.

Saya akan menggunakan skala dalam angka, bukan dengan huruf, sehingga kita bisa melihat matematika di baliknya.

Bayangkan Anda memiliki jeruk.

Anda dapat memiliki nilai R255 G128 B0

Jika Anda ingin warna yang lebih gelap Anda perlu mengurangi nilai-nilai misalnya pada 50%

Ini akan memberi Anda R128 G64 B0 Perhatikan bahwa semua warna telah dimodifikasi menggunakan skala proporsional.

Warna yang lebih kompleks adalah R255 G200 B100. Mari kita menggelapkannya tetapi tidak sebanyak kasus sebelumnya. Mari kita menggelapkannya satu 80%.

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

Untuk membuat satu warna lebih terang idenya hampir sama, tetapi lebih rumit karena warnanya akan mencapai 255, jadi Anda bisa memikirkan perbedaan antara nilai 255 dengan nilai Anda.

Misalnya jeruk yang sama

R255 G128 B0

Anda tidak dapat menambah R lagi, dan Anda tidak dapat meningkatkan Hijau dan biru dengan nilai yang sama, misalnya 100 lebih, karena Anda akan memiliki

R255 G228 B100

yang terlalu kuning.

Matematika itu akan

1) Perbedaan dari 255 ke nilai saat ini (R255 G128 B0) adalah: R0 G127 B255

2) Mari kita buat jeruk yang lebih ringan sebesar 50%

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

4) Tambahkan nilai awal Anda: R255 + 0 G128 + 64 B0 + 128 = R255 G192 B128.

Saya menambahkan gambar untuk memberi Anda ide dasar. Nilai RGB tidak sama dengan teks saya, hanya karena pekerjaan malas, tetapi Anda dapat melihat bahwa "tangga" oranye mempertahankan proporsi intrinsectnya.

Diedit

Saya sangat bodoh. Anda juga dapat menggunakan notasi Warna HSL:

{background-color: hsl (45, 60%, 70%);} dan memodifikasi warna ketiga untuk warna yang lebih gelap, dan yang kedua dan ketiga untuk yang lebih terang.

Anda juga dapat menggunakan varian hsla untuk menyertakan alpha.

Anda memiliki sedikit kesalahpahaman, javaScript tidak memodelkan warna sebagai heksadesimal, begitu pula sistem. Notasi heksadesimal hanya untuk dokumen yang dapat dibaca manusia. Secara internal sistem Anda menyimpan tiga nilai integer. Anda dapat mempertanyakan dan memanipulasi mereka secara langsung.

Tapi katakan saja Anda ingin memanipulasi dokumen yang sebenarnya, bukan internal sistem. Maka yang terbaik untuk menunda perhitungan Anda ke beberapa perpustakaan yang melakukan ini untuk Anda. Anda melihat browser dapat mewakili warna dalam banyak hal sehingga Anda perlu memprogram semua jenis kasir seperti input rgb dan hsv. Jadi saya sarankan Anda menggunakan sesuatu seperti Color.js menghemat banyak sakit kepala, karena Anda tidak perlu menerapkan pencampuran, penggelapan, penerangan dll ... sendiri.

Edity:

Jika Anda ingin melakukan ini sendiri, yang saya tidak rekomendasikan. Mulailah dengan mengubah representasi heksadesimal menjadi triplet numerik bilangan bulat atau angka floating point dalam rentang 0-1 ini membuat komputasi lebih mudah.

Sekarang untuk manipulasi warna yang mudah mengkonversi nilai RGB ke HSL atau HSB ini membuat perhitungan kecerahan sepele untuk dilakukan (Wikipedia memiliki formulasi). Jadi, tambahkan saja atau kurangi terang atau terang. Untuk simulasi cahaya nyata perhitungannya cukup mudah, cukup gandakan warna terang dengan warna dasar. Jadi untuk cahaya netral itu cukup:

Hasil = Intensitas * Warna

Seperti yang dijelaskan Rafael, formula diulang dengan saluran warna. Anda dapat mensimulasikan cahaya berwarna dengan melakukan

Hasil = Intensitas * LigtColor * Warna

Untuk ini yang terbaik untuk mengkonversi ke float dulu, mungkin linier juga. Ini memungkinkan cahaya hangat atau dingin di area Anda yang dapat menghadirkan nuansa yang lebih alami.

Alpha blending (layerimg warna di atas yang lain) sederhana

Hasil = ColorTop * alpha + ColorBottom * (1-alpha)

Edit Terakhir

Akhirnya di sini ada beberapa kode yang melakukan sesuatu terhadap apa yang Anda minta. Alasan mengapa ini sulit dilihat adalah karena bentuknya yang abstrak saat ini. Kode langsung tersedia di sini

Gambar 1 : Hasil kode di bawah ini lihat juga versi 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 Anda harus bertanya pada stackoverflow karena sebagian besar dari ini sebenarnya dapat ditemukan di stackoverfow.

Secara manual jika Anda ingin mengubah kegelapan / kecerahan warna dengan tangan dan bahkan tanpa melihatnya. dalam hex atau rgb sangat mudah cukup tambahkan atau kurangi jumlah cahaya yang sama untuk setiap saluran.
Katakanlah di rgb Anda memiliki 132.145.167 Anda dapat menambahkan 30 untuk setiap nomor untuk mendapatkan versi yang lebih ringan dari warna yang sama jadi 162.175.207, dan jika Anda sadar Anda berlebihan melakukannya dengan hanya sedikit maka kurangi 2 dari masing-masing jadi 160.173.205. Sama dengan hex tetapi dalam angka hex. jadi e4c3d5 adalah e4 c3 d5 Anda dapat menambahkan 16 untuk membuatnya lebih ringan f4d3e5 atau kurangi 16 untuk membuat versi yang lebih gelap dari warna yang sama d4b3c5.
Anda dapat menambah atau mengurangi sebanyak yang Anda inginkan, dan Anda akan lebih baik dalam menebak jumlah yang tepat untuk ditambahkan dan mengurangi lembur, selama Anda menambahkan jumlah yang sama untuk ketiga saluran (ketiga angka) Anda hanya akan mengubah caranya banyak putih yang Anda tambahkan atau hapus dari campuran.