Rastgele Renk Kombinasyonu Üreteci: Uyumlu Renk Paletleri

Renk paleti oluşturucu nasıl kullanılır?

Uyum kuralı menüsünden paletin mantığını seçin; varsayılan kural Analog'dur. Renk sayısı menüsünden 3, 4 veya 5 (varsayılan) renk seçebilirsiniz. İki menüden birini değiştirdiğinizde ya da Yeni palet düğmesine bastığınızda yeni bir palet oluşur.

Renkler yan yana şeritler hâlinde gösterilir ve her şeridin üzerinde HEX kodu yazar. Kodun rengi, arka plana göre okunur kalacak şekilde otomatik olarak koyu veya beyaz seçilir. Koda tıklamak onu panoya kopyalar. Tümünü kopyala düğmesi ise kodları #3A6EA5, #4F8BC9, ... biçiminde virgülle ayrılmış olarak verir.

Paletler tamamen tarayıcınızda üretilir; rastgele başlangıç rengi sitedeki diğer araçlarda da kullanılan crypto.getRandomValues ile seçilir. Hiçbir palet kaydedilmez, beğendiğiniz sonucu kopyalamayı unutmayın.

Uyumlu renkler nasıl bulunur? Beş uyum kuralı

Renk çarkı, tonları bir daire üzerinde sıralar: 0° kırmızı, yaklaşık 120° yeşil, yaklaşık 240° mavi. Uyum kuralları, başlangıç renginden bu çark üzerinde belirli açılarla uzaklaşarak diğer renkleri bulur.

Tasarım kaynaklarında "dörtlü" (tetradik) bazen dikdörtgen biçimli bir düzen için de kullanılır; bu araç eşit 90° aralıklı kare düzeni uygular.

Paletler nasıl oluşturulur?

Araç önce 0–359 derece arasında rastgele bir ton ve %45–84 arasında rastgele bir doygunluk seçer. Sonra seçtiğiniz kuralın açılarını bu tona ekleyerek diğer tonları bulur ve her rengi HSL değerlerinden HEX koduna çevirir.

Renklerin birbirinin kopyası gibi durmaması için açıklık değerleri kasıtlı olarak farklı tutulur: paletteki renkler kabaca %30 ile %80 arasında değişen açıklıklara yayılır ve her birine küçük bir rastgele sapma eklenir. Doygunluk da renkten renge ±10 puan oynar. Böylece aynı kural her seferinde biraz farklı bir karakterde palet üretir.

Tek renk tonları kuralında ton ve doygunluk sabittir; yalnızca açıklık %30, %42, %55, %68 ve %80 adımlarıyla artar. Bu, bir rengin koyudan açığa dizilmiş bir skalasını verir.

Renk sayısı, kuralın bazı renklerini dışarıda bırakabilir veya tekrarlayabilir. Örneğin Dörtlü kuralında 3 renk seçerseniz karedeki dört tonun yalnızca üçü gelir; Tamamlayıcı kuralında ise iki karşıt ton farklı açıklıklarla tekrar eder. Kuralın tam hâlini görmek için Dörtlü'de 4, Üçlü'de 3 renk seçin.

Kıyafet ve dekorasyonda renk kombinasyonu

Renk çarkı kuralları yalnızca ekran tasarımında değil, kombin yaparken veya bir odanın renklerini seçerken de aynı mantıkla işler. Komşu (analog) renkler sakin ve bütünlüklü bir görünüm verir; karşıt (tamamlayıcı) renkler ise dikkat çeker, bu yüzden birini geniş alanda, diğerini küçük bir ayrıntıda kullanmak daha dengeli durur. Tek renk tonları kuralı, aynı rengin açık ve koyu tonlarıyla sade bir görünüm isteyenler için uygundur.

Ekrandaki bir renk, kumaşta ya da duvar boyasında aynı görünmez; ışık, malzemenin dokusu ve üreticinin renk kartelası sonucu değiştirir. Paleti fikir edinmek için kullanın, boya veya kumaş seçerken ise üreticinin gerçek renk örneğine bakın.

Paleti kullanırken ipuçları

Okunabilirlik ve kontrast

Güzel görünen her renk çifti okunaklı değildir. Metin ile arka plan arasında yeterli parlaklık farkı olmalıdır. Web erişilebilirlik yönergesi WCAG, AA düzeyinde normal metin için en az 4,5:1, büyük metin için en az 3:1 kontrast oranı önerir. Paletten metin rengi seçerken genellikle en koyu ve en açık tonları eşleştirin; orta tonları arka plan veya süs öğeleri için saklayın.

60-30-10 kuralı

Tasarımda sık başvurulan bir pratik kurala göre alanın yaklaşık %60'ı baskın renge, %30'u destekleyici renge, %10'u vurgu rengine ayrılır. Örneğin açık bir ton arka planda, orta bir ton kartlarda ve başlıklarda, en canlı ton ise düğmelerde kullanılabilir. Bu kesin bir standart değil; paleti dengeli dağıtmak için bir başlangıç noktasıdır.

Rengi tek bilgi taşıyıcısı yapmayın

Renk körlüğü olan kullanıcılar bazı ton farklarını ayırt edemeyebilir. Hata, başarı veya grafik serileri gibi anlamlı bilgileri yalnızca renkle değil, simge, etiket veya desenle de gösterin.

Küçük düzeltmeler yapın

Üretilen palet bir başlangıçtır. Bir rengi biraz koyulaştırmak veya soldurmak için renk kodu üreticisi sayfasındaki HEX, RGB, HSL ve CMYK açıklamalarından yararlanabilirsiniz. HSL'de yalnızca açıklık değerini değiştirmek, rengin karakterini bozmadan tonunu ayarlamanın kolay bir yoludur.

Paleti CSS'e aktarma

Tümünü kopyala ile aldığınız kodları web projenizde CSS değişkenleri olarak tanımlarsanız renkleri tek yerden yönetebilirsiniz. Aşağıdaki örnekte değerleri kendi paletinizdeki kodlarla değiştirin:

:root {
  --renk-baskin: #F4F1EA;   /* yaklaşık %60: arka plan */
  --renk-destek: #3A6EA5;   /* yaklaşık %30: başlıklar, kartlar */
  --renk-vurgu:  #E07A2E;   /* yaklaşık %10: düğmeler */
}
.dugme { background: var(--renk-vurgu); }

Böylece daha sonra paleti değiştirmek istediğinizde tüm sayfayı dolaşmak yerine yalnızca bu üç satırı güncellemeniz yeterli olur.

Neden rastgele palet?

Bir marka rengine veya tek bir tona takılıp kaldığınızda rastgele paletler farklı seçenekleri hızla görmenizi sağlar. Birkaç kez Yeni palet düğmesine basmak, sıfırdan renk seçmekten çoğu zaman daha çabuk fikir verir. Kuralın uyumu sağladığını, rastgeleliğin ise çeşitliliği getirdiğini düşünebilirsiniz.

Bilgisayarların rastgeleliği nasıl ürettiğini merak ediyorsanız bilgisayar biliminde rastgelelik yazısını okuyabilirsiniz. Diğer ücretsiz araçlar için araçlar sayfasına, güçlü bir şifre için şifre üreticiye göz atın.