Web tasarımında renk uyumu ve transparan renk kullanımı

YoRuMSuZ

Biz işimize bakalım...
Web tasarımı çalışmalarında başlangıçta kullanılan cafcaflı renkler yerine zaman geçtikçe birbirine uyumlu, az sayıda renklerin ustalıkla ve uyum içinde kullanıldığı tasarımlara geçiliyor.

Bu konuda da yeni başlayanlar için uyumlu renklerin seçimi ve renkleri transparan (saydam) olarak kullanımı üzerinde durulacak. Hemen başlayalım.


Renkleri istenilen düzeyde saydamlaştırabilmek için renklerin RGB değerlerine ihtiyacımız var. Bunu için siteyi kullanabilirsiniz.

Örneğin kırmızı HEX kodu: FF0000 - RGB kodu: rgb(255, 0, 0)
Renklerin HEX ve RGB kodları



Renkler konusunda temel bilgi sahibi olduğunuzu var varsayarak devam edelim.


Gelelim renklerin saydamlaştırılmasına... Bunun için rgb yerine rgba kullanıyoruz. Aşağıdaki ekran görüntüsünde kullanım net şekilde gösterilmektedir. Bu görüntüye göre;

Siyah rengi %50 saydamlaştırmak için: rgba(0, 0, 0, 0.5) şeklinde kullanıyoruz. 0.5 değeri saydamlık değerini belirtir.

Aynı şekilde diğer renkler içinde istediğiniz ölçüde renkleri transparan yapabilirsiniz.

Örneğin: RGB değerlerinden sonra 0.1 kullanırsanız rengin sadece % 10 u gösterilir.
Saydam renk oluşturma



Renklerin transparan hale getirmek tasarımda çok şık sonuçlara ulaşmanızı sağlar. Arkaplanda kalan renklerin, resimleri vs istediğiniz ölçüde görünümü bu şekilde sağlayabilirsiniz...

Örnek kullanım, sarı background rengi % 50 oranında saydamlaştırıldı...
Örnek transparan kullanımı




Not: İlgili konu olarak opacity kullanımı konusunda araştırma yapmanız önerilir.
 

YoRuMSuZ

Biz işimize bakalım...
Tasarımlarda kullanabileceğiniz renk uyumları için ana renklerin tonları HEX kodları


Kırmızı renk tonları
Kırmızı renk tonları



Turuncu renk tonları
Turuncu renk tonları



Sarı renk tonları
Sarı renk tonları



Yeşil renk tonları
Yeşil renk tonları



Cam göbeği (cyan) renk tonları
Cam göbeği (cyan) renk tonları



Mavi renk tonları
Mavi renk tonları



Mor renk tonları
Mor renk tonları



Pembe renk tonları
Pembe renk tonları



Beyaz renk tonları
Beyaz renk tonları



Gri renk tonları
Gri renk tonları



Kahverengi renk tonları

Kahverengi renk tonları
 
Top