HTML Renkleri Nelerdir? Nasıl Kullanılır? (HTML Dersleri 7)

Blog Gönderisi Resmi

Hizmetlerimiz hakkında bilgi almak için tıklayın.

HTML renkleri, önceden tanımlanmış renk adlarıyla veya RGB, HEX, HSL, RGBA veya HSLA değerleriyle belirtilir.

Renk Adları

HTML'de, bir renk adı kullanılarak bir renk belirtilebilir:

  1. Red
  2. Orange
  3. Blue
  4. Green
  5. Gray
  6. LightGray
  7. Violet
  8. SlateBlue

Arkaplan Renkleri

HTML öğeleri için arka plan rengini ayarlayabilirsiniz:

Örnek:


 <h4 style="background-color:red;">enesalp.com.tr</h4>
 <p style="background-color:green">enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri, sosyal medya hizmetleri,
 yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler bulunmaktadır,
  dersler ücretsizdir.</p>
 

Görünüm:

enesalp.com.tr

enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri, sosyal medya hizmetleri, yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler bulunmaktadır, dersler ücretsizdir.

Yazı Renkleri

Metnin rengini ayarlayabilirsiniz:

Örnek:


<h1 style="color:yellow;">Bu başlığın rengi sarı. </h1>
<p style="color:green;">Bu paragrafın rengi yeşil. </p>
<p style="color:red;">Bu paragrafın rengi kırmızı. </p>

Görünüm:

Bu başlığın rengi sarı.

Bu paragrafın rengi yeşil.

Bu paragrafın rengi kırmızı.

Kenarlık renkleri

Kenarlıkların rengini ayarlayabilirsiniz:

Örnek:


<h1 style="border:2px solid red;">Kenarlık rengi kırmızı</h1>
<h1 style="border:2px solid blue;">Kenarlık rengi mavi</h1>
<h1 style="border:2px solid orange;">Kenarlık rengi turuncu</h1>

Görünüm:

Kenarlık rengi kırmızı

Kenarlık rengi mavi

Kenarlık rengi turuncu

Renk Değerleri

HTML'de renkler, RGB değerleri, HEX değerleri, HSL değerleri, RGBA değerleri ve HSLA değerleri kullanılarak da belirtilebilir.

Aşağıdaki üç <div> öğesinin arka plan rengi RGB, HEX ve HSL değerleriyle ayarlanır:

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Aşağıdaki iki <div> öğesinin arka plan rengi, RGBA ve HSLA değerleriyle ayarlanmıştır (burada %50 şeffaflığa sahibiz):

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Şeffaflık derecesini ayarlamak için [hsla(9, 100%, 64%, 0.5)] 0.5 yazan bölümde ayarlamalar yapacağız, sıfıra yakın değerler şeffaflık derecesini arttırır, örneğin 1 verilseydi, şeffaff olmayacaktı. 0.3 %70 oranında şeffaflık anlamına gelecekti.

Siz de deneyin:


<div style="background-color:rgb(255, 99, 71);margin:10px 0;">rgb(255, 99, 71)</div>
<div style="background-color:#ff6347;margin:10px 0;">#ff6347</div>
<div style="background-color:hsl(9, 100%, 64%);margin:10px 0;">hsl(9, 100%, 64%)</div>
<div style="background-color:rgba(255, 99, 71, 0.5);margin:10px 0;">rgba(255, 99, 71, 0.5)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.5);margin:10px 0;">hsla(9, 100%, 64%, 0.5)</div>

RGB & RGBA Renk Değerleri

Bir RGB renk değeri, KIRMIZI, YEŞİL ve MAVİ ışık kaynaklarını temsil eder.

Bir RGBA renk değeri, opaklık ile RGB'nin bir uzantısıdır.

RGB Renk Değeri

HTML'de bir renk, şu formül kullanılarak bir RGB değeri olarak belirtilebilir:

rgb(red, green, blue)

Her parametre (kırmızı, yeşil ve mavi), rengin yoğunluğunu 0 ile 255 arasında bir değerle tanımlar.

Bu, 256 x 256 x 256 = 16777216 olası renk olduğu anlamına gelir!

Örneğin, rgb(255, 0, 0) kırmızı olarak görüntülenir çünkü kırmızı en yüksek değerine (255) ve diğer ikisi (yeşil ve mavi) 0'a ayarlanmıştır.

rgb(255, 0, 0)

Başka bir örnek, rgb(0, 255, 0) yeşil olarak gösterilir, çünkü yeşil en yüksek değerine (255) ve diğer ikisi (kırmızı ve mavi) 0'a ayarlıdır.

rgb(0, 255, 0)

Siyahı görüntülemek için tüm renk parametrelerini şu şekilde 0 olarak ayarlayın: rgb(0, 0, 0).

rgb(0, 0, 0)

Beyazı görüntülemek için tüm renk parametrelerini 255 olarak ayarlayın, örneğin: rgb(255, 255, 255).

rgb(255, 255, 255)
RGBA Renk Değeri

Bir renk değerine rgba(255, 0, 0, 0.5) parametresi tanımladığımızda opacity değeri ayarlamış oluruz, bu parametreler 0(tamamen yok olur) ile 1 arasındadır.

Örneğin:

  1. "background-color:rgba(255, 0, 0, 0);" arkaplan kırmızıdır fakat görünmezdir.

  2. "background-color:rgba(255, 0, 0, 0.1);" arkaplan kırmızıdır %90 oranında transparent.

  3. "background-color:rgba(255, 0, 0, 0.2);" arkaplan kırmızıdır %80 oranında transparent.

  4. "background-color:rgba(255, 0, 0, 0.3);" arkaplan kırmızıdır %70 oranında transparent.

  5. "background-color:rgba(255, 0, 0, 0.4);" arkaplan kırmızıdır %60 oranında transparent.

  6. "background-color:rgba(255, 0, 0, 0.5);" arkaplan kırmızıdır %50 oranında transparent.

  7. "background-color:rgba(255, 0, 0, 0.6);" arkaplan kırmızıdır %40 oranında transparent.

  8. "background-color:rgba(255, 0, 0, 0.7);" arkaplan kırmızıdır %30 oranında transparent.

  9. "background-color:rgba(255, 0, 0, 0.8);" arkaplan kırmızıdır %20 oranında transparent.

  10. "background-color:rgba(255, 0, 0, 0.9);" arkaplan kırmızıdır %10 oranında transparent.

  11. "background-color:rgba(255, 0, 0, 1);" arkaplan kırmızıdır transparent değeri yoktur.

HEX Renk Değeri

Onaltılık bir renk şununla belirtilir: #RRGGBB, burada RR (kırmızı), GG (yeşil) ve BB (mavi) onaltılık tamsayılar rengin bileşenlerini belirtir.

HTML'de, formda onaltılık bir değer kullanılarak bir renk belirtilebilir:

#rrggbb

Burada rr (kırmızı), gg (yeşil) ve bb (mavi), 00 ile ff arasındaki onaltılık değerlerdir (ondalık 0-255 ile aynı).

Örneğin, #ff0000 kırmızı olarak görüntülenir çünkü kırmızı en yüksek değerine (ff) ve diğer ikisi (yeşil ve mavi) 00'a ayarlanmıştır.

#ff0000

Başka bir örnek, #00ff00 yeşil olarak görüntülenir çünkü yeşil en yüksek değerine (ff) ve diğer ikisi (kırmızı ve mavi) 00'a ayarlanmıştır.

#00ff00

Siyahı görüntülemek için tüm renk parametrelerini 00 olarak ayarlayın, örneğin: #000000.

#000000

Beyazı görüntülemek için tüm renk parametrelerini ff olarak ayarlayın, örneğin: #ffffff.

#ffffff

HSL ve HSLA Renk Değerleri

HSL, ton, doygunluk ve parlaklık anlamına gelir.

HSLA renk değerleri, opaklık parametresi olarak HSL'nin bir uzantısıdır.

HSL Renk Değerleri

HTML'de bir renk, şu şekilde ton, doygunluk ve parlaklık (HSL) kullanılarak belirtilebilir:

Hue: Ton, renk tekerleğinde 0 ile 360 arasındaki bir derecedir. 0 kırmızı, 120 yeşil ve 240 mavidir.

Saturation: Doygunluk bir yüzde değeridir. %0, grinin bir tonu ve %100 tam renk anlamına gelir.

Lightness: Parlaklıkta bir yüzde değeridir. %0 siyah ve %100 beyazdır.

hsl(0, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
Saturation (Doygunluk)

->Doygunluk, bir rengin yoğunluğu olarak tanımlanabilir.

-> %100 saf renktir, grinin tonu yoktur.

->%50, %50 gridir, ancak yine de rengi görebilirsiniz.

->%0 tamamen gridir; artık rengi göremezsiniz.

hsl(0, 100%, 50%)
hsl(0, 50%, 50%)
hsl(0, 0%, 50%)
Lightness (Parlaklık)

Bir rengin açıklığı, renge ne kadar ışık vermek istediğiniz olarak tanımlanabilir;

->0% burada hiç ışık yok. (siyah.)

->50% burada %50 ışık var. (ne karanlık ne aydınlık.)

->100% burada tam parlaklık. (beyaz.)

hsl(0, 100%, 0%)
hsl(0, 50%, 50%)
hsl(0, 0%, 100%)
Grinin Tonları

Gri tonları genellikle ton ve doygunluğu 0'a ayarlayarak ve daha koyu/açık gölgeler elde etmek için açıklığı %0'dan %100'e ayarlayarak tanımlanır:

hsl(0, 0%, 20%)
hsl(0, 0%, 40%)
hsl(0, 0%, 70%)
HSLA Renk Değerleri

HSLA renk değerleri, bir rengin opaklığını belirten bir Alpha kanalıyla HSL renk değerlerinin bir uzantısıdır.

Bir HSLA renk değeri şu şekilde belirtilir:

hsla(hue, saturation, lightness, alpha)

alpha parametresi 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasında bir sayıdır:

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.7)
hsla(9, 100%, 64%, 1)

Bu bölümde neler öğrendik?

-> color: yazı rengini belirler.

-> background-color: arkaplan rengini belirler.

-> border-color: kenarlık rengini belirler.

-> bir renk adı kullanarak style belirtebiliriz.

-> RGB kullanarak kırmızı, yeşil ve mavi renk yoğunluğu arasında renk seçimi.

-> RGBA kullanmak, opacity değerini ayarlar.

-> HEX #RRGGBB, RR (kırmızı), GG (yeşil) ve BB (mavi) onaltılık tamsayılar rengin bileşenlerini belirtir.

-> HSL ton, doygunluk ve parlaklık belirler.

-> HSLA ton, doygunluk, parlaklık ve opaklık belirler.

Sizin İçin Önerdiklerimiz

Blog Resim
HTML (Hypertext Markup Language) Nedir?

HTML

HTML, web sayfalarının tasarlanması ve tanımlanması için kullanılan bir etiket dili olarak tanımlanabilir. HTML, web sayfalarındaki metinleri, ..

Devamını Oku
Blog Resim
HTML Input Type Nedir? Örnekleri Nelerdir?

HTML

Günümüzde web tasarımı, işletmelerin bir online varlık oluşturması için çok önemli hale geldi. Web siteleri, işletmelerin ürünlerini ve hizmetlerini müşterilere..

Devamını Oku
Blog Resim
HTML Yazı Elementleri ve Kullanım Örnekleri (Ders-5)

HTML

Merhabalar! 5. Bölüme Hoşgeldiniz, bu bölümde HTML yazılarının elementleri ve kullanım örneklerini göstereceğiz. HTML (Hyper Text Markup Language)..

Devamını Oku
Blog Resim
HTML'de CSS Nasıl Kullanılır? Örnekleriyle (Ders-8)

HTML

Günümüzde web siteleri, birçok kişi için önemli bir gelir kaynağı olmaktadır. Web siteleri, kullanıcıların ihtiyaçlarına göre tasarlanır ve bu tasarımın..

Devamını Oku