Javascript Rastgele Renk Üretme

Tasarım yaparken farklı renklere ihtiyacımız olabilir. Bu renkleri hazır bir listeden seçebileceğimiz gibi rastlantısal olarak da oluşturabiliriz. Şimdi bu iki farklı yolu Javascript ile nasıl yapacağımızı ayrı ayrı inceleyelim.

Javascript İle Bir Renk Listesinden Rastgele Renk Seçmek

İlk olarak elimizde olan bir renk listesinden rastgele renk seçmeyi inceleyelim. Bunun için öncelikle elimizde renk bilgilerini tutan bir dizinin olması gereklidir. Elimizdeki renk dizisini oluşturalım.

const renkler = ['white', 'black', 'red', 'pink', 'yellow', 'pink', 'blue', 'gray', 'green'];

Renkleri bir web sayfası üzerindne kullanacağımızdan Html renk kodları ile renkler dizisini oluşturduk. Ayrıca RGB renk kodlarını da kullanabilirdik.

Elimizde renk bilgilerini içeren bir array olduğuna göre artık bu array içerisinden rastgele bir renk seçelim. Bunun için öncelikle dizinin boyutuna ihtiyacımız var. Sonrasında Javascript Math.random metodunu kullanarak rastgelen bir indeks değeri oluşturacağız ve bu indeksteki rengi geri döndereceğiz.

const uzunluk = renkler.lenght;
const indeks = Math.round(Math.random() * uzunluk);
const renk = renkler[indeks];

console.log(renk);
// Konsola renkler dizisinden bir renk yazıdır.

Burada indeks bilgisini alırken

const indeks = Math.round(Math.random() * uzunluk)

şeklinde bir ifade kullandık. Bunun anlamı şudur.

• İlk olarak Math.radom ile 0 ile 1 arasında rastgele bir sayı oluştur ki bu sayı kesirlidir.
• Sonra renkler dizisinin uzunluğu ile çarp. Böylece dizi eleman sayısından fazla bir değer oluşmasını önle.
• Elde edilen kesirli sayıyı Math.floor ile tam sayıya çevir.

Asıl önemli olan bu alanın çalışmasıdır. Bunu anladığımızda rastgelen bir indeks değerini almayı öğrenmiş oluyoruz. Öyleyse artık bu indeksi kullanarak dizi üzerinden rengi alalım.

const renk = renler[index];

Kodumuzu bir fonksiyonu çevirerek tam olarak yazalım.

const renkler = ['white', 'black', 'red', 'pink', 'yellow', 'pink', 'blue', 'gray', 'green'];

const renkSec = () => {
    const uzunluk = renkler.length;
    const indeks = Math.floor(Math.random() * uzunluk);
    const renk = renkler[indeks];
    return renk;
}

console.log(renkSec());
// Konsola renkler dizisinden bir renk yazdırır.

Daha önce dediğimiz gibi renk dizisi ya Html renk adlarını veya da RGB renk değerlerini içermek durumunda. Böylece oluşan renk değerini bir Html etiketi için kullanabiliriz.

Javascript İle Rastgele Renk Oluşturmak

Şimdi Javascript kullanarak rastgele bir renk nasıl oluşturacağımızı görelim. Renk oluştururken RGB renk değerini oluşturacağız ve bu renk tamamen rastgele üretilecek. Yani bir dizi veya başka bir yerden renk değeri alınmayacak.

Html RGB renk kodları 0 – 16777216 değerleri arasındadır. Bu değer onluk sayı sistemine göredir.

Bizim oluşturacağımız renk kodu bu aralıkta olmak zorundadır. Sonra bu değeri onaltılık sayı sistemine çevireceğiz.

İlk olarak rastgele renk değerini oluşturalım.

const renkDegeri = Math.floor(Math.random() * (16777216 + 1));
console.log(renkDegeri);
// Konsola 0 ile 16777216 arasında
// bir değer yazdırılacaktır.

Renk değerimizi oluşturduğumuza göre bu değeri stringe çevirelim ve bu işlemi yaparken onaltılık sayı sisteminin kullanılmasını isteyelim. Bunun için

const renkRGB = renkDegeri.toString(16)

ifadesini kullanmamız yeterli olacaktır. Renk değerimiz RGB değerinde olduğuna göre başına # işareti ekleyerek RGB renk değerini oluşturalım.

const renkHTML = "#" + renkRGB;

Artık renk değerimizi Html etiketleri ile kullanabiliriz.

Tüm kodu birlikte yazalım.

const renkDegeri = Math.floor(Math.random() * (16777216 + 1));
const renkRGB = renkDegeri.toString(16)
const renkHTML = "#" + renkRGB;
console.log(renkHTML);
// #1312AA gibi bir RGB renk kodu yazdırır.

Burada bir sorunumuz var oluşturduğumuz renk kodu rastgele olduğu ve 0 dan başladığı için oluşturulan renk bazı durumlarda #5 gibi olacaktır. O zaman bunu 6 basamaklı yani #000005 olacak şekilde düzenlemek gerekecektir.

Şimdi yukarıdaki hatayı da düzelten bir ve rastgele renk üretme işlemini yapan bir fonksiyon yazalım.

const renkUret = () => {
    // Rastgele renk RGB renk değeri oluşturalım.
    let renk = Math.floor(Math.random() * (16777216 + 1)).toString(16).toUpperCase();
    // Oluşturduğumuz değerin karakter sayısı
    // 6 dan küçük ise baştarafını
    // 0 ile dolduralım.
    while(renk.length < 6) renk = "0" + renk;
    // Renk kodunun başına # ekleyelim
    renk = "#" + renk;
    // Tam rengi regi dönderelim
    return renk;
}

console.log(renkUret());
// Konsola rastgele üretilmiş 
// RGB değerinde bir Html renk kodu yazdırır.

Artık istediğimiz gibi Javascript ile rastgele renk üretebiliriz.

Sonuç

Javascript ile rastgele renk üretmek için farklı yöntemler kullanılabilir. Biz bu yazımızda bir listeden renk seçmeyi ve de tamamen rastgele renk oluşturmayı gösterdik. Her iki yöntemde de Math.random metodunu kullandık.

Javascript ile yaşadığınız deneyimleri bizimle yorumlardan paylaşabilirsiniz.