Rastgele Renk Kodu Üretici: HEX, RGB, HSL ve CMYK

Rastgele renk seçici nasıl kullanılır?

Kaç renk? menüsünden 1, 3 (varsayılan), 6 veya 12 renk seçin. Menüyü değiştirdiğinizde ya da Yeni renkler düğmesine bastığınızda yeni bir renk grubu üretilir.

Her renk bir kart olarak görünür. Kartın üst kısmı rengin kendisiyle boyanır ve üzerinde HEX kodu yazar. Yazı rengi, okunabilir kalması için arka planın parlaklığına göre otomatik olarak koyu veya beyaz seçilir. Kartın altında dört format sıralanır; her satırdaki Kopyala düğmesi o değeri panoya alır.

Araç her rengin kırmızı, yeşil ve mavi bileşenini 0–255 arasında bağımsız olarak seçer. Rastgelelik kaynağı, sitedeki diğer araçlarda olduğu gibi tarayıcının crypto.getRandomValues fonksiyonudur. Renkler tamamen tarayıcınızda üretilir.

Renk kodları: HEX, RGB, HSL ve CMYK farkı

Aynı renk farklı sistemlerde farklı biçimde yazılır. Araç her rengi aşağıdaki dört biçimde verir:

HEX renk kodu nedir?

HEX kodu, RGB değerlerinin onaltılık (0–9, A–F) yazımıdır. İlk iki hane kırmızıyı, sonraki ikisi yeşili, son ikisi maviyi gösterir. FF onluk sistemde 255, 00 ise 0 demektir. Araç HEX kodlarını büyük harfle yazar; CSS'te büyük ve küçük harf aynı anlama gelir.

RGB renk kodu nedir?

RGB, ekranların renk üretme biçimine karşılık gelir: kırmızı, yeşil ve mavi ışık 0 ile 255 arasında karıştırılır. Üç bileşen de 255 olduğunda beyaz, üçü de 0 olduğunda siyah elde edilir. Bu "toplamalı" renk modelidir.

HSL

HSL rengi insanın düşünme biçimine daha yakın anlatır: ton (renk çarkında 0–360 derece; 0 kırmızı, 120 yeşil, 240 mavi), doygunluk (%0 gri, %100 en canlı) ve açıklık (%0 siyah, %50 saf renk, %100 beyaz). Bir rengin daha açık veya daha soluk bir versiyonunu istediğinizde yalnızca bir değeri değiştirmeniz yeter.

Sayfanın eski adresinde HSV geçer. HSV (HSB olarak da bilinir) benzer bir modeldir ama üçüncü değeri farklı hesaplar; bazı grafik programlarının renk seçicileri bunu kullanır. Araç, CSS'te doğrudan yazılabildiği için HSL gösterir.

CMYK

CMYK baskıda kullanılan camgöbeği (cyan), eflatun (magenta), sarı (yellow) ve siyah (key) mürekkeplerinin yüzdesidir. Mürekkepler ışığı emdiği için bu model "çıkarmalı"dır.

Buradaki CMYK değerleri RGB'den basit bir formülle hesaplanır; kâğıt türü, mürekkep ve baskı makinesi hesaba katılmaz. Ekranda parlak görünen bazı renkler baskıda aynı canlılıkta elde edilemez. Kesin sonuç için tasarım programınızda matbaanın renk profiliyle dönüşüm yapın.

Siyah, beyaz, kırmızı, mavi: temel renklerin HEX ve RGB kodları

"Kırmızı" ya da "mavi" dediğimiz her rengin sayısız tonu vardır, dolayısıyla tek bir kodu yoktur. Web'de ortak bir başlangıç noktası olarak CSS standardındaki adlandırılmış renkler kullanılır. Aşağıdaki değerler W3C'nin CSS Color Module Level 4 belgesindeki adlandırılmış renk tablosundan alınmıştır; CSS'te rengin İngilizce adını (ör. red) yazmak, HEX kodunu yazmakla aynı sonucu verir.

Dikkat: CSS'teki green saf yeşil değil, orta koyulukta bir yeşildir; ekranın en parlak yeşili lime (#00FF00) olarak adlandırılır. Antrasit, bordo gibi tonların standart bir CSS adı yoktur; bu renkler için markanızın veya boya üreticisinin verdiği kodu kullanın.

Kopyaladığınız kodu CSS'te kullanma

HEX, RGB ve HSL biçimleri CSS'te doğrudan çalışır; üçü de aynı rengi verir. Kopyaladığınız değeri bir özelliğe yapıştırmanız yeterlidir:

.kart {
  background-color: #1E90FF;
  border-color: rgb(30, 144, 255);
  color: hsl(210, 100%, 56%);
}

CMYK ise CSS'te kullanılmaz; bu değerleri InDesign, Illustrator gibi baskıya yönelik programlarda veya matbaayla konuşurken başlangıç noktası olarak kullanın. RGB'de her bileşen 256 değer alabildiği için toplam 16.777.216 farklı renk vardır ve araç bunların her birini eşit olasılıkla üretebilir.

Rastgele renkler nerede işe yarar?

• Tasarımda ilham arayışı: alışkın olmadığınız renk tonlarını görmek.
• Grafik ve tablolarda veri serilerine geçici renk atamak.
• Test verisi, yer tutucu görseller ve arayüz denemeleri.
• Oyunlarda ve eğitim etkinliklerinde rastgele takım veya kart rengi seçmek.

Birbiriyle uyumlu renkler arıyorsanız tamamen rastgele renkler yerine renk çarkı kurallarını kullanan renk kombinasyonu üreticisini deneyin.

JavaScript ile rastgele renk kodu

Kendi sayfanızda rastgele renk üretmek için birkaç satır yeterlidir. Aşağıdaki fonksiyon 0 ile 16.777.215 (FFFFFF) arasında bir sayı seçip altı haneli HEX koduna çevirir:

function rastgeleHex() {
  const sayi = Math.floor(Math.random() * 0x1000000); // 0 ile 16.777.215 arası
  return '#' + sayi.toString(16).padStart(6, '0').toUpperCase();
}

function rastgeleRgb() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

document.body.style.backgroundColor = rastgeleHex();

padStart(6, '0') önemlidir: küçük sayılarda baştaki sıfırlar kaybolur ve #FF gibi geçersiz bir kod oluşur. Sayfadaki bir düğmeye bağlamak için (rastgeleHex fonksiyonu aynı sayfada tanımlı olmalı):

<div id="kutu" style="width:200px;height:200px"></div>
<button type="button" id="degistir">Renk değiştir</button>
<script>
  document.getElementById('degistir').addEventListener('click', () => {
    document.getElementById('kutu').style.backgroundColor = rastgeleHex();
  });
</script>

Tamamen rastgele renkler bazen çamurlu veya çok koyu çıkar. Daha dengeli sonuç için yalnızca tonu rastgele seçip doygunluk ve açıklığı sabit tutabilirsiniz: `hsl(${Math.floor(Math.random() * 360)}, 70%, 55%)`.

Math.random renk, animasyon veya oyun gibi işler için yeterlidir ama tahmin edilebilir olmaması gereken değerler için tasarlanmamıştır. Şifre, PIN veya doğrulama kodu üretirken crypto.getRandomValues kullanın. Örnek kod için JavaScript ile rastgele şifre üretici, konunun arka planı için kriptografi ve rastgelelik yazılarına bakabilirsiniz.

Bilgisayarın "rastgele" sayıyı nasıl ürettiğini bilgisayar biliminde rastgelelik yazısında okuyabilirsiniz. Diğer ücretsiz araçlar için araçlar sayfasını, güvenli bir şifre için şifre üreticiyi ziyaret edebilirsiniz.