Rastgele Renk Üreteci

Hex Renk Kodları Nedir?

Web'de renkler genellikle hexadecimal (16'lık taban) formatında gösterilir. #RRGGBB formatında, her iki karakter bir renk bileşenini (R=Kırmızı, G=Yeşil, B=Mavi) temsil eder.

• #FFFFFF = Beyaz (tüm renkler maksimum)
• #000000 = Siyah (tüm renkler sıfır)
• #FF0000 = Kırmızı (sadece kırmızı maksimum)
• #00FF00 = Yeşil (sadece yeşil maksimum)
• #0000FF = Mavi (sadece mavi maksimum)

1. Hex Karakter Dizisi

Hex renk kodları 0-9 ve A-F karakterlerini kullanır:

const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
// Index:  0  1  2  3  4  5  6  7  8  9  10   11   12   13   14   15

// Her karakter 0-15 arası bir değeri temsil eder
// 0-9: sayılar
// A-F: 10-15 arası değerler

2. Rastgele Sayı Üretme

Math.random() fonksiyonu 0 ile 1 arasında rastgele bir sayı üretir:

function getRandomNumber() {
  // Math.random() → 0 ile 1 arası (örn: 0.54321)
  // hex.length → 16
  // Math.random() * 16 → 0 ile 16 arası (örn: 8.69136)
  // Math.floor() → en yakın tam sayıya yuvarla (örn: 8)
  return Math.floor(Math.random() * hex.length);
}

// Örnekler:
Math.random()                    // 0.234567
Math.random() * 16               // 3.753072
Math.floor(Math.random() * 16)   // 3 (0-15 arası)

3. Hex Renk Kodu Oluşturma

6 karakterli hex kodu oluşturmak için döngü kullanılır:

function generateHexColor() {
  let hexColor = "#";  // Başlangıç
  
  // 6 karakter için döngü
  for (let i = 0; i < 6; i++) {
    const randomIndex = getRandomNumber();
    const hexChar = hex[randomIndex];
    hexColor += hexChar;  // String'e ekle
  }
  
  return hexColor;
}

Adım Adım Örnek:

// İterasyon 1: hexColor = "#" + "F" = "#F"
// İterasyon 2: hexColor = "#F" + "A" = "#FA"
// İterasyon 3: hexColor = "#FA" + "3" = "#FA3"
// İterasyon 4: hexColor = "#FA3" + "B" = "#FA3B"
// İterasyon 5: hexColor = "#FA3B" + "0" = "#FA3B0"
// İterasyon 6: hexColor = "#FA3B0" + "C" = "#FA3B0C"

// Sonuç: #FA3B0C

4. String Concatenation (Birleştirme)

+= operatörü string'in sonuna karakter ekler:

let str = "Hello";
str += " World";  // str = "Hello World"

// Alternatif:
str = str + " World";  // Aynı sonuç

5. DOM Manipülasyonu ile Renk Değiştirme

Oluşturulan renk kodunu hem metin hem de arka plan rengi olarak uygula:

const hexColor = "#FA3B0C";

// Metin rengini değiştir
colorElement.style.color = hexColor;

// Metin içeriğini güncelle
colorElement.textContent = hexColor;

// Arka plan rengini değiştir
colorPaletteElement.style.backgroundColor = hexColor;

6. Math.floor() vs Math.ceil() vs Math.round()

Farklı yuvarlama yöntemleri:

Math.floor(3.7)  // 3 (aşağı yuvarla)
Math.ceil(3.2)   // 4 (yukarı yuvarla)
Math.round(3.5)  // 4 (en yakın tam sayıya yuvarla)

// Rastgele sayılar için Math.floor() kullanılır
// çünkü 0-15 arası index istiyoruz

Gelişmiş Örnekler

RGB Formatı ile:

function generateRGBColor() {
  const r = Math.floor(Math.random() * 256);  // 0-255
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  
  return `rgb(${r}, ${g}, ${b})`;
}

Belirli Bir Ton Aralığı:

// Sadece koyu renkler (0-7 arası)
function generateDarkColor() {
  const darkHex = [0, 1, 2, 3, 4, 5, 6, 7];
  let hexColor = "#";
  
  for (let i = 0; i < 6; i++) {
    const randomIndex = Math.floor(Math.random() * darkHex.length);
    hexColor += darkHex[randomIndex].toString(16).toUpperCase();
  }
  
  return hexColor;
}

Önemli Noktalar

• Rastgelelik: Her çağrıda farklı bir renk üretilir
• Eşit Dağılım: Tüm renkler eşit olasılıkla seçilir
• Hex Formatı: # işareti ile başlamalıdır
• Büyük Harf: Hex kodları genelde büyük harfle gösterilir