Web sitelerimizi tasarlarken, sitede bulunan her kısmın uyum içerisinde olmasını isteriz. Kullanıcıların gözünü yormadan, göze hoş gelen web siteleri yapmak isteriz. Bu uyumu ve hoş görüntüyü bulmanın en önemli yolu hiç şüphe yok ki renklerdir. Bizde bu yazımızda HTML renk kodları ve kullanımları konusunu işleyeceğiz.

HTML Renk Kodları Nedir ?

HTML sayfalarımızda kullanabileceğimiz 3 farklı renk kodu kullanımı vardır. Bunlar;

  • isim
  • rgb renk kodu
  • hex renk kodu

HTML Renk İsimleri

HTML’de kullanacağımız öğelerin renklerini belirleyebildiğimiz ilk yol isim kullanımıdır. Hemen bu renklerden bazılarını görelim.

Red

Orange

Black

Purple

Not : Burada sadece örnek olarak bir kaç tane verdim. Daha farklı renkleri de İngilizce isimlerini yazarak kullanabilirsiniz.

HTML Renklerin İsim ile Kullanımı

Şimdide yukarıda gördüğümüz renkleri bir HTML sayfasında nasıl kullanabileceğimizi bir kaç örnek ile görelim.

<body bgcolor="red">  <!-- Arka plan rengi kırmızı olacaktır. -->
        <p style="color: white;">Evrensel Kod</p> <!-- Yazı rengi beyaz olacaktır -->
</body>

HTML RGB Değeri

HTML sayfasında renkler için kullanılan bir diğer yolda rgb değerlerini kullanmaktır. Rgb, red, green ve blue renklerinin baş harflerinin birleşiminden gelir ve bu renklerin karışımı ile tüm renkleri elde edebiliriz.

Örnek olarak rgb(0,0,255) değeri maviyi verir çünkü diğer renklerin yoğunluğu 0’ken, mavinin değeri 255’tir. (Not : RGB değerinin alabileceği en büyük değer 255, en küçük değer 0’dır. Ayrıca tüm değerlerin 255 olması beyaz, 0 olması siyah demektir.)

Bu yazı dikkatini çekebilir.   HTML Arka Plan Resim ve Renk Ekleme

HTML RGB Renk Kodları

#CF2E2E

#FF6900

#000000

#660099

HTML Renklerin RGB ile Kullanımı

    <p style="color: rgb(255, 255, 0);">Evrensel Kod</p> <!-- Yazı sarı renkte -->
    <p style="color: rgb(0, 0, 0);">Evrensel Kod</p>  <!-- Yazı siyah renkte -->
    <p style="color: rgb(80, 80, 80);">Evrensel Kod</p>  <!-- Yazı gri renkte -->
    <p style="color: rgb(0, 0, 255);">Evrensel Kod</p>  <!-- Yazı mavi renkte -->

HTML HEX Değerleri

Bir diğer yol ise hex değerleridir. Hex, Türkçe anlamı onaltılık değerler olan hexadecimal’den gelir.

Hex değerlerinin örnek kullanımı : #000000

Örnekte de görebileceğiniz üzere ‘#’ işaretinden sonra gelen 6 rakam veya a-f arası harflerden oluşur. Rgb’ye benzer olarak yine ilk iki eleman kırmızı(red), sonraki iki eleman yeşil(green) ve son iki eleman ise mavi(blue)‘yi temsil eder.

HTML Renklerin RGB ile Kullanımı

    <p style="color: #FFFF00">Evrensel Kod</p> <!-- Yazı sarı renkte -->
    <p style="color: #000000">Evrensel Kod</p>  <!-- Yazı siyah renkte -->
    <p style="color: #808080">Evrensel Kod</p>  <!-- Yazı gri renkte -->
    <p style="color: #0000FF">Evrensel Kod</p>  <!-- Yazı mavi renkte -->

Bu yazımızda HTML renk kodları ve kullanımları konusunu işledik. Diğer HTML derslerimizi de görmek isterseniz buradan tümüne ulaşabilirsiniz.