HTML Dersleri 14 - Renkler

Bu derste HTML sayfalarında renklerin nasıl kullanıldığını, metin, arka plan ve kenarlık renklerinin nasıl belirlendiğini öğreneceksin. HEX, RGB ve hazır renk isimleri örneklerle açıklanarak HTML renk kullanımı detaylı şekilde anlatılmaktadır.

admin admin
Ekim 13, 2022 - 12:47 Updated: Ocak 8, 2026 - 23:14
0 99
HTML Dersleri 14 - Renkler
HTML Dersleri 14 - Renkler

HTML Renkler Nedir?

HTML renkler, web sayfalarında metinlerin, arka planların ve HTML elementlerinin görsel olarak ayırt edilmesini sağlar. HTML renk kullanımı, sayfanın okunabilirliğini artırır ve tasarım bütünlüğü oluşturur.

Yazı Rengi Belirleme

Metin rengi ayarlamak için color özelliği kullanılır.

Metin Rengi Örneği

<p style="color: red;">Bu yazı kırmızı renktedir.</p>
<p style="color: blue;">Bu yazı mavi renktedir.</p>

Arka Plan Rengi Belirleme

HTML elementlerine arka plan rengi vermek için background-color kullanılır.

Arka Plan Rengi Örneği

<div style="background-color: lightgray;">
    <p>Bu alanın arka plan rengi açık gridir.</p>
</div>

HEX Renk Kodları

HEX renk kodları # işareti ile başlar ve altı karakterden oluşur.

HEX Renk Kullanımı

<p style="color: #ff0000;">Kırmızı HEX renk</p>
<p style="background-color: #000000; color: #ffffff;">
    Siyah arka plan, beyaz yazı
</p>

RGB Renk Kullanımı

RGB sistemi, kırmızı (Red), yeşil (Green) ve mavi (Blue) değerlerinden oluşur.

RGB Örneği

<p style="color: rgb(0, 128, 0);">Yeşil RGB renk</p>
<div style="background-color: rgb(240, 240, 240);">
    Açık gri arka plan
</div>

Hazır Renk İsimleri

HTML’de bazı renkler isimleriyle doğrudan kullanılabilir.

Hazır Renkler

<p style="color: purple;">Mor yazı</p>
<p style="color: orange;">Turuncu yazı</p>
<p style="color: brown;">Kahverengi yazı</p>

Kenarlık (Border) Rengi Verme

HTML elementlerine kenarlık rengi eklemek mümkündür.

Border Renk Örneği

<div style="border: 2px solid blue;">
    Mavi kenarlıklı kutu
</div>

Aynı Anda Birden Fazla Renk Kullanımı

Bir elementte yazı, arka plan ve kenarlık rengi birlikte ayarlanabilir.

Kombine Renk Kullanımı

<div style="
    color: #ffffff;
    background-color: #333333;
    border: 3px solid #ff9900;
">
    Renkli tasarım örneği
</div>

HTML Renk Kullanımında Dikkat Edilmesi Gerekenler

  • Yazı ile arka plan arasında kontrast olmalı

  • Okunabilirlik ön planda tutulmalı

  • Aşırı renk kullanımından kaçınılmalı

  • Mobil ve masaüstü uyumluluğu göz önünde bulundurulmalı

Renk kullanımını öğrendikten sonra, HTML’de sayfa yapısını oluşturan son temel konuyu ele alabiliriz.

? Bir sonraki ders:
HTML Dersleri 15 – Temeller Sonu
https://cilginyazilim.com/html-dersleri-15-temeller-sonu



Etiketler: