Vlad Merjeviç

HTML'de renk iki yoldan biriyle belirtilir: onaltılık bir kod kullanarak 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, ondalık sistemin aksine, 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ı sistemde 15'ten büyük sayılar, iki sayının bire birleştirilmesiyle oluşturulur (Tablo 6.2). Örneğin, ondalık olarak 255 sayısı, onaltılık olarak FF sayısına karşılık gelir.

Sayı sisteminin tanımında karışıklığı önlemek için, onaltılık sayının önüne sayı işareti # gelir, örneğin #aa69cc. Bu durumda durum önemli değildir, 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. Sayının önündeki sayı 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ü basamak (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 - 00'dan FF'ye kadar değerler alabilir ve sonunda 256 ton oluşturur. Böylece toplam renk sayısı 256x256x256 = 16.777.216 kombinasyon olabilir. Kırmızı, yeşil ve mavi bileşenlerine dayalı renk modeli RGB (kırmızı, yeşil, mavi; kırmızı, yeşil, mavi) olarak adlandırılır. Bu model, üç bileşenin hepsinin eklenmesinin beyaz oluşturduğu bir katkı maddesidir (ekle - ekle).

Onaltılık renklerde gezinmeyi kolaylaştırmak için bazı kuralları göz önünde bulundurun.

• Renk bileşenlerinin değerleri aynıysa (örneğin: #D6D6D6) gri bir renk tonu elde edilecektir. Sayı ne kadar yüksek olursa renk o kadar açık olur ve değerler #000000 (siyah) ile #FFFFFF (beyaz) arasında değişir.
• Kırmızı bileşen maksimum yapılırsa (FF) parlak kırmızı bir renk oluşur ve bileşenlerin geri kalanı sıfıra ayarlanır. #FF0000 değerine sahip renk, olası en kırmızı renk tonudur. Aynısı yeşil (#00FF00) ve mavi (#0000FF) için de geçerlidir.
• Kırmızı ile yeşil karıştırılarak sarı (#FFFF00) elde edilir. Bu, ana renkleri (kırmızı, yeşil, mavi) ve tamamlayıcı veya tamamlayıcıyı sunan renk çarkında (Şekil 6.1) açıkça görülmektedir. Bunlara sarı, camgöbeği ve menekşe (eflatun da denir) dahildir. Genel olarak, herhangi bir renk, yanındaki renklerin karıştırılmasıyla elde edilebilir. Böylece mavi ve yeşilin birleştirilmesiyle camgöbeği (#00FFFF) elde edilir.

Pirinç. 6.1. renk çemberi

Onaltılık değerlere dayalı renklerin deneysel olarak seçilmesi gerekmez. Bunun için Adobe Photoshop gibi farklı renk modelleriyle ç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 elde edilen onaltılık değerini çevreler. 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ışırken ve palette olmayan bir rengi gösteremediğinde grafiklerin oluşturulma şekliyle ilgilidir. Bu durumda, renk, kendisine yakın olan, verilen rengi taklit eden diğer piksellerin 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şen için - kırmızı, yeşil ve mavi - altı değerden birinin ayarlandığı renklerdir - 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şlemesi nedeniyle web renklerinin alaka düzeyi çok küçük.

Ada 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 adlarının adlarını 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
Misket Limonu		açık yeşil	#00FF00
kestane rengi		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 nasıl belirttiğiniz önemli değildir - adıyla veya onaltılık sayılar kullanarak. 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

Örnek yazı

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

CSS anlaşılmadı). Bu nedenle, gelecekteki web yöneticisinin sadece çalışması gerekiyor Rengi değiştirmenizi sağlayan HTML araçları,örneğin sitenin hedef kitlesinin dikkatini çekecek parlak ve renkli e-posta bültenleri yapmak için.

Bu girişin oldukça hacimli olduğu ortaya çıktı, ancak ondan HTML kullanarak renkle çalışmanın tüm teknik özelliklerini öğreneceksiniz. Kayda şu soruyla ilgilenerek başlayacağız: HTML sayfasının belirli öğelerini neden renkle vurgulamamız gerekiyor. Ardından, özel kodlar kullanarak HTML'de renkleri belirlemenizi sağlayan RGB modelinden bahsedeceğiz (geçerken, ondalık renk kodlarına ve onaltılık HTML renk değerlerine bakacağız). Ayrıca bu gönderiden renk paleti hakkında bilgi edinecek ve ayrıca HTML'de neden palet olmadığını anlayacaksınız. Ve bu yayının sonu arka plan, metin ve bağlantı renklerini değiştirme örnekleri.

HTML'de Renkleri Kullanma

Site sayfaları, daha önce ve ayrıntılı olarak bahsettiğimiz resimler olmadan sıkıcı ve ilgi çekici olmazdı. Ancak görüntülerin önemli bir dezavantajı vardır: her görüntü ek bir görüntüdür ve buna bağlı olarak barındırma üzerinde ek bir yüktür.

WordPress blogumun tasarımı için tek bir resim kullanmadığımı, düzenin tamamen renkle süslendiğini not ediyorum. Sadece aynı HTML'deki renkler hakkında bugün sizinle konuşacağız. HTML'deki renkler farklı amaçlar için kullanılır, örneğin, birini veya diğerini bir renkte vurgulayarak web sitesi düzenleri tasarlayabiliriz.

Renk yardımıyla ziyaretçilerimizin dikkatini belirli bir metin veya site bloğuna odaklayabiliriz. Ayrıca, kullanıcının anlayabileceği şekilde renk kullanılarak belirlendiğini unutmayın: hangi bağlantıya tıkladığını, hangisini henüz ziyaret etmediğini ve şu anda hangi HTML sayfasında olduğunu.

Dikkat olmak HTML belgelerine stil vermek için renkleri kullanma, tüm renkler birbiriyle iyi gitmez ve her renk sitenizin ziyaretçilerini memnun etmez. Ancak web tasarımcılarına bu incelikleri sorsanız iyi olur, bu makale HTML sayfa öğelerinin rengini kontrol etmenizi sağlayan teknik özelliklerle başa çıkmanıza yardımcı olacaktır.

Ancak tasarımın içerikten ayrılması gerektiğini unutmamalısınız, bu nedenle HTML sayfalarında renk manipülasyonu için CSS kullanmak daha iyidir, ancak bundan başka bir gönderide bahsedeceğiz. şimdi göreceğiz sitenin sayfalarındaki rengi kontrol etmek için HTML'de hangi araçlar var.

BT endüstrisinde renk manipülasyonu için birçok renk modeli vardır. En yaygın olarak kullanılan renk temsil modeli RGB modelidir. Bu modelin bazı özelliklerinden burada bahsedeceğiz ve RGB ile daha detaylı tanışmak için ayrı bir yayın olacak. Aşağıda BT'de kullanılan renk modellerinin bir listesini bulacaksınız (yalnızca HTML ve CSS değil):

1. RGB modeli. Bu model çok yaygınlaştı ve belki de HTML öğelerinin rengini değiştirmenin en uygun ve yaygın yollarından biridir.
2. RGB modeli. Bu model RGB modeline çok benzer, ancak renk için bir alfa kanalı içerir. RGBA modelinin özelliği, ayarlamanıza izin vermesidir. HTML öğesinin yalnızca rengi değil, saydamlığı da bir alfa kanalının varlığı nedeniyle. RGBA modeli CSS3'e eklenmiştir ve eski tarayıcılar tarafından desteklenmez.
3. HSL modeli. HSL modelinin özelliği, rengini parametrelerini kullanarak ayarlamamızdır: ton, gösteriş ve hafiflik. Bu modeli anlamak RGB modelinden biraz daha zordur.
4. HSLA modeli. Bu model HSL modeline çok benzer, ancak tıpkı RGBA modeli gibi rengin alfa kanalı ile çalışmanıza izin verir, bu nedenle HSLA kullanarak sadece sayfadaki HTML öğesinin rengini değil, aynı zamanda onun şeffaflığı.
5. Model HSV (HSB). Bu model HSL modeli ile karıştırılmamalıdır. İlk dört modelin HTML veya CSS'de web sayfalarını biçimlendirmek için kullanılabileceğini, ancak HSV modelinin kullanamayacağını unutmayın. HSV modeli, 1978'de Pixar stüdyosunun kurucularından biri tarafından geliştirildi ve HSL'ye çok benziyor.
6. CMY veya CMYK modeli. Bu model tüm renkli yazıcılarda baskı için kullanılmaktadır. CMYK modeli, yazdırmanın beyaz kağıda yapılması kuralına dayanmaktadır. CMYK modelindeki herhangi bir renk, Cyan (soluk camgöbeği, camgöbeği), Macenta (macenta) ve sarı karıştırılarak elde edilir. CMY modelindeki her rengin yüzde olarak ölçülen bir opaklık özelliği (mürekkep miktarı) vardır. Ancak listelenen üç renge ek olarak, CMYK modelinde siyah da kullanılır.

Yukarıdaki renk modellerinin tümü cihaza bağlıdır, yani RGB veya HSL modelini kullanarak bir HTML öğesinin rengini ayarlayın, tüm kullanıcıların monitörleri farklı olduğundan ve renkleri farklı şekillerde ilettikleri için sitenize gelen bir ziyaretçinin ne tür bir renk göreceğini kesin olarak söylemek imkansızdır. Ayrıca, yukarıdaki tüm modellerin RGB modeline dayandığını ve modellerden herhangi birinde belirtilen herhangi bir rengin (bir alfa kanalının varlığından dolayı HSLA ve RGBA hariç) RGB'ye dönüştürülebileceğini unutmayın.

Cihazdan bağımsız renk modellerinden bahsedecek olursak, LAB modelini belirtmekte fayda var. Bu nedenle, HTML'de renkle çalışmaktan biraz uzaklaştık, bazı renk modelleriyle tanıştık. Tarayıcıların yalnızca ilk dört modeli "anladığını" unutmayın: HSL, RGB, HSLA ve RGBA. Bu nedenle, HTML öğelerinin rengini ancak bu modeller yardımıyla kontrol edebiliriz.

Bir HTML öğesinin rengi nasıl oluşur: RGB modelinin bazı özellikleri

çözelim bir HTML öğesinin rengi nasıl oluşur ve RGB modelinin bazı özellikleri ile. Web sayfalarını tasarlamak için kullanılan diğer modellerin yanı sıra RGB modeli hakkında biraz sonra ayrı girişlerde konuşacağımızı unutmayın.

Yani, RGB modeli Kırmızı, Yeşil, Mavi anlamına gelir. RGB modeli, toplamsallık ilkesine dayanmaktadır. Bu ilke, herhangi bir rengi elde etmek için rengin siyaha eklenmesidir. Daha iyi anlamak için ekranınızın siyah bir duvar olduğunu ve üç spot ışığınız olduğunu hayal edin: ilki kırmızı, ikincisi yeşil ve üçüncüsü mavi. 0'dan 255'e kadar sayılara sahip bir cetvel kullanarak her bir spotun parlaklığını ayarlayabilirsiniz. Buna göre, spot ışığı sıfıra ayarlarsanız kapanır ve parlamaz, değer 255 ise spot ışığı en parlak rengi verir.

Böylece, kırmızı ve yeşil bir spot ışığı ile aynı noktaya parlarsanız, siyah bir duvarda sarı bir nokta göreceksiniz. Kırmızı ve maviyi birleştirirseniz macenta elde edersiniz ve yeşil ile maviyi birleştirirseniz siyah duvardaki ışık noktası Camgöbeği olur, ancak üç spot ışığını da aynı noktaya doğrultursanız ışık noktası beyaz olur. .

Yukarıda açıklanan ilke, RGB modelinin temelini oluşturur ve bir tarayıcıdaki bir sayfadaki HTML öğelerindeki renkleri değiştirmek için kullanılır.

Öğelerin rengini değiştirmek için HTML nitelikleri: öğenin arka plan rengi ve öğenin içindeki metnin rengi

Sayfa öğelerini benzersiz yapmak için kullanılır. HTML nitelikleriyle öğelerin rengini değiştirebiliriz:

1. HTML renk özelliği. Bu özellik, bir HTML öğesinin içindeki metnin rengini değiştirmenize olanak tanır. Nitelik, onaltılık ve ondalık gösterimde HTML renk adları ve RGB model kodları şeklinde değerler alabilir. color niteliği, belirli HTML öğeleri içindeki metnin rengini değiştirmenize olanak tanıyan benzersiz bir HTML niteliğidir.
2. HTML metin özelliği. Bu özellik, etiketin benzersiz bir özelliğidir. . Etiket etiketlerle birlikte ve biçim . Hatırlarsanız, o zaman kabın içinde öğeler yerleştirilir ve bunlar daha sonra tarayıcı tarafından görünüm alanında görüntülenir. text özelliği ayarlamanıza izin verir. tüm html sayfası için varsayılan metin rengi.
3. HTML özniteliği bgcolor. Aynı zamanda benzersiz bir HTML özelliğidir ve bazı HTML öğelerinin arka plan rengini değiştirmenize olanak tanır.
4. vlink HTML özelliği. Bu özellik benzersizdir ve yalnızca etiket için geçerlidir. kullanıcının daha önce ziyaret ettiği bir bağlantının rengini değiştirmek için.
5. HTML alink özniteliği. Bu özellik de benzersizdir ve yalnızca etiket için geçerlidir. . alink özelliği, etkin HTML bağlantısının rengini değiştirir.
6. HTML bağlantı özelliği. link niteliği yalnızca bir etiketle kullanılır ve kullanıcının henüz ziyaret etmediği HTML sayfa bağlantılarının rengini değiştirmeye yarar.

Bir web sayfasının görünümünü içeriğinden ayırmanıza izin veren basamaklı stil sayfaları olduğundan, HTML öğelerinin rengini değiştirmek için özniteliklerin kullanılmasının önerilmediğini lütfen unutmayın.

HTML'de Ondalık Renk Kodlarını Kullanma

Bu nedenle, spot ışığın, üzerinde 0'dan 255'e kadar numaralandırılmış rakamların bulunduğu özel bir cetvel kullanarak rengin parlaklığını ayarlayabildiğinden bahsettik. Şimdi bunun HTML öğelerinin rengini değiştirmemize nasıl yardımcı olacağını görelim. Mesele şu ki, bir HTML öğesinin içindeki metin rengini veya HTML'deki arka plan rengini aşağıdaki gibi bir ondalık kod kullanarak değiştirebiliriz:

Örnekteki gibi gövde kapsayıcısını açıklayan bir HTML belgesi oluşturursanız şunları görürsünüz:

1. HTML belgesinin arka plan rengi artık yeşildir: bgcolor=”rgb (0,255,0)”.
2. HTML sayfasının metin rengi maviye döner: text=”rgb (0,0,255)”.
3. Kullanıcının ziyaret etmediği bir bağlantının HTML rengi beyaz olacaktır: link=”rgb (255,255,255)”.
4. Şu anda açık olan bağlantının renkleri siyah olacaktır: alink=”rgb (0,0,0)”.
5. Ve daha önce ziyaret edilmiş bir HTML bağlantısının rengi kırmızı olacaktır: vlink=”rgb (255,0,0)”.

Lütfen dikkat: hiç kimse "spot ışığı gücünü" kendi takdirinize göre ayarlamanızı yasaklamaz, yapabilirsiniz html rengini ayarla, örneğin, bu şekilde:

rgb(94 , 85 , 50 )

Ve çocuksu sürprizin rengini alın. RGB modelinin özelliği, esnekliği ve rahatlığı budur. Monitörünüz, üzerinde spot ışıklarının parladığı siyah bir duvardır ve bu spot ışıklarının gücünü ayarlayabilir ve HTML niteliklerini ondalık gösterimde kullanarak her türlü arka plan, metin ve bağlantı rengi oluşturabilirsiniz veya şöyle diyebilirsiniz: ondalık renk kodlarını kullanma.

Aslında html'de ondalık renk kodlarını söylemek yanlış demek daha doğru olur RGB ondalık renk kodları, çünkü bu model yalnızca HTML ve CSS'deki web sayfalarının tasarımı için kullanılmaz.

HTML renklerinin onaltılık değerleri

HTML öğelerinin rengini ondalık RGB model kodlarıyla ayarlamak çok uygun değildir (ve şu anda tüm tarayıcılar bu renk işleme yöntemini desteklememektedir), gösterim en kompakt olmayacağından, rengi ayarlamak çok daha uygundur onaltılık değerler kullanan HTML öğelerinin sayısı. Aşağıdaki şekilde ondalık değerlerin nasıl onaltılıya çevrildiğini görebilirsiniz.

Heksadesimal sayı sistemine aşina olmayanlar için küçük bir açıklama yapılması gerekir ki kolay gelsin. hex RGB model kodlarını kullanarak HTML öğelerinin rengini değiştirme. İlk olarak, ondalık sayı sistemi böyle adlandırılmıştır, çünkü herhangi bir sayı on basamaktan oluşan bir kombinasyonla elde edilebilir (terminoloji önemlidir: bir sayı ile bir basamak arasında bir fark vardır): 0, 1, 2, 3, 5, 6, 7, 8, 9.

Onaltılık sayı sisteminde, on altı basamaktan oluşan bir kombinasyon kullanılarak herhangi bir sayı yazılabilir: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f. Anlama kolaylığı için, a'nın on ve f'nin on beş olduğunu düşünebilirsiniz. Örneğin, on altı sayısı onaltılık olarak aşağıdaki gibi yazılır: 10. Ve 255 sayısı ff olarak yazılır.

Şimdi nasıl yapabileceğimize bakalım onaltılık değerler kullanarak HTML öğelerinin rengini ayarlayın, ondalık renk kodlarını onaltılık karşılıklarıyla değiştirerek önceki örneğimizi tekrarlıyoruz:

< body alink = ”#000000” link=”#ffffff” vlink=”ff0000” bgcolor=”#00ff00” text=”#0000ff”>

Not: HTML'de onaltılık biçimde renk yazmak biraz daha kompakttır ondalık sayıdan ilkidir. İkincisi: her bir spot ışığının gücü 0 ile 255 arasındaki sayılarla belirlenir. 255 sayısını yazmak, onaltılık biçimde (ff = 250) iki basamak gerektirir, bu nedenle her bir renk kanalının parlaklığı (spot ışıklarımız renk kanalını, renk kanalını doğru olarak adlandırır) ) 0 ile f arasında iki basamakla ayarlanır.

Lütfen dikkat: Her renk kanalının parlaklığı ayrı ayrı ayarlanır, ancak bunun tek bir sayı olduğunu hayal edersek, RGB modelinin onaltılık sisteminde mümkün olan maksimum sayı ffffff olur, bize beyaz rengi verir ve ondalık sistem: 16 777 215. Bu kadar çok sayıda renk ve gölge, RGB modelini ayarlamanıza / kullanmanıza olanak tanır. Bu sayı, her bir renk kanalının sırasıyla 256 parlaklık değerine (0'dan 255'e kadar) sahip olmasından gelir: 256*256*256 = 16.777.215.

HTML renk onaltılı değerleri daha kompakt ve açıklayıcıdır, çoğu web tasarımcısı ve düzen tasarımcısı HTML'de renk işleme için onaltılık değerler kullanır, bu nedenle rengin ondalık gösterimine alışmamanızı, hemen onaltılık kullanmanızı öneririz.

İlk başta, acemi bir tasarımcı veya düzen tasarımcısı için onaltılık renk notasyonu biçiminde gezinmenin zor olacağı açıktır, bu nedenle hemen hemen her grafik düzenleyici, istediğiniz rengi seçmenize ve elde etmenize olanak tanıyan bir renk paletine sahiptir. farklı sayı sistemlerinde farklı renk modelleri için kodu.

gibi bazı metin düzenleyicilerde, hızlı bir şekilde bir renk seçip değiştirmek istediğinizde kullanışlı olan palet uzantıları bulunur. Bu bağlamda, hiçbir şey söyleyemem.

HTML'deki renk adları

HTML nitelikleri bir değer olarak alabilir sadece ondalık kodlar ve onaltılık değerler değil, aynı zamanda özel renk isimleri. Adını kullanarak bir HTML öğesinin rengini değiştirmek iyi bir fikir değildir. İlk olarak, RGB model kodu HTML'de renk adının arkasına gizlenir ve ikincisi, her tarayıcı, ad kullanılarak belirtilen HTML öğesinin rengini farklı gösterir, yalnızca tarayıcı geliştiricilerinin isteğine bağlıdır.

Bu yüzden HTML'de bir renk adı kullanmak kullanımdan kaldırılmıştır. RGB modeli donanıma bağlıdır ve ad kullanılarak belirtilen renk tarayıcıya ve hatta sürümüne bağlıdır. Bir ad kullanarak bir HTML sayfasının öğelerini renklendirmeye çalışalım:

< body alink = ”black ”link = ”#beyaz” vlink=”kırmızı” bgcolor=”yeşil” metin=”mavi”>

Tahmin edebileceğiniz gibi, birçok renk ve ton var. Burada şunu belirtmekte fayda var ki HTML öznitelikleri bir degrade ayarlamanıza izin vermez, bu CSS'de mümkündür, ancak bundan başka bir yazıda bahsedeceğiz. Ve HTML'de birçok rengin adı vardır. Web sitemde HTML'deki renk adlarını ve RGB kodlarını içeren bir tablo bulabilirsiniz.

Yukarıdaki tablo gösteriyor bir ad verirseniz, bir HTML öğesi ne renk alır. Bu tablo, W3C tarafından onaylanan ve herhangi bir tarayıcıda aynı şekilde görüntülenmesi gereken 16 rengi ve adlarını toplar. Ancak aslında HTML'de, Opera, Chrome, Firefox, Safari, Internet Explorer gibi büyük tarayıcılar tarafından desteklenen yaklaşık 200 renk adı kullanabilirsiniz (bu ifade, ikincisi hakkında çok tartışmalıdır).

HTML'de renk paleti

Aslında html'de renk seçici yok. Palet kelimesinin tanımını hatırlayalım. Palet, sanatçının boyaları karıştırdığı ve her türlü rengi aldığı küçük, ince, dikdörtgen veya oval bir tahtadır. Bazen paleti tutmayı kolaylaştırmak için bir başparmak deliği yapılır. Paletin bir görüntüsünü aşağıda bulabilirsiniz. Bu nedenle, HTML'de palet yoktur.

Ancak çeşitli metin editörlerinde renk paleti eklentileri Bu yardımcı olur bir HTML öğesinin rengini hızlıca seçin. Grafik editörlerinde de bir renk paleti vardır, çünkü bir tasarımcının oturup hesaplaması çok uygun ve eğlenceli değildir: belirli bir kanalın belirli bir parlaklığı ile hangi rengin elde edileceği. Aşağıdaki şekilde Paint düzenleyicisinin en basit paletini görebilirsiniz.

Renk paletinin birçok modülünün ve eklentisinin, yalnızca RGB / RGBA formatında değil, aynı zamanda diğer modellerin formatında da bir renk kodu almanıza izin verdiğini unutmayın. Unutma HTML'de palet olmadığını, peki, özünde bir sanatçı olmanız dışında ve HTML sayfasının renk paletini bu renkler olarak adlandırın onu süslemek için kullanılan (sonuçta, bazen palete şu veya bu sanatçının kullandığı renkler veya şu veya bu resmi oluşturmak için kullanılan renkler denir).

HTML'de Metin Rengini Değiştirmeyi Öğrenmek

Aldık HTML'deki renkler hakkında birçok teori hadi uygulamaya geçelim ve deneyelim HTML öğesi renkleri ile çalışma. Yapmayı öğreneceğimiz ilk şey - html belgesinde metin rengini değiştirmeözel nitelikler ve etiketler kullanarak. Herhangi bir düzenleyiciyi açın ve içine aşağıdaki kodu yazın:

HTML'de renkle çalışmayı öğrenme

Metin rengini değiştir

Metin rengini değiştirmek için BODY metin öğesinin benzersiz özniteliğini kullanabiliriz ve ayrıca FONT öğesini ve onun renk özniteliğini de kullanabiliriz. Bu metin gri olacaktır.

< ! DOCTYPE html > < html lang = "ru-RU" > < head > < meta charset = "UTF-8" > < title >HTML belgesindeki metin rengini değiştirme< / title > < link rel = "stylesheet" type = "text/css" href = "style.css" / > < / head > < body text = "#ff0000" > < h1 > < font color = "rgb(0,255,0)" >HTML'de renkle çalışmayı öğrenme< / font > < / h1 > < h2 > < font color = "yellow" >Metnin rengini değiştirme< / font > < / h2 > < p >Metnin rengini değiştirmek için benzersiz bir BODY metin öğesinin özniteliği ve FONT öğesini kullanın < / body > < / html >

Bu dosyayı color.html olarak kaydedeceğim ve unutmamanızı tavsiye edeceğim. Ondalık renk gösterimi Chrome, Firefox ve Opera tarafından desteklenmez, ancak IE bu renk gösterimini anlar ve HTML başlığını yeşil olarak vurgular:

HTML'de metin rengini değiştirmemek, HTML'de yazı tipi rengini değiştirmek doğru olur. profesyonel

HTML'de renk üç şekilde belirtilebilir:

Adına göre HTML'de renk ayarlama

Bazı renkler, değer olarak İngilizce rengin adını kullanarak 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	İsim	Renk	İsim	Renk	İsim	Renk	İsim
	Siyah		Gri		Gümüş		Beyaz
	Sarı		Misket Limonu		su		Fuşya
	Kırmızı		Yeşil		Mavi		Mor
	kestane rengi		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 üstbilgi

Mavi zemin üzerine beyaz metin

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

Turuncu zemin üzerine başlık

Kireç arka plan üzerinde üstbilgi

Mavi zemin üzerine beyaz metin

RGB ile renk belirtme

Monitörde farklı renkler gösterilirken 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 bayt ile verilir ve bu nedenle 0'dan 255'e kadar değerler alabilir. Örneğin, RGB (255,0,0), kırmızı en yüksek değerine (255) ayarlandığından kırmızı olarak işlenir ve kalanı 0'a 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 bir renk belirtme

• 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 şekildeki onaltılık (HEX) renk değerleri kullanılarak 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- ile aynı) 255) . Onaltılık sistem, ondalık sistemin aksine, adından da anlaşılacağı gibi 16 sayısına dayanır. Onaltılık 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ştirilir. Onaltılık sistemde 15'ten büyük sayılar, iki karakterin tek bir değerde birleşimidir. Örneğin, ondalık olarak en yüksek sayı 255, onaltılık olarak en yüksek FF'ye karşılık gelir. Ondalık sistemden farklı olarak, onaltılık sayının önünde bir pound işareti bulunur. # örneğin, kırmızı en yüksek değerine (FF) ve diğer renkler minimum değerlerine (00) ayarlandığından #FF0000 kırmızı olarak görüntülenir. Karma sembolünden sonraki karakterler # hem büyük hem de küçük harfle yazılabilir. Onaltılık sistem, her karakterin iki katına eşit olduğu kısaltılmış #rgb biçimini kullanmanıza izin verir. Bu nedenle, #f7O girişi #ff7700 olarak kabul edilmelidir.

Örnek: Renk 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=camgöbeği: #00FFFF

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

İngilizce başlık	Rus adı	Örneklem	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
Azure	Azure		#007FFF	0	127	255
Siyah	Siyah		#000000	0	0	0
Mavi	Mavi		#0000FF	0	0	255
Bondi Mavisi	Bondi plaj suyu		#0095B6	0	149	182
Pirinç	Pirinç		#B5A642	181	166	66
Kahverengi	Kahverengi		#964B00	150	75	0
Cerulean	Azure		#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
çivit	çivit		#4B0082	75	0	130
yeşim taşı	yeşim taşı		#00A86B	0	168	107
Misket Limonu	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	Bolotni		#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 renk tonuna göre renk kodları (arka plan).

Ne yazık ki, sitede tat duyumlarını sergilemek henüz mümkün değil. Ancak bu, renklerin yardımıyla tamamen telafi edilebilir. Sonuçta, html renkleri milyonlarca renkten herhangi birini görüntülemenize izin verir. Böylece " renkli kalemler” setinde yediden çok daha fazla.

html'de renk şeması

Html'de renk birkaç biçimde belirtilebilir:

1. Onaltılık bir değer olarak - onaltılık sistemde belirtilen kod kullanılır. Html'deki bu tür renk kodları, üç çift onaltılık sayıdan oluşur. Her çift, ana rengiyle renk tonunun doygunluğundan sorumludur:

• İlk sayısal çift kırmızı renkten sorumludur;
• İkinci çift, yeşil rengin içeriği içindir;
• İkincisi, mavi rengin içeriği içindir.

Kodun başına (sayılardan önce) bir kare işareti konur. Bu onaltılık renk kodudur. 1'den 9'a kadar olan sayılara ek olarak, bu sayı sistemi Latin alfabesinin harflerini (A, B, C, D, E, F) kullanır.

Örneğin, html'deki beyaz renk kodu #FFFFFF gibi görünür.:

2. Anahtar Kelime - Şu anda html yaklaşık 147 anahtar kelimeyi desteklemektedir. Ancak bu kelimelerin hepsi benzersiz değildir. Bazıları aynı renk tonuna atıfta bulunur.

Gri, iki anahtar sözcükle temsil edilir: gri ve gri . Onaltılık kodları (HEX) aynı #808080 değeriyle verilir.

Örnek :

#808080

3. RGB formatında - html'deki bu renk kodlaması, 0 ila 255 aralığında ayarlanan üç değerin kullanımına dayanır. Her biri, ana renklerden biriyle renk tonunun doygunluğunu belirler:

• R - kırmızı (kırmızı);
• G - yeşil (yeşil);
• B - mavi (mavi).

RGB formatındaki renk numarası şu şekilde yazılır: rgb(0, 210, 100).

arka plan rengi:rgb(100,186,43)

4. RGBA biçiminde - dördüncü değerin rengin şeffaflığını 0'dan 1'e ondalık kesir biçiminde belirttiği gelişmiş bir RGB biçimidir.

Kullanım örneği:

arka plan rengi:rgba(100,86,143,0.2)

arka plan rengi:rgba(100,86,143,0.5)

arka plan rengi:rgba(100,86,143,0.8)

arka plan rengi:rgba(100,86,143,1)

html renk tabloları ve renk üreteçleri

Bu kadar geniş bir renk ayarı formatı yelpazesi ile kafa karıştırmak kolaydır. Bu nedenle, özel bir renk tablosu icat edildi. İçinde, renk tonlarının 147 anahtar ismine, tüm ana renk temsil standartlarında karşılık gelen kodlar verilmiştir. Ek olarak, her alan görsel renk eşleştirmesi için bir çubukla donatılmıştır. Bu tablolardan biri colorscheme.ru sitesinde sunulmaktadır:

Ancak böyle bir yazışma yapılandırmasının yardımıyla bile, istenen gölgenin seçimi zor olabilir. Ve renk kodu tablosunda doğru olanın olduğu da bir gerçek değil.

Bu engeli aşmak ve doğru rengi seçmeyi mümkün olduğunca kolaylaştırmak için etkileşimli web servisleri geliştirilmiştir. Kullanıcı arayüzleri birbirinden biraz farklı olabilir.

html-color-codes.info sitesinde, renk oluşturucu şöyle görünür:

Ve color-picker.appsmaster.co hizmetinde bu araç biraz farklı şekilde uygulanır:

Jeneratördeki her rengin doygunluğu, özel kaydırıcılar kullanılarak ayarlanır. Görsel olarak, renk tonu çerçevenin rengine ve sol taraftaki dikdörtgene göre gösterilir. En altta 3 alan renk kodunu ana formatlarda gösterir.

Ancak renk üreteci yalnızca özel sitelerde mevcut değildir. Hemen hemen tüm grafik editörleri benzer bir araçla donatılmıştır. Örneğin, Photoshop:

Renk Güvenliği

Ve uzun zaman önceydi, sadece 256 rengi destekleyen video kartları çağında. O günlerde, işletim sistemleri bozulma olmadan yalnızca belirli sayıda sekiz bitlik gölge görüntüleyebiliyordu.

Ardından, güvenli renklerin büyük tablosu ortaya çıktı. O zamanın herhangi bir tarayıcısında bozulma olmadan görüntülenebilen 216 gölgeyi belirtti. Ve bu güne kadar harika el yazması» hala bazı kaynaklarda mevcuttur:

Zamanımızda her şey değişti. Bu nedenle, html'de renkle çalışırken tüm güvenlik kuralları tamamen iptal edilir. Sonuçta, modern bilgisayar donanımı 16 milyondan fazla farklı tonu destekler. Ve 216 güvenli renk unutulmaya yüz tuttu.

Bu veriler tamamen istatistiklerle desteklenmektedir. Buna göre, 2014'te kullanıcıların yalnızca %0,5'inin yalnızca 256 gölgeyi destekleyen bilgisayarları var.

Renk uyumunun temelleri

Hepimize doğal, uyumlu bir tat alma duygusu bahşedilmemiştir. Bu nedenle, doğru rengi seçmek gerçek bir meydan okuma olabilir. Ancak bilime övgü, renk uyumunu çeşitli şemalar şeklinde tanımlamayı bile başardı. Hepsi renk tekerleğinin kullanımına dayanmaktadır. Html'de renk eşleştirme şemaları:

• Paralel renk şeması - renk tekerleğindeki her iki renk de paralel olduğunda;
• Triadik şema - üçgenin tüm köşelerinin merkezinde renklerden biri bulunur;
• Tek renkli - aynı rengin birkaç yakın tonu seçildiğinde;
• Analog - monokromatik şemanın daha gelişmiş bir versiyonu. Bu durumda, aynı rengin tonları belirli bir mesafede bulunur.

Tüm bu şemaların uygulanması paletton.com hizmetinde iyi bir şekilde temsil edilmektedir. Uyumlu bir renk seçimini kolayca gerçekleştirmenizi sağlar.