HTML renk kodları, bir web sayfasındaki metin, arka plan, buton, çerçeve ve diğer tüm görsel öğelerin rengini belirlemek için kullanılan kodlardır. HTML renk kodları HEX, RGB, RGBA, HSL ve renk isimleri olmak üzere çeşitli formatlarda kullanılabilir. Web tasarımında renklerin doğru seçimi hem kullanıcı deneyimi hem de SEO açısından büyük önem taşır.
Bu kodlar CSS içinde kullanılır ve tüm web tarayıcıları tarafından desteklenir.
HTML’de renkler şu formatlarla tanımlanabilir:
Altı haneli onaltılık sayılardan oluşur.
Örneğin:
Örnek:
Örnek:
Örnek:
Bu temel renkler web tasarımının her alanında kullanılır.
Özellikle tasarımcılar HSL formatını tercih eder çünkü renk tonunu anlamak çok daha kolaydır.
HTML Renk Kodları Nedir? Temel Tanım
HTML renk kodları, tarayıcıların bir rengi doğru şekilde göstermesi için kullanılan sayısal veya sözel renk tanımlarıdır.Bu kodlar CSS içinde kullanılır ve tüm web tarayıcıları tarafından desteklenir.
HTML’de renkler şu formatlarla tanımlanabilir:
- HEX renk kodu
- RGB renk kodu
- RGBA renk kodu
- HSL renk kodu
- HSLA renk kodu
- Hazır renk isimleri (red, blue, white vb.)
HTML’de En Çok Kullanılan Renk Kodları Türleri
1. HEX Renk Kodları (#FFFFFF)
HTML’de en popüler renk formatıdır.Altı haneli onaltılık sayılardan oluşur.
Örneğin:
- Beyaz:
#FFFFFF - Siyah:
#000000 - Kırmızı:
#FF0000 - Mavi:
#0000FF
2. RGB Renk Kodları (rgb(255, 0, 0))
RGB üç ana ışık renginden oluşur: Red, Green, Blue.Örnek:
Kod:
İçeriği sadece üyelerimiz görebilir.3. RGBA (rgb + opacity)
RGB sistemine şeffaflık (opacity) eklenmiş hâlidir.Örnek:
Kod:
İçeriği sadece üyelerimiz görebilir.4. HSL Renk Kodları
Hue (ton), Saturation (doygunluk), Lightness (parlaklık).Örnek:
Kod:
İçeriği sadece üyelerimiz görebilir.5. Renk İsimleri
HTML 140 renk ismini destekler:- red
- green
- blue
- yellow
- black
- white
- skyblue
- midnightblue
HTML Renk Kodları Tablosu (En Çok Kullanılanlar)
Aşağıdaki tablo web tasarımında en çok tercih edilen temel renkleri içerir:| Renk | HEX Kod | RGB Kod |
|---|---|---|
| Beyaz | #FFFFFF | rgb(255, 255, 255) |
| Siyah | #000000 | rgb(0, 0, 0) |
| Kırmızı | #FF0000 | rgb(255, 0, 0) |
| Yeşil | #00FF00 | rgb(0, 255, 0) |
| Mavi | #0000FF | rgb(0, 0, 255) |
| Sarı | #FFFF00 | rgb(255, 255, 0) |
| Turuncu | #FFA500 | rgb(255, 165, 0) |
| Mor | #800080 | rgb(128, 0, 128) |
| Gri | #808080 | rgb(128, 128, 128) |
| Lacivert | #000080 | rgb(0, 0, 128) |
HTML Renk Kodları Nasıl Kullanılır?
Bir HTML öğesine renk vermek için CSS kullanılır.Örnek 1: Metin rengini değiştirmek
Kod:
İçeriği sadece üyelerimiz görebilir.Örnek 2: Arka plan rengi
Kod:
İçeriği sadece üyelerimiz görebilir.Örnek 3: Şeffaf arka plan
Kod:
İçeriği sadece üyelerimiz görebilir.Örnek 4: Sınır (border) rengi
Kod:
İçeriği sadece üyelerimiz görebilir.HEX – RGB – HSL Karşılaştırma Tablosu
| Özellik | HEX | RGB | HSL |
|---|---|---|---|
| Okunabilirlik | Orta | Orta | Yüksek |
| Renk kontrolü | İyi | Çok iyi | En iyi |
| Şeffaflık | Yok | RGBA ile var | HSLA ile var |
| Popülerlik | Çok yüksek | Yüksek | Artıyor |
| Tasarım kolaylığı | Orta | İyi | Çok iyi |
HTML Renk Kodlarında Sık Kullanılan Tasarım Tonları
Soft Pastel Tonları
#FADADD(Pembe pastel)#D4F1F4(Açık gök mavisi)
Koyu Tema Renkleri
#1A1A1A(Koyu antrasit)#2C3E50(Lacivert gri karışımı)
Profesyonel Kurumsal Renkler
#007BFF(Mavi)#28A745(Yeşil)
Minimalist Arka Plan Renkleri
#F5F5F5#FAFAFA#EEEEEE
Web Tasarımında Renk Seçerken Dikkat Edilmesi Gerekenler
1. Kontrast çok önemlidir
Metin rengi ile arka plan rengi arasında yeterli kontrast olmalıdır.2. Kullanıcı deneyimi açısından sade renkler tercih edilmelidir
Aşırı parlak renkler göz yorar.3. Marka kimliği ile uyumlu renk kullanılmalıdır
Logo rengi ile uyumsuz tasarım profesyonel görünmez.4. Duygusal renk etkileri dikkate alınmalıdır
- Mavi: güven, sadelik
- Yeşil: doğallık, sağlık
- Kırmızı: dikkat çekme, enerji
- Sarı: neşe, hareket
5. Mobil uyumlu renk geçişleri tercih edilmelidir
Dark mode–light mode farkları göz önüne alınmalıdır.HTML Renk Kodlarını Kullanmanın Avantajları
- Tarayıcı uyumluluğu çok yüksektir
- Tüm cihazlarda aynı sonucu verir
- Tasarımı tamamen kontrol etmenizi sağlar
- Profesyonel görünüm oluşturur
- CSS ile birlikte sınırsız renk kombinasyonu sağlar
HTML Renk Kodlarını Kimler Kullanmalıdır?
- Web tasarımcılar
- Front-end geliştiriciler
- UX/UI tasarımcıları
- Blogger ve site sahipleri
- Grafik tasarımcıları
- WordPress/XenForo tema düzenleyenler
Sık Sorulan Sorular (S.S.S)
HTML renk kodu nasıl yazılır?
Genellikle#RRGGBB formatında HEX kodu şeklinde yazılır (ör: #ff0000).RGB mi HEX mi daha iyi?
Teknik olarak ikisi de aynı rengi gösterir; tasarımcılar çoğunlukla HEX, geliştiriciler RGB kullanır.HTML renk kodları kaç tanedir?
HTML 16,7 milyon renk (RGB kombinasyonu) gösterebilir.Şeffaf renk nasıl yapılır?
RGBA formatı kullanılır:rgba(255,0,0,0.5).
Googlebot, siteni genellikle 2–3 günde bir yeniden tarar; aktif içerik eklemek bu süreyi kısaltır.
Tarayıcı önbelleğini yönetmek, hem bant genişliği hem SEO için kritiktir.
Dünya üzerinde satılan ilk domainin symbolics.com olduğunu biliyor musunuz? (1985)
Google’ın ilk sunucusu Lego parçalarından yapılmıştı!
Ortalama bir web sitesi ziyaretçisi 3 saniyede karar verir: Kalacak mı, çıkacak mı?
SSL sertifikası olmayan sitelerin %70’i Google aramalarında geriye düşüyor.
Mobil cihazlardan gelen internet trafiği artık %60’ı geçmiş durumda!
İnternette kayıtlı 350 milyondan fazla alan adı (domain) var.
“robots.txt” dosyası, arama motorlarıyla iletişimin gizli dilidir.
En hızlı yüklenen web siteleri genelde 2 MB’tan küçük boyuttadır.
“404 hata sayfası” bile kullanıcı deneyiminin bir parçasıdır!
“.com” uzantısı 1985’te kullanılmaya başlandı, yani internetin en eski uzantısıdır.
Her 39 saniyede bir web sitesi siber saldırıya uğruyor.
Sayfa başlıklarını 60 karakteri geçirmezsen Google’da tam görünür.
En çok ziyaret edilen 3 site: Google, YouTube, Facebook.
Kullanıcılar bir web sitesine ortalama 50 milisaniyede ilk izlenimi verir!
Veritabanı yedeklerini otomatikleştirmek, birçok felaketi önler.
WordPress, tüm internet sitelerinin %43’ünden fazlasını oluşturuyor.
Favicon simgesi, marka güveni için küçük ama etkili bir detaydır.
Karanlık mod, mobil kullanıcıların %70’i tarafından tercih ediliyor.
DNS yapılandırması sitenin hızında kritik öneme sahiptir.
“Alt etiketi” sadece SEO için değil, erişilebilirlik için de zorunludur.
Tarayıcı önbelleğini optimize etmek, site hızını ikiye katlayabilir.
Bir sayfa 3 saniyeden geç açılıyorsa, ziyaretçilerin %50’si çıkıyor!
Lazy Load ve WebP formatı birlikte kullanıldığında sayfa boyutu %40 azalır.