Lorem ipsum dolor sit amet, consectetur adipisicing elit.
CSS

CSS’de RGB, HSL, Opaklık İşlemleri

Bu dersimizde size CSS dilinde renk, ton, doygunluk, açıklık, opaklık ve arkaplan işlemleri yapacağız.

Özel bir davete, bir akşam yemeğine veya toplantıya gideceğimiz kıyafetler kadar bu kıyafetlerin renkleri ve dokusu da çok önemlidir. Tıpkı bizler gibi web sitelerimizin de giyim tercihlerinin iyi düşünülmesi gerekmektedir.

(Bilgi: şu an tarayıcıların çoğu 140 renk ismi destekliyor. (black, green, magenta gibi…))

Renk Renk Adı HEX Değeri RGB Değeri
White - Beyaz #ffffff 255,255,255
Black - Siyah #000000 0,0,0
Red - Kırmızı #ff0000 255,0,0
Green - Yeşil #008000 0,128,0
Blue - Mavi #0000ff 0,0,255
Silver - Gümüş #c0c0c0 192,192,192
Gray - Gri #808080 128,128,128

RGB (Red, Green, Blue) Nedir?:

RGB bir renk uzayıdır. Dijital ekranlarda gördüğümüz görüntülerin hepsinde bu uzaydan yararlanılmaktadır. Çalışma prensibi kısaca bu 3 rengin birbirleri ile karıştırılmasıdır. 3 rengin %100 şekilde kullanılması ile beyaz, %0 oranında kullanılması ile siyah renk oluşur. Bu 3 ana rengin değişik oranlarda kullanılması ile de renkler oluşturulur. Tıpkı çocukken bizlere verilen gökkuşağı örneği gibi.

(Önemli: RGB sadece dijital ekranlar içindir. Fiziksel matbaa baskısı CMYK ile olur.)

RGB renk uzayında toplam 16.777.216 renk vardır.

HEX (Hexadecimal) Nedir?:

HEX 16’lık sayı sistemidir. Bilişim Teknolojilerinde en temel bilgilerden biri bilgisayarın çalışma prensibidir ve bilgisayarlar sayı sistemlerine göre çalışır (0 ve 1 gibi). HEX’te bir sayı sistemidir.

Kırmızı, Yeşil ve Mavi renklerinin hepsi bir HEX değeri alabilir ve #RRGGBB ile belirtilir. HEX kodunun en başına mutlaka # (diyez) işareti koyulmalıdır ve #000000 ile #ffffff arasında renk değerleri alınır.

Şimdi size birkaç RGB renk örneği göstereceğiz. Örnek olarak yeşil rengi verelim.

Kod üzerinde kullanımı:

.p {
    color: #008000; <!-- RRGGBB - ->
}

HTML Kodu:

<html>
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style>    
.p {
    color: #008000;
}
</style>
</head>
<body>
    <p>Merhaba Dünya</p>
</body>
</html>

Kısa ifade ile renk tanımlama

Bu ifade türünde sadece RRGGBB kodunu RGB olarak kısaltabiliriz. Yani #00bbaa kodunu #0ba olarak kısaltabiliriz fakat #1f44aa ifadesini kısaltamayız.

.p {
    color: #080;
}

HTML Kodu

<html >
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style>    
.p {
    color: #080;
}
</style>
</head>
<body>
    <p>Merhaba Dünya</p>
</body>
</html>

Tam sayı ile renk tanımlama: 16 milyon farklı renk oluşturmamızı yarayan şeyin HEX olduğunu söylemiştik. 3 oktetlik 3 sayı öbeğininim bütün kombinasyonları bize 16 milyon farklı rengi vermektedir. Her öbeğin değeri 0 ile 255 arasındadır. Neden 256 değil derseniz; sayı sistemleri 0’dan başlar. 0’da dahildir.

.p {
    color: rgb(0,128,0);
}

HTML Kodu

<html >
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style>    
.p {
    color: rgb(0,128,0);
}
</style>
</head>
<body>
    <p>Merhaba Dünya</p>
</body>
</html>

Yüzde ile renk tanımlama

.p {
    color: rgb(0%, 50%, 0%);
}

HTML Kodu

<html >
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style>    
.p {
    color: rgb(0%, 50%, 0%);
}
</style>
</head>
<body>
    <p>Merhaba Dünya</p>
</body>
</html>

Ayrıca RGBA (alfa kanalı) ile saydamlığı da aynı anda kontrol edebiliriz. Alfa kanalını, yani saydamlığı kontrol etmek için 0.0 (tamamen şeffaf) ile 1.0 (tam opak) arasında değerler veririz. (rgba (0,128,0, 0.2), rgba (0,128,0, 0.6), rgba (0,128,0, 1.0) gibi.)

Örnek:

.p {
    color: rgba (0,128,0, 0.2);
}

HTML Kodu

<html >
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style>    
.p {
    color: rgba (0,128,0, 0.2);
}
</style>
</head>
<body>
    <p>Merhaba Dünya</p>
</body>
</html>

Opacity özelliğini RGB’den ayrı olarak kullanmak istersek kullanımı şu şekildedir:

.p {
    background-color: rgb (0,120,0);opacity:0.8; <--! Ayrı bir özellik ve değer olarak ekliyoruz -->
}

HTML Kodu

<html >
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style>    
.p {
    background-color: rgb (0,120,0);opacity:0.8; <--! Ayrı bir özellik ve değer olarak ekliyoruz -->
}
</style>
</head>
<body>
    <p>Merhaba Dünya</p>
</body>
</html>

HSL (Ton-Hue, Doygunluk-Saturation, Açıklık-Lightness)

HSL ile RGB’den ayrı olarak renge ton, doygunluk ve ışık miktarı ekleyebiliriz. Bu 3 değerden ilki (Hue) derece cinsinden belirlenir. İkincisi (Saturation) % (yüzde) ile ifade edilir. Üçünce ve son değerimiz (Lightness) ise yine % (yüzde) ile ifade edilir.

HSL için örnek:

.p {
    color: hsl (120, 80%, 56%);
}

HTML Kodu

<html >
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style>    
.p {
    color: hsl (120, 80%, 56%);
}
</style>
</head>
<body>
    <p>Merhaba Dünya</p>
</body>
</html>

Tıpkı RGBA gibi HSLA özelliği de vardır. Bunun kullanımı da RGBA ile neredeyse aynıdır.

.p {
    background-color: hsla(55, %100, %30, 0.4);
}

HTML Kodu

<html >
<head>
<title>Arda Karaçayır – CSS Dersleri</title>
<style>    
.p {
    background-color: hsla(55, %100, %30, 0.4); <!-- Tıpkı RGBA gibi. Tek farkı HSL kodlarının sonuna yerleştirdik. -->
}
</style>
</head>
<body>
    <p>Merhaba Dünya</p>
</body>
</html>
Yorum Yap

Not: Yorum alanı HTML kod desteklememektedir...
Gönder
Yorum gönderildi. Onaylandıktan sonra yayınlanacaktır.
© 2020 - Arda KARAÇAYIR | Freelance Web Developer