Renk paleti oluşturucu
Tek bir renkten başlayın ve eşleşen paletler alın; her renk örneği HEX ve RGB değerleriyle, beyaz ve siyaha karşı kontrastıyla birlikte gelir.
Tamamen tarayıcınızda çalışır
Rastgele palet
Tarayıcınızın rastgele sayı üretecinden beş renk. Tutmak istediklerinizi kilitleyin, sonra yeniden seçtirin. Hiçbir metin alanı odakta değilken seçtirmek için Boşluk tuşuna basın.
Dışa aktar
Paletler OKLCH renk uzayında oluşturulur ve sRGB HEX olarak gösterilir; bu yüzden bir ekran için fazla canlı renklerin kroması düşürülür. Kontrast değerleri yalnızca açıklık kontrastını ölçen WCAG 2 formülünü kullanır.
Renk paleti nasıl oluşturulur?
- Seçiciyle bir ana renk seçin ya da HEX alanına
#1636a3veyaf60gibi bir değer yazın. - Altındaki uyum paletlerini okuyun. Her renk örneği HEX ve RGB değerini, ayrıca üzerindeki siyah veya beyaz yazının WCAG AA ya da AAA'yı geçip geçmediğini gösterir.
- Dışa aktar bölümünde bir palet seçin ve CSS özel özellikleri, JSON dizisi ya da düz liste olarak kopyalayın veya indirin. Keşfetmek için Rastgele palet ve kilit düğmelerini kullanın.
Uyumlar nasıl oluşturuluyor?
Renk uyumu, tonları renk çemberi üzerinde sabit açılarda duran bir renk kümesidir. Komşu renkler 30 derece arayla yan yanadır. Tamamlayıcı renk 180 derece uzaktadır, bölünmüş tamamlayıcı çift 150 ve 210 derece uzakta durur, üçlü uyum 120 derece arayla dizilir, dörtlü uyum ise 90 derece arayla dört ton kullanır. Tek renkli palet tonu korur ve açıklığı soluk açık tonlardan koyu gölgelere doğru kademelendirir.
Burada kullanılan çember, Björn Ottosson'un OKLab uzayının silindirik biçimi olan OKLCH'dir. Dönüşüm sRGB'den doğrusal ışığa, oradan OKLab matrislerine gider ve bir gamut denetimiyle geri döner. Döndürülmüş bir renk sRGB'nin gösterebildiği aralığın dışına düşerse, kroması sığana kadar küçük adımlarla azaltılır; böylece seçtiğiniz açıklık ve ton korunur.
Kontrast her renk örneği için hem beyaza hem siyaha karşı bildirilir, çünkü bir palet rengi hakkında ilk soru genellikle üzerine hangi yazının konabileceğidir. Oran ve AA ya da AAA ifadesi her zaman yazıyla belirtilir; böylece bilgi rengi görebilmeye bağlı değildir.
İpuçları
- Aynı rengi HSL, CMYK veya CSS adı olarak mı istiyorsunuz? Renk dönüştürücü ve kontrast denetleyici aracını kullanın.
- İki palet rengini CSS gradyan oluşturucu ile bir arka plana dönüştürün.
- Çemberden değil de bir fotoğraftan alınmış bir renk mi istiyorsunuz? Resimden renk seç aracını deneyin.
Sık sorulan sorular
Neden HSL yerine OKLCH?
HSL'de aynı açıklık değerine sahip bir sarı ile bir mavi, parlaklık olarak çok farklı görünür. OKLCH, eşit açıklık adımlarının eşit görünmesi için tasarlanmıştır; bu da bir paletin renk örneklerini ağırlık bakımından dengeli tutar. Uyumlar için kullanılan açı tondur; bu yüzden OKLCH'de tamamlayıcı renk ana renginizden 180 derece uzakta durur, HSL'deki gibi değil.
Bir renk ekranda gösterilemiyorsa ne olur?
Açıklığı ve kromayı koruyarak bir tonu döndürmek, bazen normal bir ekranın gösterebildiği sRGB aralığının dışına düşer. Araç bu durumda renk sığana kadar açıklığı ve tonu koruyarak kromayı düşürür. Döndürülmüş bir renk örneğinin ana renkten biraz daha az canlı görünmesinin nedeni budur.
AA ve AAA etiketleri ne anlama geliyor?
O renk örneği üzerindeki beyaz veya siyah yazının WCAG 2 kontrast oranını bildirirler. 4,5 veya daha fazlası normal metin için AA, 7 veya daha fazlası AAA'dır; 3 ile 4,5 arası yalnızca büyük metin için AA'yı geçer. Hem siyahta hem beyazda başarısız olan bir renk örneği, yazı için kötü bir arka plandır.
Rastgele palet nasıl çalışır?
Beş renk, tarayıcının güvenli rastgele sayı üreteciyle seçilir: tonlar çembere yayılır; açıklık ve kroma, siyaha ve beyaza yakın değerleri dışarıda bırakan bir aralıkta rastgele belirlenir. Tutmak istediğiniz bir renk örneğini kilitleyin, sonra diğerlerini değiştirmek için Rastgele palet'e ya da Boşluk tuşuna basın.
Hangi dışa aktarma biçimini kullanmalıyım?
CSS özel özellikleri doğrudan bir stil sayfasının :root bloğuna yapıştırılır. JSON dizisi tasarım belirteçlerine veya betiklere uygundur, düz liste ise yapıştırılan renkleri kabul eden araçlar için her satırda bir HEX içerir. Üçü de gösterilen HEX değerlerini kullanır.
Kısa HEX ve büyük harfleri destekliyor mu?
Evet. #abc, abc, #AABBCC ve aabbcc okunur. Sekiz basamaklı gibi alfa çiftli değerler burada kabul edilmez; önce alfayı atmak için Renk dönüştürücü ve kontrast denetleyici aracını kullanın.