CSS Renkleri
Bir web sayfasının görünümüyle oynayacaksanız, doğru yapmanız gereken en önemli işlerden biri renktir. Metni, arka planı, sınırını ve daha fazlasını içeren web sitemizin, renklerini değiştirebiliriz. Doğru renk düzenini elde etmek sayfalarımızın görünümünü önemli ölçüde etkileyebilir. Çeşitli biçimlerde renk değerlerinizi belirtebilirsiniz. Renkler;
- Önceden Tanımlı Renk Adları
- RGB
- HEX
- HSL
- RGBA
- HSLA
değerleri kullanılarak belirtilir.
1-HTML ile bir renk, önceden tanımlanmış adı kullanarak belirtilebilir;
HTML’de isimlendirilmiş 140 civarında renk tanımı vardır. Bu renklerden birini kullanmak için tanım adını vermeniz yeterlidir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="css renkler"> <title>CSS Renkler</title> </head> <body> <h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:Orange;">Orange</h1> <h1 style="background-color:DodgerBlue;">DodgerBlue</h1> <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1> <h1 style="background-color:Gray;">Gray</h1> <h1 style="background-color:SlateBlue;">SlateBlue</h1> <h1 style="background-color:Violet;">Violet</h1> <h1 style="background-color:LightGray;">LightGray</h1> </body> </html> |
Yukarıdaki örnekte <h1> etiketlerinin background-color özelliğine renklerin adlarının uygulandığını görebilirsiniz.
2-RGB Değerleri ile Çalışmak
HTML’de, bir renk aşağıdaki formülü kullanarak bir RGB değeri olarak belirtilebilir:
rgb ( kırmızı, yeşil , mavi )
Her parametre (kırmızı, yeşil ve mavi) 0 ile 255 arasındaki rengin yoğunluğunu tanımlar. Örneğin rgb (255, 0, 0) kırmızı olarak görüntülenir, çünkü kırmızı en yüksek değerine (255), diğerleri 0’a ayarlanmıştır. Siyah rengi görüntülemek için, tüm renk parametrelerinin rgb (0, 0, 0) olarak ayarlanması gerekir. Beyaz rengi görüntülemek için, tüm renk parametrelerinin 255 olarak ayarlanması gerekir: rgb (255, 255, 255)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="css renkler"> <title>CSS Renkler</title> </head> <body> <h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1> <h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1> <h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1> <h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1> <h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1> <h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1> </body> </html> |
Yukarıdaki örnekte farklı RGB değerleri ile renk gösterimi yapılmıştır.
3-HEXADECIMAL (Onaltılık) Sayı Olarak Renk Değerleri
Onaltılık, bir rengin 6 basamaklı bir temsilidir.
# rrggbb
Her onaltılık kodu ‘#’ işareti ile birlikte belirtilmelidir.
İlk iki rakam (RR) kırmızı bir değeri temsil eder, sonraki ikisi yeşil bir değerdir (GG) ve sonuncusu mavi değerdir (BB).
Her renk birimi 00 ile ff arasındaki onaltılık değerler olabilir.(ondalık 0-255 ile aynıdır).
Örneğin, kırmızı, en yüksek değerine (ff) ve diğerleri en düşük değere (00) ayarlandığından # ff0000 kırmızı olarak görüntülenir.
Onaltılık bir değer, Adobe Photoshop, Jasc Paintshop Pro gibi herhangi bir grafik yazılımından veya hatta Gelişmiş Paint Fırça kullanılarak alınabilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="css renkler"> <title>CSS Renkler</title> </head> <body> <h1 style="background-color:#ff0000;">#ff0000</h1> <h1 style="background-color:#0000ff;">#0000ff</h1> <h1 style="background-color:#3cb371;">#3cb371</h1> <h1 style="background-color:#ee82ee;">#ee82ee</h1> <h1 style="background-color:#ffa500;">#ffa500</h1> <h1 style="background-color:#6a5acd;">#6a5acd</h1> </body> </html> |
Yukarıdaki örneğimizde onaltılık (hexadecimal) değerler kullanılarak çeşitli renk gösterimi yapılmıştır.
4-HSL Değeri Kullanımı
Renkleri temsil etmenin başka bir yolu da HSL‘dir.
hsl ( ton , doygunluk , hafiflik )
Ton, renk çarkı üzerinde bir dereceye kadar baz rengi belirtir. Kırmızı 0 °, yeşil 120 °, mavi 240 ° ve nihayetinde yine 360 ° döndürür.
Ardından , rengin ne kadar canlı olduğu Doygunluğu belirtiyoruz . Tam canlılık 100 ve donuk veya gri olan 0 arasında bir değere sahiptir.
Son olarak Parlaklık veya açıklık belirtiyoruz. Siyaha eğilimli olan 0 ile beyaza eğilimli olan 100 arasında bir değere sahiptir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="css renkler"> <title>CSS Renkler</title> </head> <body> <h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1> <h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1> <h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1> <h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1> <h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1> <h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1> </body> </html> |
Yukarıdaki örnekte HSL değerleri üzerinden farklı renk gösterimi yapılmıştır.
5-RGBA Değeri
RGBA renk değerleri, RGB değerinin yanı sıra bir rengin opaklığını (şeffaflığı) belirleyen bir alfa kanalının eklenmesiyle belirtilir. Bir RGBA renk değeri aşağıdaki şekilde tanımlanır:
rgba ( kırmızı, yeşil , mavi, alfa )
Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasındaki bir sayıdır:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="css renkler"> <title>CSS Renkler</title> </head> <body> <h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1> <h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1> <h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1> </body> </html> |
Yukarıdaki örnekte RGBA değerleri kullanılarak farklı renk gösterimi yapılmıştır.
6-HSLA Değeri
HSLA renk değerleri, HSL değerine sahip bir rengin opaklığını belirleyen bir alfa kanalı ile birlikte belirtilir. Bir HSLA renk değeri aşağıdaki şekilde tanımlanır:
hsla ( ton, doygunluk , açıklık, alfa )
Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasındaki bir sayıdır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="css renkler"> <title>CSS Renkler</title> </head> <body> <h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.4)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1> </body> </html> |
Yukarıdaki örnekte HSLA değerleri kullanılarak farklı renk gösterimi yapılmıştır.
[…] CSS Renkler ile Çalışma […]
[…] […]