Web tasarımında renk uyumu ve transparan renk kullanı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)



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.



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ı...




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

Tasarımlarda kullanabileceğiniz renk uyumları için ana renklerin tonları HEX kodları


Kırmızı renk tonları



Turuncu renk tonları



Sarı renk tonları



Yeşil renk tonları



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



Mavi renk tonları



Mor renk tonları



Pembe renk tonları



Beyaz renk tonları



Gri renk tonları



Kahverengi renk tonları