Üçlü Renk Üretici

Sonraki

Üçlü (triadic) palet, renk çarkında birbirinden 120° uzaklıkta üç renk kullanır; kırmızı, sarı, mavi ilkokuldan bildiğimiz örnektir. Sonuç, kaosa kaçmadan doğal biçimde dengeli ve enerjiktir. Renk seçiciyle herhangi bir temel renk seçin: bu üretici rengi HSL’ye çevirir, doygunluk ve açıklığa dokunmadan tonu tam +120° ve +240° döndürür ve üç renk örneğini HEX kodlarıyla gösterir. Kodunu kopyalamak için bir örneğe tıklamanız yeterli.

Palet nasıl oluşturulur

  1. 1

    Bir temel renk seçin

    Renk seçiciyle paletin çevresinde kurulacağı tonu belirleyin.

  2. 2

    İki eş hesaplanır

    Araç, tonu HSL uzayında +120° ve +240° döndürür; doygunluk ve açıklık aynı kalır, üçlü böylece bütünleşik görünür.

  3. 3

    HEX kodlarını okuyun

    Base, Triadic +120° ve Triadic +240° yan yana görünür; her biri altı haneli HEX değeriyle etiketlenir.

  4. 4

    Tıklayıp kopyalayın

    Herhangi bir örneğe tek tıklama, HEX kodunu panoya kopyalar; CSS, Tailwind yapılandırması ya da tasarım aracınıza yapıştırmaya hazırdır.

Üçlü paletler neden dengeli hissettirir

Renk çarkında eşit aralıklarla dizilen üç renk hiçbir ton komşuluğunu paylaşmaz: güçlü biçimde kontrast oluştururlar, 120° aralık ise doğrudan tümleyenlerin (180° aralık) kafa kafaya çarpışmasını önler. Göz onları belirgin ama uyumlu okur.

Örneklerin arkasındaki matematik

Üretici, HEX renginizi HSL’ye çevirir, tona 120° ve 240° ekler ve geri çevirir. Yalnızca ton değiştiği için üç renk her zaman aynı doygunluğu ve açıklığı paylaşır. Hoş bir yan etki: tam 120° döndürme, kırmızı, yeşil ve mavi kanal değerlerini sırayla kaydırmaya denktir; bu yüzden #6366F1 (varsayılan) renginin eşleri #F16366 ve #66F163 olur, yani aynı üç bayt çifti farklı sırada.

Bu aracın ürettiği örnek üçlüler:

Temel Triadic +120° Triadic +240°
#FF0000 (kırmızı) #00FF00 #0000FF
#6366F1 (çivit) #F16366 #66F163
#E67E22 (turuncu) #22E67E #7E22E6
#0EA5E9 (gök mavisi) #E90EA5 #A5E90E
#2ECC71 (zümrüt yeşili) #712ECC #CC712E

Üçlüyü bunaltmadan kullanmak

Tam doygunlukta üç canlı ton fazla gelir. Denenmiş yöntem:

  • Bir baskın renk (%60) ana arayüz için.
  • Bir ikincil renk (%30) vurgular ve bölümler için.
  • Bir dikkat çekici renk (%10) kilit etkileşimli öğeler için.

Diğer kaldıraç, yumuşatılmış bir temelden başlamaktır: iki eş temelin doygunluğunu devralır, yani yumuşak bir temel yumuşak bir üçlü verir.

Üçlü ile diğer uyumların karşılaştırması

Uyum Yapı His
Tümleyen 2 renk, 180° aralıklı Yüksek karşıtlık, çarpıcı
Benzeşik 3 renk, bitişik Sakin, bütünleşik
Üçlü 3 renk, 120° aralıklı Dengeli, enerjik
Dörtlü 4 renk, dikdörtgen Zengin, dengelemesi zor
Bölünmüş tüml. Temel + 2 yarı tümleyen Çatışmadan güçlü

Arayüz tasarımı için ipuçları

  • Her çiftin karşıtlığını kontrol edin. Üçlü paletler, metin bindirmelerinde WCAG AA karşıtlığını garanti etmez; kombinasyonları tek tek doğrulayın.
  • Eylem çağrıları için tek renk seçin ve ona bağlı kalın. Üçlünün renkleri arasında gidip gelen düğmeler kullanıcıyı şaşırtır.
  • Açık ve koyu tonlar kullanın; paleti dördüncü bir ton eklemeden genişletin.
  • Karanlık modda test edin. Beyazda çalışan bir üçlü, koyu arka planlarda ayırt edilebilirliğini yitirebilir; açıklığı ayarlayın.

Sık Sorulan Sorular

360°’lik renk çarkının üç eşit parçası, hiçbiri baskın olmadan tonlar arasına en büyük mesafeyi koyar. Daha dar aralık benzeşik uyum verir; daha geniş aralık eşit uzaklıkları bozar ve çoğunlukla bölünmüş tümleyen şemasına dönüşür.

Evet, ama çoğu zaman yumuşatılarak. Birçok marka üçlü bir temelden başlar, ardından daha olgun bir his için üç renkten ikisinin doygunluğunu azaltır ya da tonunu bastırır. Tam doygun bir üçlü oyunbaz ya da enerjik okunur; onu marka kişiliğiyle eşleştirin.

Evet. Üretici, temel renginizin doygunluğunu ve açıklığını iki eşte de korur; doygunluğu düşük bir temel, aynı ölçüde yumuşak bir üçlü üretir. Bu, profesyonel ya da editoryal tasarımlarda yaygın bir stratejidir.

Saf grinin doygunluğu sıfırdır: döndürülecek bir ton yoktur ve üç örnek aynı çıkar. Temeli herhangi bir tona doğru kaydırın; üç örnek anında ayrışır.

Kayıt gerekmez ve hiçbir şey saklanmaz. Renk yalnızca paleti hesaplayıp göstermek için kullanılır; adım adım görünümde sayfanın URL adresinde de yer alır, böylece bir paleti yer imlerine eklemek ya da paylaşmak kolaylaşır.

İlgili Araçlar

Araç diğer dillerde mevcuttur