• Gri-mavi kod. Stillerdeki renk farklı şekillerde ayarlanabilir: onaltılık değere göre, ada göre, RGB, RGBA, HSL, HSLA formatında

    Renkleri belirtmek için onaltılık sayılar kullanılır. Onaltılık sistem, onluk sistemden farklı olarak adından da anlaşılacağı gibi 16 sayısını temel alır. Sayılar şu şekilde olacaktır: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. 10'dan 15'e kadar olan sayılar Latin harfleriyle değiştirilir. Onaltılık sistemde 15'ten büyük sayılar, iki sayının bir sayı olarak birleştirilmesiyle oluşturulur. Örneğin, ondalık sistemdeki 255 sayısı, onaltılık sistemdeki FF sayısına karşılık gelir. Sayı sisteminin tanımında karışıklığı önlemek için, onaltılık sayıdan önce # hash sembolü gelir, örneğin #666999. Üç rengin her biri - kırmızı, yeşil ve mavi - 00'dan FF'ye kadar değerler alabilir. Böylece, rengin tanımı üç bileşene ayrılır #rrggbb, burada ilk iki karakter rengin kırmızı bileşenini, ortadaki iki karakter yeşili ve son iki karakter maviyi işaretler. Her karakterin ikiye katlanması gereken kısaltılmış #rgb formunun kullanılmasına izin verilir. Bu nedenle, #fe0 girişi #ffee00 olarak kabul edilmelidir.

    isimle

    internet gezgini Krom Opera safari Firefox Android iOS
    4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

    Tarayıcılar bazı renkleri ada göre destekler. Masada. 1 adları, hex kodunu, RGB, HSL formatındaki değerleri ve açıklamayı gösterir.

    Sekme 1. Renk adları
    İsim Renk kod RGB HSL Tanım
    beyaz #ffff veya #ffff rgb(255,255,255) hsl(0.0%,100%) Beyaz
    gümüş #c0c0c0 rgb(192,192,192) hsl(0.0%,75%) Gri
    gri #808080 rgb(128,128,128) hsl(0.0%,50%) Koyu gri
    siyah #000000 veya #000 rgb(0,0,0) hsl(0,0%,0%) Siyah
    bordo #800000 rgb(128,0,0) hsl(0,100%,25%) Koyu Kırmızı
    kırmızı #ff0000 veya #f00 rgb(255,0,0) hsl(0,100%,50%) Kırmızı
    turuncu #ffa500 rgb(255,165,0) hsl(38,8,100%,50%) Turuncu
    sarı #ffff00 veya #ff0 rgb(255,255,0) hsl(60,100%,50%) Sarı
    zeytin #808000 rgb(128,128,0) hsl(60,100%,25%) zeytin
    kireç #00ff00 veya #0f0 rgb(0,255,0) hsl(120,100%,50%) açık yeşil
    yeşil #008000 rgb(0,128,0) hsl(120,100%,25%) Yeşil
    su #00ffff veya #0ff rgb(0,255,255) hsl(180,100%,50%) Mavi
    mavi #0000ff veya #00f rgb(0,0,255) hsl(240,100%,50%) Mavi
    Donanma #000080 rgb(0,0,128) hsl(240,100%,25%) Koyu mavi
    deniz mavisi #008080 rgb(0,128,128) hsl(180,100%,25%) Mavi-yeşil
    fuşya #ff00ff veya #f0f rgb(255,0,255) hsl(300,100%,50%) Pembe
    mor #800080 rgb(128,0,128) hsl(300,100%,25%) Menekşe

    RGB ile

    internet gezgini Krom Opera safari Firefox Android iOS
    5.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

    Kırmızı, yeşil ve mavi değerlerini ondalık olarak kullanarak bir renk tanımlayabilirsiniz. Üç renk bileşeninin her biri 0 ile 255 arasında bir değer alır. Rengin yüzde olarak ayarlanması da kabul edilebilirken %100, 255 sayısına karşılık gelir. Önce rgb anahtar sözcüğü belirtilir ve ardından renk bileşenleri belirlenir. parantez içinde belirtilir ve virgülle ayrılır, örneğin rgb(255 , 128, 128) veya rgb(100%, %50, %50).

    RGBA

    internet gezgini Krom Opera safari Firefox Android iOS
    9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

    RGBA formatı, sözdiziminde RGB'ye benzer, ancak öğenin şeffaflığını ayarlayan bir alfa kanalı içerir. 0 değeri tamamen saydamdır, 1 opaktır ve 0,5 gibi bir ara değer yarı saydamdır.

    RGBA, CSS3'e eklenir, bu nedenle CSS kodunun doğrulaması bu sürüme göre yapılmalıdır. CSS3 standardının hala geliştirilme aşamasında olduğunu ve bazı özelliklerinin değişebileceğini belirtmek gerekir. Örneğin, arka plan rengi özelliğine eklenen bir RGB rengi doğrulamayı geçer, ancak arka plan özelliğine eklenen bir renk doğrulamadan geçer. Aynı zamanda, tarayıcılar her iki özellik için de rengi oldukça doğru bir şekilde anlar.

    HSL

    internet gezgini Krom Opera safari Firefox Android iOS
    9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

    HSL formatının adı, Hue (hue), Saturate (doygunluk) ve Lightness (hafiflik) baş harflerinin birleşiminden oluşur. Ton, renk çarkındaki renk değeridir (Şek. 1) ve derece olarak belirtilir. 0° kırmızı, 120° yeşil ve 240° mavidir. Ton değeri 0 ila 359 arasında değişebilir.

    Pirinç. 1. Renk çarkı

    Doygunluk, bir rengin yoğunluğudur ve %0 ile %100 arasında bir yüzde olarak ölçülür. %0 değeri renk olmadığını ve gri tonunu belirtir, %100 maksimum doygunluk değeridir.

    Açıklık, rengin ne kadar parlak olduğunu ayarlar ve %0 ile %100 arasında bir yüzde olarak belirtilir. Küçük değerler rengi daha koyu, yüksek değerler ise daha açık yapar, %0 ve %100 gibi uç değerler siyah beyaza karşılık gelir.

    HSLA

    internet gezgini Krom Opera safari Firefox Android iOS
    9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

    HSLA formatı, sözdiziminde HSL'ye benzer, ancak öğenin şeffaflığını ayarlayan bir alfa kanalı içerir. 0 değeri tamamen saydamdır, 1 opaktır ve 0,5 gibi bir ara değer yarı saydamdır.

    RGBA, HSL ve HSLA formatlarındaki renk değerleri CSS3'e eklenir, bu nedenle bu formatları kullanırken kodun sürümle geçerliliğini kontrol edin.

    HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

    Renkler

    Uyarı

    Sitede listelenen tüm aslan yakalama yöntemleri teoriktir ve hesaplama yöntemlerine dayanmaktadır. Yazarlar, bunları kullanırken güvenliğinizi garanti etmez ve sonuç için herhangi bir sorumluluk kabul etmez. Unutmayın, aslan bir avcı ve tehlikeli bir hayvandır!

    Aaaa!

    Bu örneğin sonucu Şekil l'de gösterilmiştir. 2.

    Pirinç. 2. Web sayfasındaki renkler

    Vlad Merjeviç

    HTML'de renk iki yoldan biriyle belirtilir: onaltılık bir kod kullanılarak ve bazı renklerin adıyla. En yaygın kullanılan yöntem, en evrensel olan onaltılık sisteme dayanmaktadır.

    Onaltılık renkler

    HTML, renkleri belirtmek için onaltılık sayılar kullanır. Onaltılık sistem, onluk sistemden farklı olarak adından da anlaşılacağı gibi 16 sayısını temel alır. Sayılar şu şekilde olacaktır: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. 10'dan 15'e kadar olan sayılar Latin harfleriyle değiştirilir. Masada. 6.1 ondalık ve onaltılık sayılar arasındaki yazışmayı gösterir.

    Onaltılık sistemde 15'ten büyük sayılar iki sayının birleştirilmesiyle oluşturulur (Tablo 6.2). Örneğin, ondalık sistemdeki 255 sayısı, onaltılık sistemdeki FF sayısına karşılık gelir.

    Sayı sisteminin tanımında karışıklığı önlemek için, onaltılık sayıdan önce diyez işareti # gelir, örneğin #aa69cc. Bu durumda durum fark etmez, bu nedenle #F0F0F0 veya #f0f0f0 yazılmasına izin verilir.

    HTML'de kullanılan tipik bir renk aşağıdaki gibidir.

    Burada web sayfasının arka plan rengi #FA8E47 olarak ayarlanmıştır. Bir sayının önündeki pound işareti # onaltılık olduğu anlamına gelir. İlk iki basamak (FA) rengin kırmızı bileşenini, üçüncü ila dördüncü basamaklar (8E) yeşil bileşeni ve son iki basamak (47) mavi bileşeni tanımlar. Sonuç bu renktir.

    FA + 8E + 47 = FA8E47

    Üç rengin her biri - kırmızı, yeşil ve mavi - sonunda 256 ton oluşturan 00'dan FF'ye kadar değerler alabilir. Böylece toplam renk sayısı 256x256x256 = 16.777.216 kombinasyon olabilir. Kırmızı, yeşil ve mavi bileşenlere dayanan renk modeline RGB (kırmızı, yeşil, mavi; kırmızı, yeşil, mavi) denir. Bu model, üç bileşenin de eklenmesinin beyaz oluşturduğu katkı maddesidir (ekle - ekle).

    Onaltılık renklerde gezinmeyi kolaylaştırmak için bazı kuralları dikkate alın.

    • Renk bileşenlerinin değerleri aynıysa (örneğin: #D6D6D6), o zaman gri bir ton elde edilir. Sayı ne kadar yüksek olursa, renk o kadar açık olur ve değerler #000000'den (siyah) #FFFFFF'ye (beyaz) değişir.
    • Kırmızı bileşen maksimum yapılırsa (FF) ve bileşenlerin geri kalanı sıfıra ayarlanırsa parlak kırmızı bir renk oluşur. #FF0000 değerine sahip renk, olası en kırmızı kırmızı tondur. Aynısı yeşil (#00FF00) ve mavi (#0000FF) için de geçerlidir.
    • Sarı (#FFFF00), kırmızı ile yeşilin karıştırılmasıyla elde edilir. Bu, ana renkleri (kırmızı, yeşil, mavi) ve tamamlayıcı veya tamamlayıcı renkleri sunan renk tekerleğinde (Şekil 6.1) açıkça görülmektedir. Bunlar sarı, cam göbeği ve menekşeyi (macenta olarak da adlandırılır) içerir. Genelde herhangi bir renk, yanındaki renkler karıştırılarak elde edilebilir. Böylece, mavi ve yeşil birleştirilerek cam göbeği (#00FFFF) elde edilir.

    Pirinç. 6.1. Renk çemberi

    Onaltılık değerlere dayalı renklerin ampirik olarak seçilmesi gerekmez. Bunun için Adobe Photoshop gibi farklı renk modelleri ile çalışabilen bir grafik düzenleyici uygundur. Şek. 6.2, bu programda bir renk seçmek için bir pencere gösterir, çizgi, mevcut rengin ortaya çıkan onaltılık değerini daire içine alır. Kopyalayıp kodunuza yapıştırabilirsiniz.

    Pirinç. 6.2. Photoshop'ta renk seçici

    Web Renkleri

    Monitörün renk kalitesini 8 bit (256 renk) olarak ayarlarsanız, aynı renk farklı tarayıcılarda farklı şekilde görüntülenebilir. Bu, tarayıcı kendi paletiyle çalıştığında ve paletinde olmayan bir rengi gösteremediğinde grafiklerin işlenme şekliyle ilgilidir. Bu durumda, renk, verileni taklit eden diğer renklerin piksellerinin bir kombinasyonu ile değiştirilir. Rengin farklı tarayıcılarda aynı kalması için web renklerinden oluşan bir palet tanıtıldı. Web renkleri, her bileşeni için - kırmızı, yeşil ve mavi - altı değerden birinin ayarlandığı - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). Bu bileşenin onaltılık değeri parantez içinde belirtilmiştir. Tüm olası kombinasyonlardan toplam renk sayısı 6x6x6 - 216 renk verir. Örnek bir web rengi #33FF66'dır.

    Web renginin ana özelliği, tüm tarayıcılarda aynı şekilde görüntülenmesidir. Şu anda, monitörlerin kalitesindeki iyileşme ve yeteneklerinin genişletilmesi nedeniyle web renklerinin alaka düzeyi çok küçük.

    İsme göre renkler

    Bir sayı koleksiyonunu hatırlamamak için, bunun yerine yaygın olarak kullanılan renklerin adlarını kullanabilirsiniz. Masada. 6.3 popüler renk isimlerinin isimlerini gösterir.

    Sekme 6.3. Bazı renklerin isimleri
    renk adı Renk Tanım Onaltılık değer
    siyah Siyah #000000
    mavi Mavi #0000FF
    fuşya Açık mor #FF00FF
    gri Koyu gri #808080
    yeşil Yeşil #008000
    kireç açık yeşil #00FF00
    bordo Koyu Kırmızı #800000
    Donanma Koyu mavi #000080
    zeytin zeytin #808000
    mor Koyu mor #800080
    kırmızı Kırmızı #FF0000
    gümüş açık gri #C0C0C0
    deniz mavisi Mavi-yeşil #008080
    beyaz Beyaz #FFFFFF
    sarı Sarı #FFFF00

    Rengi, adına göre veya onaltılık sayılar kullanarak nasıl belirttiğiniz önemli değildir. Etkilerinde, bu yöntemler eşittir. Örnek 6-1, bir web sayfasının arka plan ve metin renklerinin nasıl ayarlanacağını gösterir.

    Örnek 6.1. Arka plan ve metin rengi

    Renkler

    Örnek yazı

    Bu örnekte, arka plan rengi etiketinin bgcolor özelliği kullanılarak ayarlanır. ve text niteliği aracılığıyla metnin rengi. Çeşitlilik için, metin özniteliğinin değeri onaltılık bir sayıya ayarlanır ve bgcolor, ayrılmış teal anahtar sözcüğüne ayarlanır.

    HTML'de renk üç şekilde belirtilebilir:

    HTML'de rengi adına göre ayarlama

    Bazı renkler, değer olarak rengin İngilizce adı kullanılarak adlarıyla belirtilebilir. En yaygın anahtar kelimeler: siyah (siyah), beyaz (beyaz), kırmızı (kırmızı), yeşil (yeşil), mavi (mavi), vb.:

    Metin Rengi - Kırmızı

    World Wide Web Consortium (W3C) standardının en popüler renkleri şunlardır:

    RenkİsimRenkİsim Renkİsim Renkİsim
    Siyah Gri Gümüş Beyaz
    Sarı kireç su Fuşya
    Kırmızı Yeşil Mavi Mor
    bordo zeytin Donanma deniz mavisi

    Farklı renk adlarının kullanımına bir örnek:

    Örnek: adına göre bir renk ayarlama

    • Kendin dene "

    Kırmızı zemin üzerine başlık

    Turuncu zemin üzerine başlık

    Kireç arka plan üzerinde başlık

    Mavi zemin üzerine beyaz metin

    Kırmızı zemin üzerine başlık

    Turuncu zemin üzerine başlık

    Kireç arka plan üzerinde başlık

    Mavi zemin üzerine beyaz metin

    RGB ile renk belirleme

    Farklı renkleri monitörde görüntülerken RGB paleti esas alınır. Üç ana renk karıştırılarak herhangi bir renk elde edilir: R - kırmızı, G - yeşil (yeşil), B - mavi (mavi). Her rengin parlaklığı bir byte ile verilir ve bu nedenle 0 ile 255 arasında değerler alabilir. Örneğin RGB (255,0,0) kırmızı olarak gösterilir çünkü kırmızı en yüksek değerine (255) ayarlıdır ve diğerleri 0 olarak ayarlanmıştır. Rengi yüzde olarak da ayarlayabilirsiniz. Parametrelerin her biri, karşılık gelen rengin parlaklık seviyesini gösterir. Örneğin: rgb(127, 255, 127) ve rgb(50%, 100%, 50%) değerleri aynı orta doygunluk yeşil rengini ayarlayacaktır:

    Örnek: RGB ile renk belirleme

    • Kendin dene "

    rgb(127, 255, 127)

    rgb(%50, %100, %50)

    rgb(127, 255, 127)

    rgb(%50, %100, %50)

    Rengi onaltılık değere göre ayarla

    Değerler R G B ayrıca şu biçimde onaltılık (HEX) renk değerleri kullanılarak belirtilebilir: #RRGGBB burada RR (kırmızı), GG (yeşil) ve BB (mavi) 00'dan FF'ye kadar onaltılık değerlerdir (ondalık 0- ile aynı) 255) . Onaltılı sistem, onlu sistemden farklı olarak adından da anlaşılacağı gibi 16 sayısını temel alır. Onaltılı sistem şu karakterleri kullanır: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Burada 10'dan 15'e kadar olan sayılar Latin harfleriyle değiştirilmiştir. Onaltılık sistemde 15'ten büyük sayılar, iki karakterin bir değerde birleşimidir. Örneğin, ondalıktaki en yüksek sayı olan 255, onaltılıktaki en yüksek FF'ye karşılık gelir. Ondalık sistemden farklı olarak, onaltılık sayıdan önce bir pound işareti gelir. # , örneğin #FF0000 kırmızı olarak görüntülenir çünkü kırmızı en yüksek değerine (FF) ve diğer renkler minimum değerlerine (00) ayarlanmıştır. Hash sembolünden sonraki karakterler # hem büyük hem de küçük harf olarak yazılabilir. Onaltılık sistem, her karakterin iki katına eşit olduğu kısaltılmış #rgb biçimini kullanmanıza olanak tanır. Bu nedenle, #f7O girişi #ff7700 olarak kabul edilmelidir.

    Örnek: Renkli HEX

    • Kendin dene "

    kırmızı: #FF0000

    yeşil: #00FF00

    mavi: #0000FF

    kırmızı: #FF0000

    yeşil: #00FF00

    mavi: #0000FF

    kırmızı+yeşil=sarı: #FFFF00

    kırmızı+mavi=mor: #FF00FF

    yeşil+mavi=cam göbeği: #00FFFF

    Yaygın olarak kullanılan renklerin listesi (ad, HEX ve RGB):

    İngilizce başlık Rus adı Örnek HEX RGB
    solmayan çiçek solmayan çiçek #E52B50 229 43 80
    Kehribar Kehribar #FFBF00 255 191 0
    su Mavi-yeşil #00FFFF 0 255 255
    gök mavisi gök mavisi #007FFF 0 127 255
    Siyah Siyah #000000 0 0 0
    Mavi Mavi #0000FF 0 0 255
    Bondi Mavisi Bondi sahil suyu #0095B6 0 149 182
    Pirinç Pirinç #B5A642 181 166 66
    Kahverengi Kahverengi #964B00 150 75 0
    gök mavisi gök mavisi #007BA7 0 123 167
    koyu bahar yeşili Koyu bahar yeşili #177245 23 114 69
    Zümrüt Zümrüt #50C878 80 200 120
    Patlıcan patlıcan #990066 153 0 102
    Fuşya Fuşya #FF00FF 255 0 255
    Altın Altın #FFD700 250 215 0
    Gri Gri #808080 128 128 128
    Yeşil Yeşil #00FF00 0 255 0
    indigo indigo #4B0082 75 0 130
    yeşim taşı yeşim taşı #00A86B 0 168 107
    kireç Kireç #CCFF00 204 255 0
    Malakit Malakit #0BDA51 11 218 81
    Donanma Koyu mavi #000080 0 0 128
    Okra Okra #CC7722 204 119 34
    zeytin zeytin #808000 128 128 0
    Turuncu Turuncu #FFA500 255 165 0
    şeftali şeftali #FFE5B4 255 229 180
    Kabak Kabak #FF7518 255 117 24
    Mor Menekşe #800080 128 0 128
    Kırmızı Kırmızı #FF0000 255 0 0
    Safran Safran #F4C430 244 196 48
    deniz yeşili yeşil deniz #2E8B57 46 139 87
    Bataklık yeşili Bolotny #ACB78E 172 183 142
    deniz mavisi Mavi-yeşil #008080 0 128 128
    Lacivert lacivert #120A8F 18 10 143
    menekşe Menekşe #8B00FF 139 0 255
    Sarı Sarı #FFFF00 255 255 0

    Doygunluk ve tona göre renk kodları (arka plan).

    CSS'de renk farklı şekillerde ayarlanabilir:

    • isimle,
    • onaltılık değere göre,
    • RGB ve RGBA formatlarında,
    • HSL ve HSLA formatlarında.

    Rengi ada göre ayarla

    Tarayıcılar, öğeler için belirli renklerin ada göre belirtilmesini destekler. Bu tabloda, renk özelliklerini, RGB kodunu, Hex kodunu (HEX) ve HSL kodunu ayarlamak için kullanılan bazı anahtar kelimeler (İngilizce renk adları).

    Sekme 1. Renk isimleri, RGB, HEX ve HSL kodları.
    İsim Renk RGB HEX HSL Tanım
    beyaz RGB(255, 255, 255) #ffff veya #ffff hsl(0, %0, %100) Beyaz
    gümüş RGB(192, 192, 192) #c0c0c0 hsl(0, %0, %75) Gri
    gri rgb(128, 128, 128) #808080 hsl(0, %0, %50) Koyu gri
    siyah RGB(0, 0, 0) #000000 veya #000 hsl(0, %0, %0) Siyah
    bordo RGB(128, 0, 0) #800000 hsl(0, %100, %25) Koyu Kırmızı
    kırmızı RGB(255, 0, 0) #ff0000 veya #f00 hsl(0, %100, %50) Kırmızı
    turuncu RGB(255, 165, 0) #ffa500 hsl(38,8, %100, %50) Turuncu
    sarı RGB(255, 255, 0) #ffff00 veya #ff0 hsl(60, %100, %50) Sarı
    zeytin RGB(128, 128, 0) #808000 hsl(60, %100, %25) zeytin
    kireç RGB(0, 255, 0) #00ff00 veya #0f0 hsl(120, %100, %50) açık yeşil
    yeşil RGB(0, 128, 0) #008000 hsl(120, %100, %25) Yeşil
    su RGB(0, 255, 255) #00ffff veya #0ff hsl(180, %100, %50) Mavi
    mavi RGB(0, 0, 255) #0000ff veya #00f hsl(240, %100, %50) Mavi
    Donanma rgb(0,0,128) #000080 hsl(240, %100, %25) Koyu mavi
    deniz mavisi RGB(0, 128, 128) #008080 hsl(180, %100, %25) Mavi-yeşil
    fuşya RGB(255, 0, 255) #ff00ff veya #f0f hsl(300, %100, %50) Pembe
    mor RGB(128, 0, 128) #800080 hsl(300, %100, %25) Menekşe

    Bu renk adlarının kullanımına bir örnektir, renk adları genişletilmiş tablodan alınmıştır.

    RGB'den CSS'ye dönüştürücü

    Orta Turkuaz
    kahverengi
    kıpkırmızı
    Mavi menekşe
    rolelivedrab

    İşte bu kodun nasıl çalıştığı:

    RGB ile renk ayarı

    RGB, ek bir renk modelidir. İngilizce ek- ek. RGB, İngilizce kelimelerin kısaltmasıdır: Kırmızı, Yeşil, Mavi - kırmızı, yeşil, mavi). Buradan, RGB modelinde renklerin üç renk (kırmızı, yeşil, mavi) çeşitli miktarlarda eklenerek sentezlendiği açıktır.

    Kırmızı, yeşil ve mavi renkleri karıştırarak birkaç milyon ton elde edebilirsiniz. Tüm olası kombinasyonlar bilgisayarların hafızasında saklanır.

    Konuya gel.

    Özellikleri bu biçimde ayarlamak için, rgb(r, g, b) gösterimi kullanılır; burada r, g, b her renk için (kırmızı, yeşil, mavi) üç kanaldır. Her kanal için değerler 0 ile 255 arasında ayarlanır.

    Kod örneği.

    Her şeyi netleştirmek için bir örnek kod vereceğim:

    RGB'den CSS'ye dönüştürücü

    RGB(255, 0, 0)
    RGB(0, 255, 0)
    RGB(0, 0, 255)

    Bu örneğin şu şekilde çalışması gerekir:

    Şekil 1. RGB'deki renkler.

    Örneğin açıklamalar.

    Sayfanın başında div.rgb sınıfını oluşturuyoruz, bu etiketin oluşturduğu blokların görünmesi gerekiyor.

    doğru boyutta görüntülenir: 240px x 40px . - 40px değerini satır yüksekliği özelliğine (satır yüksekliği) atarız, yani bloğun yüksekliğine eşittir, bu, metnin blokta görüntülenmesini sağlar
    dikeyin ortasında. kuralı kullanarak metni yatay olarak ortalayın ( metin hizalama: merkez;).

    Ardından, kodda bloğun arka plan rengini ayarlayın

    background özelliğini kullanarak style niteliğini kullanmak ve rgb(255, 0, 0) , rgb(0, 255, 0) ve rgb(0, 0, 255) değerlerine atamak. Yani, dönüşümlü olarak bir kanalı olabildiğince doymuş hale getiriyoruz ve geri kalan kanallar, değerleri sıfır olduğu için sentez için kullanılmıyor.

    rgb(100, 100, 100) gibi kendi değerlerinizi içerecek şekilde bu örneği düzenlemeyi deneyin.

    RGBA ile renk ayarı

    CSS3, renklerle çalışmak için yeni bir araç olan RGBA biçimini tanıttı. RGB modelinin bir evrimi olarak adlandırılabilir, ancak yeni bir kanalın eklenmesiyle - A veya alfa kanalı. Bu kanal rengin şeffaflığını ayarlar. Değerleri 0 ila 1 aralığında ayarlanır. 0'a eşit bir değer, tam şeffaflığa, 1 - tam opaklığa (renk, ilk üç RGB kanalında ayarlananla aynı olacaktır) ve ara değerlere karşılık gelir. 0,4 veya 0,6 gibi - değişen derecelerde saydamlık.

    Kod örneği.

    RGBA'yı CSS3'e dönüştürme

    İşte nasıl çalışacağı:

    Bu kod, renk değerini ayarlamak için RGB modelini kullanan aşağıdakine görsel olarak benzer:

    RGBA'yı CSS3'e dönüştürme

    İşte onun sonucu:

    Sıfıra eşit bir alfa kanalı değeri, herhangi bir rengi görünmez yapar - kesinlikle saydamdır, bire eşit bir değer, rengi RGB kodunda değişiklik yapmadan çevirir. rgba(255,0,0,1.0) özelliği kırmızı rgb(255, 0, 0) rengini gösterir.

    Onaltılık değere göre (HEX kodu)

    Günlük hayatta ondalık sayma sistemini kullanırız. Kökenleri çok basit - elimizde on parmağımız var ve hayatta parmak saymak uygun oldu. Ondalık sistemde on basamak varsa: 0'dan 9'a kadar ve 10 sayısı bir sonraki basamaksa, onaltılık sayı sisteminde 16 basamak vardır ve sonraki basamak 16 olacaktır.

    Renk kodlarını belirtmek için, 0'dan 9'a kadar olan sıradan ondalık basamaklar onaltılık basamaklar olarak kullanılır ve A'dan F'ye Latin harfleri, 10'dan 15'e kadar olan sayıları, yani (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Açıklık için, bunu bir tabloda özetleyelim:

    Ondalık sistemde olduğu gibi F'den (15 ondalık) daha büyük onaltılık sayılar yazmak için, iki basamaklı birliği de kullanırlar, ancak zaten onaltılıktır ki bu açıktır. Bu nedenle, 255 ondalık sayısını onaltılık olarak yazmak için FF notasyonu kullanılır.

    Hexadecimal sistem bilgisayar tarafından daha anlaşılır, hexadecimal değerin verdiği değerleri daha hızlı işler.

    Onaltılık sistemde bir renk belirtmek için sayısal değerin önüne "#" işareti koyun, örnek: #FFC0CB . #FFC0CB değerinin kendisi üç onaltılık basamaktan oluşur FF , C0 ve CB . Bu girişin anlamı, rengi RGB formatında ayarlamakla aynıdır (rgb(r, g, b) ) - HEX kodundaki her onaltılık hane, RGB model kanalındaki renk doygunluğunu gösterir.

    CSS'de HEX kodu

    #FF0000
    #00FF00
    #0000FF

    Bu kod aşağıdaki öğeleri gösterecektir:

    Ve işte yukarıdaki bu sayfadaki "RGB ile renk ayarı" bölümünden elde edilen sonucu içeren bir resim.

    Şekil 1. RGB'deki renkler.

    Renklerin aynı olduğunu görüyoruz.

    HEX renk kodu için kısaltılmış gösterime izin verilir: 6 basamaklı bir sayı, 3 basamaklı bir sayı olarak yazılabilir. Bu sadece aynı kanalın renk değerindeki iki hane tekrarlanırsa geçerlidir.

    Yani, aşağıdaki kısaltma kabul edilebilir:

    Örneğin #ff22aa rengi #f2a olarak yazılabilir veya #44aa22 rengi #4a2 olarak yazılabilir.

    HSL ile renk ayarı

    CSS3, renkleri belirtmek için yeni bir formata sahiptir.

    HSL formatı İngilizce kelimelerin kısaltmasıdır: Hue (ton), Doygunluk (doygunluk) ve Hafiflik (hafiflik).

    HSL'de Hue, özel bir renk çarkı (Şekil 2) üzerindeki bir renk değeridir ve derece cinsinden belirtilir. RGB modeli ile benzetmeler yaparsak, 0° kırmızıya, 120° yeşile ve 240° maviye karşılık gelir.

    Hue değeri 0'dan 359'a değişecektir.


    Şekil 2. HSL renk çarkı.

    İkinci değer - doygunluk (Doymuş) yüzde olarak ayarlanır. %100 doygunlukta renk olabildiğince "sulu" olur, doygunluk göstergesi %0'a doğru hareket ettikçe renk giderek daha matlaşır ve griye döner.

    Üçüncü değer - hafiflik (Hafiflik) de yüzde olarak ayarlanır. Yüzde ne kadar yüksek olursa, renk o kadar parlak olur. %0 ve %100 uç değerleri sırasıyla siyah (ışıksız) ve beyaz (açık) renkleri gösterir ve ilk kanalda renk tekerleğinden hangi rengin seçildiği önemli değildir. Optimum değer, %50'ye eşit renk parlaklığı değeri olarak kabul edilebilir.

    HSLA ile renk ayarı

    HSLA formatı, RGB'den RGBA'ya olduğu gibi HSL ile ilgilidir. HSLA formatında ve RGBA'da renk şeffaflığından sorumlu olan bir alfa kanalı eklenir.

    HSL formatında belirtilen bir rengin okunması daha kolaydır. Sezgisel olduğunu söyleyebiliriz. Örneğin, hsl(120,60%,50%) kodu, bellekte HSL renk tekerleğinin bir resmi varsa son rengi temsil edebilir. Bu, RGB ve HEX formatları için söylenemez, bu formatlarda belirtilen renk kodu ancak monitörde işlendikten sonra netleşir.

    CSS3'teki yeni biçimler (HSL, HSLA ve RGBA), şu sürümlerden beri tarayıcılarda çalışır: IE 9.0, Opera 10.0 Firefox 3.0. Stillerin eski tarayıcılarda çalışması nasıl sağlanır?

    Bazı blok ( arka plan rengi: rgb(255,50,50); arka plan rengi: rgba(255,50,50,0.85) )

    Bu kodu eski tarayıcılarda kullanırken, alfa kanalı kullanmasa da .somebloсk sınıfı için arka plan rengi RGB biçiminde görüntülenecektir.

    02/26/15 8.9K

    Bildiğiniz gibi renk, bir kişinin durumunu etkileyebilir: hem zihinsel hem de fiziksel. Her gün internette gezinirken gözler milyonlarca rengi ve gölgeyi değerlendirir. Renk psikolojisine aşina bir web tasarımcısı, herhangi bir hedefe ulaşmak için ziyaretçinin ruh halini kontrol edebilir.

    Bunun nedeni, bazı tonların yatıştırması ve bazılarının ise tam tersine heyecanlandırmasıdır. Ardından, bilgisayar teknolojisi kullanılarak rengin nasıl sentezlendiği ve gösterildiği hakkında konuşacağız.

    RGB, üç ana bileşeni çeşitli oranlarda karıştırarak tüm renkleri ve gölgelerini elde etme yöntemini temsil eden bir renk modelidir:

    • Kırmızı renk ( Kırmızı);
    • yeşil renk ( Yeşil);
    • Mavi renk ( Mavi).

    RGB'nin kısaltılmış adı buradan gelir. Bu renklerin ana renk olarak seçilmesinin bir nedeni var: İnsan gözünün retina fizyolojisi ve bunları nasıl algıladığı:


    RGB modeli günümüzde en popüler olmaya devam ediyor ve TV ekranlarında ve bilgisayar monitörlerinde renkleri yeniden üretmek için kullanılıyor. Üreticiler ürünlerine farklı özellikler kazandırdığından, 1996'da Microsoft ve HP'nin üzerinde birlikte çalıştığı sRGB adlı birleşik bir RGB tabanlı renk sentezi sistemi oluşturuldu.

    Sayısal renk gösterimi

    Daha önce de belirtildiği gibi, RGB renkleri ana renklerin karıştırılmasıyla oluşturulur. Her birinin yoğunluğunu tanımlamak için, rengin onaltılık olarak 00-FF'ye karşılık gelen 0-255 (8 bit) aralığı ile temsil edildiği bir şema benimsenmiştir.

    Yani, ana renkler şöyle görünecektir:

    • Kırmızı - RGB (255.0.0);
    • Yeşil - RGB (0.255.0);
    • Mavi - RGB (0.0.255);

    Renk yoğunluğu 255'in altında değerler alırsa, kırmızı, yeşil ve mavinin çeşitli tonları elde edilir. Aşağıda, tonlamalarının bir tablosu ve her bir gölgenin onaltılık değerleri verilmiştir:

    RGB Renk Tabloları

    Doğal olarak, ana renklerin tonlamalarına ek olarak, karışık olanlar da vardır ve sayıları oldukça fazladır. Bu nedenle, mevcut tüm gölgelerin yanı sıra adlarının ve sayısal gösterimlerinin sunulduğu bir RGB renkleri tablosu oluşturuldu ( ondalık ve onaltılık biçimde).

    Onu burada tanıyabilirsin. Bu tablo, web tasarımcılarının hayatını büyük ölçüde kolaylaştırır, çünkü birkaç saniye içinde istediğiniz gölgeyi bulabilir ve sayısal temsilini öğrenebilirsiniz.

    Güvenli RGB renk paleti

    Bununla birlikte, bir noktada renkleri farklı tarayıcılarda görüntüleme sorunu vardı ve bunu çözmek için, matematiksel hesaplamalarla türetilen sözde "güvenli" RGB renk paleti derlendi.

    Tarayıcı bir rengi doğru görüntüleyemediğinde, komşu renkleri karıştırarak ihtiyaç duyduğu şeye yaklaşmaya çalışır ve büyük olasılıkla sonuç tamamen kabul edilemez olacaktır:

    Bir web geliştiricisi, bu paletteki RGB renk kodlarını kullanarak, farklı tarayıcılar, platformlar ve monitörler kullanılarak sitelerinin sayfalarında renkleri görüntüleme konusunda gönül rahatlığı yaşayabilir. Şu anda güvenli renkler tablosu alaka düzeyini kaybediyor olsa da ( teknolojik ilerleme durmuyor), kullanırken dedikleri gibi huzur içinde uyuyabilirsiniz.

    RGB modelinde altın rengi

    İlk kez "altın" kelimesi, XIV yüzyılın başında Aurum - altın adı verilen kimyasal bir elementin rengini tanımlamak için kullanıldı. RGB modelinde altın rengi aşağıdaki sayısal değerlerle temsil edilir:

    • RGB (255, 215, 0) - ondalık sistem;
    • HEX #FFD700 - onaltılık sistem.

    RGB modelinde bej renk

    Bej, en etkileyici olmasa da tarihte oldukça önemli bir yere sahiptir. Pek çok kültürel anıt, özellikle antik heykeller, bej tonu olan steatit ve sabuntaşından yapılmıştır. RGB modelinde, bej aşağıdaki sayısal temsillere sahiptir.