Tamamlayıcı Renk Bulucusu

#RGB, #RRGGBB, tam sayılı rgb() ve yüzdeli hsl() desteklenir. Hesaplama tarayıcıda kalır; renk, her sayfa isteğinde gönderilen akış URL’sinde yer alır.

Tamamlayıcı renkler dijital renk çarkında karşılıklı konumlanır. HSL tamamlayıcısını, bölünmüş tamamlayıcıları, tetradik eşlikçi renkleri ve tam WCAG kontrast oranlarını hesaplamak için kurallara uygun bir HEX, RGB veya HSL değeri girin. Hesaplama tarayıcınızda yerel olarak yapılır.

Komplement nasıl hesaplanır?

  1. 1

    Herhangi bir renk seçin

    #RGB, #RRGGBB, tam sayılı rgb() veya yüzdeli hsl() kullanın. Hesaplamadan önce değerin tamamı doğrulanır.

  2. 2

    Renk tonunu 180° döndürün

    HSL tamamlayıcısı: renk tonuna 180° ekleyin, doygunluk ve parlaklık değerlerini aynı tutun.

  3. 3

    Bölünmüş tamamlayıcıyı türetin

    Temel renkten 150° ve 210° uzaklıktaki iki renk, kontrast çok yüksek olduğunda doğrudan tamamlayıcıya göre daha yumuşak bir alternatif.

  4. 4

    Erişilebilirlik ipuçları görünür

    Çiftin beyaz ve siyaha göre kontrast oranı; ayrıca çift ön plan/arka plan olarak kullanıldığında WCAG AA'yı geçemeyecek gibiyse bir uyarı gösterilir.

Örnekler

Temel renk Hex Tamamlayıcı (HSL) Hex
Saf kırmızı #FF0000 Camgöbeği #00FFFF
Mercan #FF7F50 Aqua turkuaz #50D0FF
Orman yeşili #228B22 Mor #8B228B
Kraliyet mavisi #4169E1 Altın-turuncu #E1B941
Lavanta #E6E6FA Soluk sarı #FAFAE6

Gösterilen HEX, RGB ve HSL değerleri aynı sRGB rengini tanımlar. CSS veya başka bir tasarım aracında kullanmak için sonucu kopyalayın.

HSL tamamlayıcısı ile RYB tamamlayıcısı

  • HSL (ekran): kırmızı ↔ camgöbeği, yeşil ↔ macenta, mavi ↔ sarı. Bu, CSS’de kullanılan ve sRGB’den türetilen HSL açısının geometrisidir; ışık karışımı simülasyonu değildir.
  • RYB (sanatçı): kırmızı ↔ yeşil, mavi ↔ turuncu, sarı ↔ mor. Bu, geleneksel bir öğretim yaklaşımıdır; belirli pigmentlerin nasıl karışacağını öngörmez.

Bu araç yalnızca dijital HSL modelini kullanır. Pigment tamamlayıcısı malzemeye ve karışıma bağlı olduğundan boya için RYB dönüşümü sunmaz.

Tamamlayıcıların iyi çalıştığı yerler

  • Marka arka planlarına karşı CTA düğmeleri. Düğmenin öne çıkması için ana rengi tamamlayıcısıyla eşleştirin.
  • Veri görselleştirme: çift serili grafikler (kâr-zarar, önce-sonra).
  • İllüstrasyon gölgeleri: turuncu bir balkabağının gölgesi, daha koyu bir turuncu yerine maviyle daha inandırıcı görünür.
  • Spor markalaşması: birçok takım tamamlayıcı veya bölünmüş tamamlayıcı paletler (mavi/turuncu, kırmızı/yeşil, sarı/mor) kullanır.

Başarısız oldukları yerler

  • Arka plan üzerinde gövde metni: doğrudan tamamlayıcılar (yeşil üzerinde kırmızı, turuncu üzerinde mavi) okumayı zorlaştırır. Yüksek renk sapması göz yorgunluğuna yol açar.
  • Tüm yüzeyde kullanım: %50 kırmızı ve %50 yeşil olan bir ekran yorucudur. Tamamlayıcıyı ana renk olarak değil, vurgu olarak (yüzeyin %5-10’u) kullanın.
  • Marka tutarlılığı: tamamlayıcılar dağınık bir izlenim verir. Modern markaların çoğu çift tamamlayıcı yerine tek renkli veya analog bir palet + bir vurgu rengi kullanır.

Bölünmüş tamamlayıcı

Bölünmüş tamamlayıcı (temel + 150° + 210°) genellikle daha pratik bir seçimdir:

  • Tamamlayıcı bölgeyle yüksek kontrastı korur.
  • Doğrudan tamamlayıcının titreşimini önler.
  • Katmanlı tasarım için iki vurgu rengi sunar.

Örnek: temel = mavi → tamamlayıcı = turuncu (sert) → bölünmüş tamamlayıcı = kırmızı-turuncu + sarı-turuncu (daha zengin).

Tamamlayıcıların doygunluğunu azaltma

Saf tamamlayıcılar tam doygunlukta nadiren iyi görünür. Daha sakin bir palet için birinde ya da her ikisinde doygunluğu %20-40 azaltın:

  • Kırmızı (S=%100) + Camgöbeği (S=%100) = titreşir.
  • Kırmızı (S=%60) + Camgöbeği (S=%60) = klasik afiş paleti.
  • Marka tuğla kırmızısı (S=%45) + Tozlu turkuaz (S=%30) = modern ve kullanışlı.

Kullanmadan önce kontrol

  • Çiftin kontrast oranı: araç bu değeri bildirir. 4,5:1’in altında metin için AA karşılanmaz.
  • Nötr arka planda test edin: tamamlayıcılar beyaz, gri ve siyaha karşı farklı görünür.
  • Hedef baskıysa baskı testi yapın, CMYK, RGB’ye kıyasla doygunluğu ve tamamlayıcı ilişkilerini kaydırabilir.

Sık Sorulan Sorular

Renk tonlarını farklı yaklaşımlarla düzenlerler. HSL, sRGB’den türetilen sayısal bir açı kullanır; geleneksel RYB çemberi sanatçı ana renklerini kavramsal bir daireye yerleştirir. Hiçbiri gerçek ışıkların veya boyaların karışım sonucunu öngörmez.

Evet, renk kuramında eşanlamlıdır. “Renk çemberinde karşıt” ve “tamamlayıcı” ifadeleri aynı ilişkiyi anlatır.

Nadiren. Doğrudan tamamlayıcılar, ön plan/arka plan olarak kullanıldığında benzer parlaklığa sahip oldukları için genellikle WCAG kontrastını karşılamaz. Geçmek için parlaklık farkını artırın (açık arka plan üzerine koyu metin).

Evet, sonuç paneli doğrudan tamamlayıcıyı, bölünmüş tamamlayıcıyı (iki yandaki iki renk) ve tetradik dörtlüyü içerir. Tasarım hedefinize uygun olanı seçin.

İlgili Araçlar