Bir maket, grafik veya boş bir tuval için renge mi ihtiyacınız var ve alışkanlıkla bir renk seçmek yerine başka bir yol mu istiyorsunuz? Bu ücretsiz rastgele renk oluşturucu, bir ekranın gösterebileceği tam 24 bitlik aralıktan renkler çeker ve her birini kodunun yanında bir renk örneğine yerleştirir. Adet alanında kaç renk istediğinizi seçin — 1 ile 50 arasında herhangi bir sayı — ihtiyacınız olan biçimleri işaretleyin ve Oluştur düğmesine basın. Sayfa HEX cinsinden tek bir renkle açılır, böylece ilk sonuç tek bir tıklama uzaklıktadır. HEX Kodu onay kutusu en baştan işaretlidir, yanında RGB Kodu ve HSL Kodu onay kutuları bulunur ve üçünün herhangi bir kombinasyonu aynı anda açılabilir. Oluştur düğmesinin yanındaki dişli düğmesi Gelişmiş Seçenekler bölümünü açar; burada renkleri tek bir türe veya aralığa sınırlayabilir, tekrarları engelleyebilir ve HEX'in nasıl yazıldığını değiştirebilirsiniz.
Her renk, tarayıcınızda Web Crypto API (crypto.getRandomValues) aracılığıyla oluşturulur; bu API, Math.random() gibi bir sözde rastgele işlev yerine, sisteminizin kendi rastgelelik kaynağından kriptografik olarak güçlü rastgele baytlar sağlar. Ekrandaki bir renk üç kanaldan oluşur — kırmızı, yeşil ve mavi —, her biri 0 ile 255 arasında bir tam sayıdır ve bir rastgele bayt tam olarak 256 değer alabilir. Yani her kanal basitçe bir bayttır, ara adım yoktur: kalan alınmaz ve hiçbir dönüştürme adımı herhangi bir tonu kayırmaz. Bu, sayfanın üretebileceği tüm 16.777.216 rengi, siz her Oluştur düğmesine bastığınızda tam olarak eşit olasılıklı kılar. Gelişmiş Seçenekler bölümündeki daha dar bir aralık bu özelliği aralık içinde de korur: renkler yine de tüm uzaydan çekilir ve dışında kalanlar atlanır, böylece aralığın izin verdiği her renk aynı şansa sahip olur. Hiçbir şey bir sunucuya gönderilmez, hiçbir şey kaydedilmez ve sayfa yüklendikten sonra bağlantı kesilse bile çalışmaya devam eder.
Üç format aynı rengi üç farklı şekilde tanımlar. HEX Kodu biçimi, #0778ff gibi CSS'de ve çoğu tasarım aracında kullanılan altı basamaklı bir biçimdir; küçük harflerle ve başında bir # ile yazılır ve Gelişmiş Seçenekler bölümündeki Büyük harfler ve # olmadan seçenekleri bunu farklı bekleyen araçlar için değiştirir. RGB Kodu biçimi, rgb(7, 120, 255) örneğindeki gibi üç kanalı ayrıntılı olarak yazar; bu, her kanalı ayrı ayrı işleyen kodlara uygundur. HSL Kodu biçimi, hsl(213, 100%, 51%) örneğindeki gibi rengi ton, doygunluk ve parlaklık üzerinden tanımlar — bu, daha sonra elle ayarlaması en kolay biçimdir. Üçü de doğrudan bir stil sayfasına yapıştırılabilir. Ancak eşit derecede hassas değillerdir. HEX ve RGB tamdır; HSL yuvarlanmıştır. Sayfa ton, doygunluk ve parlaklığı tam sayı olarak yazar ve renklerin yaklaşık %89'unda bu yuvarlanmış değer geri dönüştürüldüğünde tam olarak aynı rengi vermez: #646503, hsl(61, 94%, 20%) olarak gösterilir, bu da geri dönüştürüldüğünde #616303 verir. Fark bir kanalda hiçbir zaman 5 adımdan fazla değildir ve genellikle 1 veya 2'dir — ekranda görünmez, ama HSL değerini kaydedip orijinal HEX değerine geri dönmeyi beklerseniz gerçektir. Bu yüzden HEX veya RGB değerini kaydedin.
Tek bir renk, sonucun ortasında tek bir kutucuk olarak görünür; birden fazla renk ise numaralandırılmış bir liste olarak görünür, satır başına bir renk, seçilen biçimler yan yana ve sonunda küçük bir kontrast rozeti ile birlikte. Üçten fazla renk içeren bir liste kutunun içinde kayar ve köşesindeki ok onu tam yüksekliğe açar; sayfa onu en son nasıl bıraktığınızı hatırlar. Yalnızca o kodu kopyalamak için herhangi bir koda tıklayın. Bir satırın sonundaki kopyalama düğmesi, o rengin tüm kodlarını boşluklarla ayrılmış tek bir satırda kopyalar. Renk örneğinin kendisine tıklayın, tarayıcınızın kendi renk seçicisi açılır: orada başka bir renk seçin ve o satırdaki tüm kodlar, açtığınız her biçimde, rozetiyle birlikte buna uyacak şekilde yeniden yazılır. Tümünü kopyala düğmesi tüm grubu, satır başına bir renk olacak şekilde kopyalar ve Dosyaya kaydet düğmesi aynı metni sade bir .txt dosyasına yazar; ikisi de seçicide değiştirdiğiniz herhangi bir rengi dikkate alır. Geçmiş bölümü son 10 grubunuzu bu tarayıcıda, tam olarak üretildikleri şekilde saklar ve Temizle düğmesi sonucu boşaltır. Gelişmiş Seçenekler bölümündekiler dahil ayarlarınız, bir sonraki ziyaretiniz için hatırlanır.
Eşit olasılıklı renkler eşit dağılmış gibi görünmez ve ne bekleyeceğinizi bilmek, Oluştur düğmesine yanlış nedenle basmanızı önler. Tüm aralıkta ölçüldüğünde, renklerin yaklaşık %35'i canlı ve doygundur, en az %70 HSL doygunluğu ve %35 ile %65 arasında bir parlaklıkla. Doygunluğu %20'nin altında olan neredeyse gri renkler yalnızca yaklaşık %4'tür ve çok koyu renkler (parlaklık %20'nin altında) ve çok açık renkler (%80'in üzerinde) her biri yaklaşık %3'tür. Bu yüzden Tüm renkler seçeneğinden alınan on renklik bir grup genellikle birkaç güçlü renk içerir ve nadiren pastel ya da antrasit bir renk içerir. Belirli bir türe ihtiyacınız olduğunda, Renk türü alanından seçin: Canlı seçeneği tam olarak bu gruba karşılık gelir; Pastel, Koyu, Donuk ve Gri tonlama seçenekleri de kendi gruplarına. Özel seçeneği, Ton, Doygunluk ve Parlaklık için kendi aralıklarınızı belirlemenizi sağlar ve bir ton aralığı 0'dan geçebilir, böylece 330'dan 30'a kadar olan aralık kırmızı tonları verir. Aralık, sayfanın gösterdiği HSL koduna göre kontrol edilir, böylece hiçbir kod bunun dışında kalmaz ve Adet değeriniz için çok az renk içeriyorsa, sayfa renkleri tekrar etmek yerine aralığı genişletmenizi ister. Bunun dışında tekrarlar mümkündür ama nadirdir: bunları hariç tutmak için Tekrarsız seçeneğini işaretleyin; bu seçenek olmadan tüm aralıktaki 50 renkten ikisinin aynı çıkma olasılığı yaklaşık 13.700'de 1'dir.
Rastgele bir renk genellikle arka plan olarak kullanılır, bu da bir renk örneğinin gözle yanıtlayamayacağı tek soruyu ortaya çıkarır: üzerindeki metin okunaklı olacak mı? Web erişilebilirlik kılavuzu WCAG, normal metin için en az 4,5:1 kontrast oranı ister. Bu sayfanın üretebileceği tüm renklerde ölçüldüğünde, siyah metin bunlardan yaklaşık %65'inde bu orana ulaşır ve beyaz metin yaklaşık %36'sında ve ikisinin de başarısız olduğu hiçbir renk yoktur: ikisinden daha iyi olanı her zaman en az 4,58:1'e ulaşır. Bu yüzden herhangi bir rastgele arka plan için siyah veya beyaz metin gereksinimi karşılar ve sayfa size hangisinin karşıladığını gösterir. Her rengin yanında, iki metin renginden daha okunaklı olanıyla Aa yazan küçük bir rozet görünür, ardından kontrast oranı gelir. Oran aşağı yuvarlanır, böylece bir rengi asla olduğundan iyi göstermez ve seçicide rengi değiştirdiğinizde güncellenir. Rozet yalnızca siyah ve beyaz metni karşılaştırır; bir marka rengi veya başka herhangi bir metin rengi için, ikisini bir kontrast denetleyicisinden geçirin.
Rastgelelik, uyumlu olmakla aynı şey değildir. Bir gruptaki her renk, diğerleri hakkında bilgi olmadan bağımsız olarak çekilir, bu yüzden oluşturucu tasarımcı anlamında bir palet asla oluşturmaz — tamamlayıcı çift yoktur, analog dizi yoktur, paylaşılan parlaklık yoktur. Daha dar bir aralık bir grubun karakterini değiştirir, bu kuralı değil: pasteller veya bir mavi tonları dizisi yine de birer birer gelir, onları birbirine bağlayan hiçbir şey olmadan. Asıl amaç da budur: size kendi seçmeyeceğiniz rengi verir ve bir alışkanlığı veya yaratıcı bir tıkanıklığı kıran da tam olarak budur. Rastgele bir buluşu kullanılabilir bir şeye dönüştürmek için, tüm bir set tesadüfen uyuşana kadar Oluştur düğmesine basmak yerine beğendiğiniz rengi koruyun ve onu temel alarak ilerleyin. Tonunu sabit tutun ve daha açık ve daha koyu varyantlar için parlaklığı kademeli olarak değiştirin veya kontrast bir renk için tonu 180 derece döndürün. HSL Kodu biçimi, bu hamleleri tahmin yerine aritmetiğe dönüştürür.
Neden bu rastgele renk oluşturucuyu seçmelisiniz?
- Her renk tarayıcınızda Web Crypto API ile üretilir, hiçbir şey yüklenmez
- Tüm 16.777.216 renk tam olarak eşit olasılıklı, kanal başına bir rastgele bayt
- Aynı renk için HEX, RGB ve HSL kodları, herhangi bir kombinasyonda
- Aynı anda 50 renge kadar, her biri metin kontrast rozetli bir renk örneğinde
- Canlı, Pastel, Koyu, Donuk ve Gri tonlama veya kendi ton, doygunluk ve parlaklık aralığınız
- İhtiyacınız olduğunda tekrarsız ve HEX büyük harflerle veya # olmadan
- Kopyalamak için bir koda tıklayın veya tarayıcınızın renk seçicisinde herhangi bir rengi değiştirin
- Tümünü kopyala, Dosyaya kaydet ve tarayıcınızda saklanan son 10 grubunuzun Geçmiş kaydı
- Ücretsiz ve sınırsız: kayıt yok, kota yok, sunucularımızda hiçbir şey saklanmaz
Rastgele renkler, henüz kimse karar vermeden bir renge ihtiyaç duyulan her yerde işe yarar. Tasarımcılar, yaratıcı bir tıkanıklığı aşmak ve olağan paletlerinin asla ulaşamayacağı bir başlangıç noktası bulmak için bunları kullanır. Geliştiriciler maketleri, yer tutucuları ve avatarları doldurur, gerçek tema henüz belirlenmemişken bir grafikteki her seriye kendi rengini verir ve bir arayüzün tasarlanmadığı arka planlarla nasıl başa çıktığını test eder — Tüm renkler seçeneğinden alınan 50 renklik bir grup neredeyse her zaman en az bir çok koyu veya çok açık renk içerir ve Koyu ya da Pastel seçeneği testi bu uçlardan birine yöneltir. Üretken sanatçılar ve oyun prototipleri hazırlayanlar, değerleri doğrudan koda besler; burada RGB biçimi çoğu grafik kütüphanesine uyar. Öğretmenler, bir rengin bir kod olarak, üç kanal olarak veya bir renk çarkındaki bir konum olarak yazılabileceğini ve HSL sürümünün neden yuvarlandığını göstermek için üç biçimi yan yana koyar. Ve bir listeyi etiketleyen, sınıflandıran veya renklerle kodlayan herkes, hangisini seçeceğini düşünüp durmadan farklı renkler elde eder.
Bilinmesi gereken birkaç dürüst sınırlama vardır. Bu bir oluşturucudur, bir palet aracı değil: renk uyumları oluşturmaz ve diğerleri değişirken bir rengi sabit tutmaz ve daha dar bir aralık birbirine uyacak şekilde seçilmiş renkler değil, tek bir türden renkler verir. Kontrast rozeti yalnızca siyah ve beyaz metni karşılaştırır. Sayfa, bir ekranın gösterdiği sRGB renkleriyle çalışır — HEX, RGB ve HSL — şeffaflık olmadan ve CMYK, Pantone, OKLCH veya isimlendirilmiş CSS renkleri olmadan; baskı için, bir ekran koduna güvenmek yerine rengi baskı sürecinizde eşleştirin. Aynı kod, bir ekrandan diğerine biraz farklı görünebilir, çünkü ekranlar aynı şekilde kalibre edilmemiştir. HSL değerleri yukarıda açıklandığı gibi yuvarlanmıştır ve Tekrarsız seçeneği işaretli değilse, grup tekrar açısından kontrol edilmez. Sayfanın gerçekten garanti ettiği şey daha dar ve kesindir: 16.777.216 renginden her biri veya belirlediğiniz aralık içindeki her renk, her tıklamada aynı şansa sahiptir; renkler tarayıcınızın kriptografik kaynağından çekilir ve hiçbir yere gönderilmez.