Renk şeması oluşturucu

Nasıl kullanılır

1. Sayfa açıldığında ekranda bir şema ve açıklık basamağı hazır — varsayılan ana renk #4F46E5 ile kurulur; ilk sonuç için tıklamanıza gerek yok.
2. Rengi kendinizinkine dönüştürün: #4F46E5, rgb(79, 70, 229), hsl(243, 75%, 59%) veya İngilizce bir CSS renk adı yapıştırın, sistem seçicisini kullanın ya da “Rastgele ana renk”e basın. Siz yazdıkça her şey yeniden hesaplanır.
3. Tonların nasıl ilişkili olacağını seçin. Benzeşen (0°, ±30°, ±60°) komşulukta kalır; Tamamlayıcı (0°, 180°) tam karşıttır; Üçlü (0°, 120°, 240°) ve Dörtlü (0°, 90°, 180°, 270°) yayılımı genişletir; Bölünmüş tamamlayıcı (0°, 150°, 210°) çarpışma olmadan gerilimi korur. Basamak her zaman ana rengin 88 / 70 / 52 / 34 / 18% açıklıktaki hâlidir, yani “ana rengimin daha açık/koyu versiyonu” tek dokunuş uzağınızda.
4. Herhangi bir örneğe dokunup değerini seçtiğiniz biçimde kopyalayın; “CSS kopyala” tüm seti :root özel nitelikleri olarak verir, “Değerleri kopyala” satır başına bir değer verir.

Kapsam, sınırlar ve sık sorulan sorular

• Beş kural, özel açı yok ve renk çarkı yok: kesin bir ton gerekiyorsa ana rengi ayarlayın veya renk dönüştürücüyü kullanın.
• Basamak sabit açıklık adımları (88 / 70 / 52 / 34 / 18%) kullanır; “sizin renginizden beyaza/siyaha %25 daha yakın” mantığıyla değil. Bu, basamakları farklı ana renkler arasında karşılaştırılabilir kılar; ama zaten çok açık ya da çok koyu bir ana renkte basamak adımları ona neredeyse hiç fark çözmez.
• Gri, beyaz veya siyah bir ana renk tümüyle aynı şemayı verir: tamamen doyumsuz bir renkte ton döndürme hiçbir şeyi değiştirmez. Bu dürüst aritmetiktir, hata değil.
• Yalnızca opak renkler: alpha yok, rgba() yok, 8 haneli HEX yok. Saydamlık renk dönüştürücünün işi.
• Yalnızca sRGB ekran değerleri: CMYK yok, Lab yok, renk yönetimi yok — aynı HEX kalibre edilmemiş ekranlarda gerçekten farklı görünür ve bu araç başka türlüymuş gibi davranmaz.
• Kontrast yalnızca bir örneğin üzerine yazılan değerin siyah mı beyaz mı olacağına karar vermek için kullanılır. Kontrast oranları raporlanmaz; erişilebilirlik denetimi için renk dönüştürücüyü kullanın.
• Geometri ton ilişkilerini garanti eder, estetiği değil: yüksek doygunlukta bir tamamlayıcı çift hâlâ gözü yorabilir. Kuralın anlamı zaten budur.
• “Rastgele ana renk”, tarayıcınızın crypto.getRandomValues değerlerinden çeker — kriptografik olarak güçlüdür, fiziksel entropi hizmeti değildir — ve tarayıcı böyle bir kaynak sunmadığında devre dışı kalır. Geri kalan her şey çalışmaya devam eder.
• Hiçbir şey yüklenmez, saklanmaz veya URL'ye konmaz: sayfayı yenilemek #4F46E5 + Benzeşen + HEX bileşimine döndürür ve paylaşım düğmesi yalnızca sayfa bağlantısını paylaşır. Şemanızı “CSS kopyala” ile dışarı taşıyın.
• İngilizce CSS renk adları, CSS sözdizimi oldukları için girdi olarak kabul edilir; yerelleştirilmiş renk adı çıktısı yoktur — aynı rengin basılabilecek standart bir Çince veya Arapça adı bulunmaz.
• Yuvarlama gösterim düzeyindedir: kanallar tam sayıdır, bu yüzden aynı rengi HEX ile HSL arasında dönüştürmek bir kanalı 1 kaydırabilir.