CodeKitHubBu Araç Nedir?
Bir renk karıştırıcı, seçilen bir oranda iki rengin kırmızı, yeşil ve mavi kanalları arasında doğrusal enterpolasyon yapar; bu, bir gradyanın iç işleyişinde kullandığı matematiğin aynısıdır. %0'da sonuç Renk A, %100'de Renk B'dir; %50'de ise her RGB kanalının aritmetik orta noktasıdır.
Bu, fiziksel boya karıştırmaktan farklıdır (o çıkarımsaldır ve pigmente bağlıdır) ve HSL uzayında ortalama almakla da aynı şey değildir — RGB doğrusal enterpolasyonu, CSS gradyanlarının, tasarım araçlarının ve çoğu "iki renk arası renk" aracının kullandığı yöntemdir; bu yüzden sonuç, aynı iki renk arasındaki bir tarayıcı gradyanında göreceğinizle eşleşir.
Neden Kullanmalısınız?
- Rastgele bir ayarlama tahmin etmek yerine, ana renginiz ile bir vurgu rengi arasında doğal görünen bir hover veya aktif durum rengi bulun.
- Bir gradyan ekran görüntüsüne göz kararı bakmak yerine, herhangi bir orandaki tam HEX kodunu görün.
- 11 adımlık merdiven, tek tıkla bir renkten diğerine tam bir palet sunar; veri görselleştirme veya çok duraklı bir gradyan için kullanışlıdır.
- Herhangi bir adıma tıklayarak HEX kodunu anında kopyalayın.
- Ücretsiz, anında ve tamamen yerel — yükleme yok, hesap gerekmiyor.
Nasıl Kullanılır
- Renk seçicileri kullanarak veya bir HEX kodu yazarak Renk A ve Renk B'yi seçin.
- Renk B'den ne kadar karıştırılacağını belirlemek için oran kaydırıcısını sürükleyin.
- Örnek rengin üzerinde ortaya çıkan HEX ve RGB değerlerini okuyun.
- Aşağıdaki 11 adımlık merdivende herhangi bir renk örneğine tıklayarak HEX kodunu kopyalayın.
Örnek
Giriş
Renk A #3B82F6 (mavi), Renk B #F59E0B (kehribar), oran %50Çıkış
#9B9E7D — rgb(155, 158, 125)Tam olarak %50'de, her RGB kanalı iki giriş renginin ilgili kanallarının aritmetik ortalamasıdır.
Sıkça Sorulan Sorular
Neden bu, gerçek boya karıştırdığımda elde edeceğimle eşleşmiyor?
Boya karıştırma çıkarımsaldır (pigmentler ışığı emer) ve kullanılan spesifik pigmentlere bağlıdır — örneğin mavi ve sarı boyayı karıştırmak yeşil verir. Bu araç ise ışığı (RGB kanallarını) toplamsal/doğrusal biçimde karıştırır; ekranların, CSS gradyanlarının ve çoğu dijital tasarım aracının renkleri karıştırma biçimi de budur. İki sistem, tasarım gereği gerçekten farklı sonuçlar üretir; bu bir hata değildir.
Bu, iki renk arasındaki bir CSS linear-gradient ile aynı mı?
Evet — bir CSS linear-gradient(renkA, renkB), RGB kanallarını tam olarak bu aracın yaptığı gibi enterpole eder; bu yüzden o gradyanın orta noktasında göreceğiniz renk, buradaki %50 sonucuyla eşleşir.
Karışık renk neden bazen donuk veya gri görünüyor?
Doygun ama birbirinden çok farklı iki tonu (mavi ve turuncu gibi, ki bunlar neredeyse tamamlayıcı renklerdir) RGB uzayında karıştırmak genellikle düşük doygunlukta, grimsi-kahverengi bir orta nokta üretir — bu, bir hata değil, RGB enterpolasyonunun gerçek bir özelliğidir. Daha canlı bir karışım isterseniz, renk çemberinde birbirine daha yakın renkleri karıştırmayı deneyin ya da HSL uzayında ton değiştirip doygunluğu yüksek tutarak karıştırın (bu düz RGB karıştırıcısının yapmadığı bir şey).
Aynı anda ikiden fazla rengi karıştırabilir miyim?
Tek adımda hayır — araç tam olarak iki rengi karıştırır. Üç rengi birleştirmek için önce ilk ikisini seçtiğiniz oranda karıştırın, sonucu kopyalayın ve üçüncü renge karşı yeni Renk A olarak yapıştırın. Bunu aşamalı yapmak, tek seferlik üçlü bir ortalamanın vermeyeceği ağırlıklandırma kontrolünü de size sağlar.
Bunu mu yoksa Renk Tonu Üreticisi'ni mi kullanmalıyım?
İki farklı renk arasında duran bir renge ihtiyacınız varsa — örneğin marka maviniz ile bir kehribar vurgusu arasında geçiş tonu gibi — bu karıştırıcıyı kullanın. Tek bir rengin daha açık ve daha koyu varyantlarına (hover durumları, arka planlar, Tailwind tarzı 50-900 merdiveni) ihtiyacınız varsa, bunun yerine Renk Tonu Üreticisi'ni kullanın: bu araç tonu ve doygunluğu sabit tutup yalnızca aydınlığı değiştirir, böylece her sonuç net biçimde aynı renk ailesinde kalır.
Giriş alanlarına hangi renk formatlarını yazabilirim?
Metin alanları, başında # olsun ya da olmasın 6 haneli HEX kodlarını kabul eder (örn. 3B82F6 veya #3B82F6). Kısaltılmış 3 haneli hex, rgb() gösterimi ve CSS renk isimleri orada ayrıştırılmaz — ama her alanın yanındaki yerel renk seçiciyle herhangi bir rengi görsel olarak seçebilirsiniz; HEX alanı da buna göre güncellenir.