2014-09-07 26 views
5

aşağıdaki CSS bir göz atın:hesaplayın renk rotasyon

.colorA{ 
    color:#ff0000; 
} 
.colorB{ 
    color:#ab123f; 
} 
.sameAsColorB{ 
    color:#ff0000; 
    -webkit-filter:hue-rotate(...); 
} 

hedeftir: Bir çevirmek için dönme derecesini hesaplamak nasıl iki altıgen-kod renkler, verilen İlk önce ikinci? Eğer bu her zaman renk tonuyla gerçekleştirilemiyorsa, bunun bir yolu nedir?

+0

Renk tonunu anlamamdan, tüm renkleri alamayacağınız sonucunu çiziyorum. Bir renk alır ve rastgele bir renk almak için tonu döndürmeyi denerseniz, aynı yarıçapa sahip olmadıkları sorunuyla karşılaşırsınız. Ton döndürme sadece döner, yarıçapı değiştirmez. – Afsa

+0

tamam, ancak aynı zamanda webkit filtresini kullanarak doygunluğu ve diğer pek çok yönü de değiştirebilirsiniz, eğer yalnızca renk tonu ile yapamıyorsanız, tüm gerekli yönleri nasıl hesaplayabiliriz? –

+0

Her rengin polar koordinatlarla nasıl temsil edildiğini kontrol etmeniz gerekir. Daha sonra açıları ve mesafeleri hesaplamak oldukça basittir. – Afsa

cevap

0

Her şeyden önce, tüm renkleri bu şekilde alamazsınız. Örneğinizde, renk A'dan renk B elde edemezsiniz.

Bir rengi diğerine nasıl dönüştürebilirsiniz oldukça karmaşıktır ve her bir renge bağlıdır. (Not: tüm açılar radyan içindedir)

function getcolors(x){ 
    var red = Math.sqrt(Math.cos(x+(Math.PI+1)/2)+1/2); 
    var green = Math.sqrt(Math.cos(x)+1/2); 
    var blue = Math.sqrt(Math.cos(x-(Math.PI+1)/2)+1/2); 
    document.write("red: " + red + "<br/>green: " + green + "<br/>blue: " + blue); 
} 

Aşağıdaki javascript fonksiyonu size yeşil (# 00FF00) başlarsanız yeni renkte olacak kırmızı, yeşil ve mavi oranlarını verecek maksimum bir renk 1.5 olabilir karekökü olabilir. Eğer normal 255 bazındaki değeri istiyorsanız, 255 ile çarpın ve 1.5'in kareköküne bölün.

Örneğin -webkit-filter:hue-rotate(1rad); için hangi rengi alacağınızı görmek için getcolors(1) yazın.

Tüm birincil renkler (kırmızı, yeşil ve mavi) aynı şekilde çalışır.