CSS’ te Renkler, önceden tanımlanmış renk adları veya RGB, HEX, HSL, RGBA, HSLA değerleri kullanılarak belirtilir.
HTML’de, bir renk adı kullanılarak bir renk belirtilebilir:
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <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> |
Çıktı:
Arkaplan (Background) Renklendirme:
HTML öğeleri için arka plan rengini ayarlayabilirsiniz.Bu işlem için background-color özelliğine değer verilmelidir.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <body> <h1 style="background-color:DodgerBlue;">CSS Arkaplan Renkleri</h1> <p style="background-color:Tomato;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> </body> </html> |
Ekran Çıktısı:
Metin Rengi (Text Color):
Sayfada bulunan metinler color özelliği kullanılarak değiştirilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <body> <h3 style="color:Tomato;">CSS Metinleri Renklendirme</h3> <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html> |
Kenarlık (Border) Renklendirme:
Html sayfasında bulunan öğelerin kenarlıkları border-color özelliği kullanılarak renklendirilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <body> <h1 style="border: 4px solid Tomato;">Tasarım Kodlama</h1> <h1 style="border: 4px solid DodgerBlue;">Tasarım Kodlama</h1> <h1 style="border: 4px solid Violet;">Tasarım Kodlama</h1> </body> </html> |
CSS Renk Değerleri ile Çalışma:
HTML’de renkler RGB değerleri, HEX değerleri, HSL değerleri, RGBA değerleri ve HSLA değerleri kullanılarak da belirtilebilir.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <body> <p>"Tomato" rengi için bazı değerler:</p> <h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1> <h1 style="background-color:#ff6347;">#ff6347</h1> <h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1> <p>"Tomato" rengine %50 şeffaflık (transparan) verelim.</p> <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1> <p>Önceden tanımlanmış renk adlarına ek olarak, RGB, RGBA veya HSLA renk değerlerini kullanarak RGB, HEX, HSL ve hatta saydam renkler kullanılarak renkler belirtilebilir.</p> </body> </html> |
Ekran Çıktısı:
RGB ile Renklendirme:
HTML’de, alttaki formül kullanılarak RGB değeri olarak bir renk belirtilebilir:
rgb (kırmızı, yeşil, mavi)
Her parametre (kırmızı, yeşil ve mavi), rengin yoğunluğunu 0 ile 255 arasında 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) ayarlanır ve diğerleri 0 olarak ayarlanır.
Siyah rengi görüntülemek için tüm renk parametreleri 0 olarak ayarlayın, bunun gibi: rgb (0, 0, 0).
Beyaz rengi görüntülemek için, tüm renk parametreleri şu şekilde 255 olarak ayarlanmalıdır: rgb (255, 255, 255).
Aşağıdaki RGB değerlerini karıştırarak deney yapın:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <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> <p>HTML'de RGB değerlerini kullanarak renkleri belirtebilirsiniz.</p> </body> </html> |
Gri tonları genellikle 3 ışık kaynağının tümü için eşit değerler kullanılarak tanımlanır:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <body> <h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1> <h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1> <h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1> <h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1> <h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1> <h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1> <p>Kırmızı, yeşil ve mavi için eşit değerler kullanarak, farklı gri tonları elde edeceksiniz.</p> </body> </html> |
Ekran Çıktısı:
HEX Değer ile Renklendirme
HTML’de, aşağıdaki şekilde onaltılık bir değer kullanılarak bir renk belirtilebilir:
#rrggbb
rr (kırmızı), gg (yeşil) ve bb (mavi), 00 ve ff arasında onaltılık değerlerdir (ondalık 0-255 ile aynıdır) ).
Örneğin, FF0000 kırmızı olarak gösterilir, çünkü kırmızı en yüksek değerine (ff) ayarlanır ve diğerleri en düşük değere (00) ayarlanır.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <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> |
CSS’ te HSL Değer ile Renklendirme:
HTML’de, bir renk ton, doygunluk ve açıklık (HSL) kullanılarak şu şekilde tanımlanabilir:
hsl (ton, doygunluk, hafiflik)
Hue, renk tekerleğinde 0’dan 360’a kadar bir derecedir. 0 kırmızıdır 120, yeşil ve 240 mavi.
Doygunluk bir yüzde değeri,% 0 gri tonu anlamına gelir ve% 100 tam renklidir.
Işık da yüzde,% 0 siyah,% 50 açık veya koyu,% 100 beyaz.
Örnek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <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> <p>HTML'de HSL değerlerini kullanarak renkleri belirtebilirsiniz.</p> </body> </html> |
Doygunluk (Saturation)
Doygunluk, bir rengin yoğunluğu olarak tanımlanabilir.
% 100 saf renktedir, gri
% 50’nin hiçbir gölgesi% 50 gri değildir, ancak yine de rengi görebilirsiniz.
% 0 tamamen gridir, artık rengi göremezsiniz.
Açıklık(Lightness)
Bir rengin açıklığı, rengi vermek istediğiniz ışık miktarı olarak tanımlanabilir, burada% 0 ışık (siyah) anlamına gelir,% 50,% 50 ışık anlamına gelir (ne karanlık ne de açık)% 100, tam ışık anlamına gelir (beyaz).
Gri tonları genellikle tonu ve doygunluğu 0’a ayarlayarak tanımlanır ve daha koyu / açık tonları elde etmek için açıklığı% 0’dan% 100’e ayarlayın.
CSS RGBA Değeri ile Renklendirme Yapma:
RGBA renk değerleri, bir renk için opaklığı belirten bir alfa kanalı olan RGB renk değerlerinin bir uzantısıdır.
Bir RGBA renk değeri şu şekilde belirtilir:
rgba (kırmızı, yeşil, mavi, alfa)
Alfa parametresi 0.0 (tamamen şeffaf) ve 1,0 (saydam değil) arasında bir sayıdır.
CSS HSLA Değeri ile Renklendirme:
HSLA renk değerleri, bir renk için opaklığı belirten bir alfa kanalı olan HSL renk değerlerinin bir uzantısıdır.
Bir HSLA renk değeri şu şekilde belirtilir:
hsla (ton, doygunluk, hafiflik, alfa)
Alfa parametresi 0.0 (tamamen şeffaf) ve 1,0 (saydam değil) arasında bir sayıdır:
1 Yorum