tigtools

Renk Paleti Oluşturucu

Bir taban rengiyle başlayın, renk uyumunu seçin ve paleti projenizin kullandığı biçimde kopyalayın.

Tarayıcınızda çalışır Kayıt gerekmez

Palet

  • #3366cc
  • #8c6500

Kilitli renkler, temel rengi değiştirdiğinizde aynı kalır.

Dışa aktarma biçimi

Nasıl kullanılır?

  1. Bir taban rengi girin veya seçin. “Yeni rastgele taban rengi” sizin için bir renk seçer.
  2. Bir renk uyumu seçin. “Tonlar ve gölgeler”, çok açıktan çok koyuya uzanan 11 adımlı bir ölçek oluşturur.
  3. Korumak istediğiniz renkleri kilitleyin, ardından diğer taban renklerini keşfetmeye devam edin.
  4. HEX, CSS özel özellikleri veya JSON biçimini seçin, bir ad belirleyin ve kodu kopyalayın.

Nasıl çalışır?

Renk uyumları, renk çarkında ton açısı döndürülerek oluşturulur: tamamlayıcı uyumda karşıt ton (180°), benzer uyumda her iki yöndeki 30° ve 60° uzaklıktaki tonlar, üçlü uyumda aralarında 120° bulunan üç ton, dörtlü uyumda aralarında 90° bulunan dört ton; bölünmüş tamamlayıcı uyumda ise tamamlayıcı tonun iki yanındaki tonlar (150° ve 210°) kullanılır.

Döndürme HSL yerine OKLCH uzayında yapılır. OKLCH algılanan açıklığı sabit tutar; böylece aynı palet içindeki sarı ve mavi benzer parlaklıkta görünür ve sarı göz almaz. Döndürülmüş bir renk sRGB ekranlarda gösterilebilen aralığın dışına çıkarsa, aralığa sığana kadar kroması azaltılır; açıklık ve ton korunur.

Ton ve gölge ölçeğinde, Tailwind CSS'teki adlandırmaya benzer şekilde 50'den 950'ye kadar adlandırılmış sabit OKLCH açıklık adımları kullanılır. En açık tonların neon gibi görünmemesi için beyaza ve siyaha yaklaştıkça kroma azaltılır. Renk uyumlarını başlangıç noktası olarak kullanın: İçerikte kullanmadan önce metin ve arka plan çiftlerini bir kontrast denetleyiciyle kontrol edin.

Örnekler

Vurgu rengiyle birlikte marka rengi

#3366cc taban rengine “Tamamlayıcı” uyumu ekleyince aynı OKLCH açıklığına sahip, sıcak okr tonunda #8c6500 elde edilir. Mavi bir markanın yanında vurgu rengi olarak mavi ve turuncu-sarı eşleşmeleri sık kullanılır.

Bileşen kitaplığı için tasarım belirteçleri

“Tonlar ve gölgeler” seçeneğini belirleyin, adı “primary” yapın ve CSS değişkenlerini dışa aktarın. Arka planlarda (50–100), kenarlıklarda (200–300) ve metinlerde (700–900) kullanıma hazır --primary-50 ile --primary-950 arasındaki değişkenleri elde edersiniz.

Keşif yaparken bir rengi koruma

Üçlü paletteki ikinci rengi kilitleyin, ardından farklı taban renklerini deneyin. Diğerleri değişirken kilitli renk örneğinin HEX değeri sabit kalır.

Sık sorulan sorular

Renklerim neden HSL renk çarkı aracındakilerden farklı?

Bu araç, algısal bir renk uzayı olan OKLCH'te tonu döndürür. OKLCH'in ton açıları HSL ile tam olarak örtüşmediğinden, bir rengin “karşıtı” HSL aracının verdiğinden biraz farklı bir ton olabilir.

JSON'u Tailwind CSS'te kullanabilir miyim?

JSON, adları HEX değerleriyle eşler ve Tailwind'in tema yapılandırmasındaki renkler için kabul ettiği yapıyla aynıdır. Tailwind 4'te CSS değişkenlerinin adlarını --color-… olarak değiştirdikten sonra bunları bir @theme bloğuna da yapıştırabilirsiniz.

Oluşturulan paletler erişilebilir mi?

Otomatik olarak değil. Renk uyumu, metin ve arka plan arasındaki kontrast hakkında bilgi vermez. Kullanmayı düşündüğünüz her çifti Kontrast Denetleyici ile kontrol edin.

Gizlilik

Paletler tarayıcınızda oluşturulur. Renkleriniz hiçbir yere gönderilmez veya kaydedilmez.