Tamamlayıcı Renk Bulucusu
Temel rengi girin
#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
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
Renk tonunu 180° döndürün
HSL tamamlayıcısı: renk tonuna 180° ekleyin, doygunluk ve parlaklık değerlerini aynı tutun.
-
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
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
İkilik Tabandan ASCII'ye Dönüştürücü
İkilik veri yapıştırın (boşlukla ayrılmış baytlar veya uzun bir bit dizisi) ve temsil ettiği ASCII metni alın. 7 bit ve 8 bit kodlamaları destekler.
BBCode HTML Dönüştürücü
BBCode'u (forum işaretlemesi) temiz HTML'e dönüştürün. Biçimlendirme etiketleri, listeler, alıntılar, kod, görseller, linkler ve tabloları işler.
Binary'den Hex'e Dönüştürücü
Binary girdiyi sade büyük harfli hexadecimal değere dönüştürün. Binary olmayan karakterler yok sayılır ve baştaki sıfırlar korunmaz.
İkiliden Sekizliye Dönüştürücü
Bitleri üçer üçer gruplayarak ikiliyi sekizliye dönüştürün. Unix izinleri, eski sistemler ve kompakt sayısal gösterim için yararlıdır.
HEX Renk Seçici
HEX rengi seçin veya girin; RGB, HSL, yaklaşık CMYK, bağıl parlaklık ve beyaz-siyah kontrast oranlarını görün.
ASCII İkili Dönüştürücü
Herhangi bir ASCII dizesini ikili gösterimine dönüştürün. Her karakter sekiz bite dönüşür, boşlukla ayrılır ve protokol izine ya da ödeve yapıştırmaya hazırdır.