Renk html kodları. "MTA" daki renkler: bilmeniz gerekenler? Renk kodları

CSS anlaşılmadı). Bu nedenle, geleceğin web yöneticisinin sadece çalışması gerekiyor Rengi değiştirmenize izin veren HTML araçları,örneğin sitenin hedef kitlesinin ilgisini ç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 renklerle çalışmanın tüm teknik özelliklerini öğreneceksiniz. Kayda şu soruyu ele alarak başlayacağız: HTML sayfasının belirli öğelerini neden renkli olarak vurgulamamız gerekiyor? Ardından, HTML'de renkleri özel kodlar kullanarak belirtmenizi 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 paletini öğrenecek ve ayrıca HTML'de neden palet olmadığını anlayacaksınız. Ve bu yayının sonu olacak arka plan, metin ve bağlantı renklerini değiştirme örnekleri.

HTML'de Renkleri Kullanma

Site sayfaları, daha önce 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 göre barındırma üzerinde ek bir yüktür.

WordPress blogumun tasarımı için tek bir resim kullanmadığımı, düzenin tamamen renklerle dekore edildiğ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, bir rengi veya diğerini vurgulayarak web sitesi düzenleri tasarlayabiliriz.

Renklerin yardımıyla ziyaretçilerimizin dikkatini belirli bir metin veya site bloğuna odaklayabiliriz. Kullanıcının anlayabileceği şekilde renk kullanılarak da belirlendiğini unutmayın: daha önce 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 sayfası öğ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 buna başka bir yazıda değineceğiz. Şimdi göreceğiz sitenin sayfalarındaki rengi kontrol etmek için HTML'de hangi araçlar var?.

Renk manipülasyonu için BT endüstrisinde birçok renk modeli vardır. En yaygın kullanılan renk gösterimi modeli RGB modelidir. Burada bu modelin bazı özelliklerinden bahsedeceğiz ve RGB ile daha detaylı tanışma 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. yalnızca HTML öğesinin rengi değil, şeffaflığı da bir alfa kanalının varlığından dolayı. RGBA modeli, CSS3'te eklenmiştir ve eski tarayıcılar tarafından desteklenmemektedir.
3. HSL modeli. HSL modelinin özelliği, rengi parametrelerini kullanarak belirlememizdir: ton, gösteriş ve hafiflik. Bu modelin anlaşılması, RGB modelinden biraz daha zordur.
4. HSLA modeli. Bu model HSL modeline çok benzer, ancak RGBA modeli gibi rengin alfa kanalıyla çalışmanıza izin verir, bu nedenle HSLA kullanarak sayfadaki HTML öğesinin rengini ayarlamakla kalmaz, aynı zamanda şeffaflığı.
5. Model HSV (HSB). Bu model HSL modeli ile karıştırılmamalıdır. İlk dört modelin web sayfalarına stil vermek için HTML veya CSS'de kullanılabileceğini, ancak HSV modelinin kullanılamayacağını unutmayın. HSV modeli, Pixar stüdyosunun kurucularından biri tarafından 1978 yılında geliştirildi ve HSL'ye çok benziyor.
6. Modeli CMY veya CMYK. Bu model baskı için tüm renkli yazıcılarda kullanılmaktadır. CMYK modeli, yazdırmanın beyaz kağıtlara yapıldığı kuralına dayanmaktadır. CMYK modelinde herhangi bir renk, Cyan (soluk camgöbeği, camgöbeği), Macenta (macenta) ve sarının karıştırılmasıyla elde edilir. CMY modelindeki her rengin, yüzde olarak ölçülen bir opaklık özelliği (mürekkep miktarı) vardır. Ancak CMYK modelinde listelenen üç renge ek olarak 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 ayarlama, o zaman sitenize gelen bir ziyaretçinin tam olarak ne tür bir renk tonu göreceğini söylemek imkansızdır, çünkü tüm kullanıcıların monitörleri farklıdır ve renkleri farklı şekillerde iletirler. Ayrıca, yukarıdaki tüm modellerin RGB modeline dayalı olduğunu ve modellerin 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 bahsedersek, 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 yalnızca bu modeller yardımıyla kontrol edebiliriz.

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

hadi çözelim HTML öğesinin rengi nasıl oluşur? ve RGB modelinin bazı özellikleriyle. RGB modelinden ve ayrıca web sayfalarını tasarlamak için kullanılan diğer modellerden biraz sonra ayrı girişlerde konuşacağımızı unutmayın.

Yani, RGB modeli Red, Green, Blue'nun kısaltmasıdır. RGB modeli, toplanabilirlik 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: birincisi kırmızı, ikincisi yeşil ve üçüncüsü mavi. 0'dan 255'e kadar rakamlara sahip bir cetvel kullanarak her bir spotun parlaklığını ayarlayabilirsiniz. Buna göre spotu sıfıra ayarlarsanız söner ve parlamaz, değer 255 ise spot ışığı en parlak rengi verir.

Böylece, aynı noktaya kırmızı ve yeşil bir spot ışığı ile parlarsanız, siyah bir duvarda sarı bir nokta fark edeceksiniz. 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 tutarsanı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ı biçiminde değerler alabilir. color niteliği, belirli HTML öğeleri içindeki metnin rengini değiştirmenize izin veren benzersiz bir HTML özelliğidir.
2. HTML metin özelliği. Bu özellik, etiketin benzersiz bir özelliğidir. . Etiket etiketlerle birlikte Ve biçim . Hatırlarsanız, kabın içinde öğeler yerleştirilir ve bunlar daha sonra tarayıcı tarafından görüntü alanında görüntülenir. Metin niteliğ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 bağlantı özelliği. Bu özellik de benzersizdir ve yalnızca etiket için geçerlidir. . alink niteliği, etkin HTML bağlantısının rengini değiştirir.
6. HTML bağlantı özelliği. Bağlantı özelliği yalnızca bir etiketle kullanılır ve kullanıcının henüz ziyaret etmediği HTML sayfası bağlantılarının rengini değiştirmeye yarar.

Bir web sayfasının tasarı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ı önerilmez.

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

Üzerinde 0'dan 255'e kadar rakamlar bulunan özel bir cetvel kullanarak spot ışığının renk parlaklığını nasıl ayarlayabileceğinizden 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 ondalık bir kod kullanarak aşağıdaki gibi değiştirebiliriz:

Örnekteki gibi gövde kapsayıcısını tanımlayan bir HTML belgesi oluşturursanız, şunu görürsünüz:

1. HTML belgesinin arka plan rengi artık yeşil: 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. Daha önce ziyaret edilmiş bir HTML bağlantısının rengi ise kırmızı olacaktır: vlink=”rgb (255,0,0)”.

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

Ve çocukça bir sürprizin rengini alın. RGB modelinin özelliği, esnekliği ve rahatlığı budur. Monitörünüz, üzerinde spot ışıkları parlayan siyah bir duvardır ve bu spot ışıklarının gücünü ayarlayabilir ve ondalık gösterimde HTML niteliklerini kullanarak her türden 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 pek 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 listesi. Aşağıdaki şekilde ondalık değerlerin nasıl onaltılığa dönüştürüldüğünü görebilirsiniz.

Hexadecimal sayı sistemine aşina olmayanlar için küçük bir açıklama yapılmalı ki kolayca anlayabilesiniz. hex RGB model kodlarını kullanarak HTML öğelerinin rengini değiştirin. İlk olarak, ondalık sayı sistemi bu şekilde adlandırılmıştır çünkü herhangi bir sayı on basamaklı 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ı basamaklı 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 şöyle yazılır: 10. 255 sayısı ise ff olarak yazılır.

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

Not: HTML'de onaltılık biçimde renk yazmak biraz daha kompakttır ondalıktan daha ilktir. İkincisi: her spot ışığının gücü 0'dan 255'e kadar sayılarla belirtilir. 255 sayısını yazmak için, onaltılık biçimde (ff = 250) iki basamak gereklidir, bu nedenle her bir renk kanalının parlaklığı (bizim spot ışıklarımız doğru olarak renk kanalını çağırır) , renk kanalı) 0 ile f arasında iki basamakla belirtilir.

Lütfen dikkat: her renk kanalının parlaklığı ayrı ayrı ayarlanmıştır, ancak bunun tek bir sayı olduğunu hayal edersek, o zaman RGB modelinin onaltılık sisteminde mümkün olan maksimum sayı ffffff'dir, bize beyaz rengi verecektir 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) sahip olmasından kaynaklanmaktadır: 256*256*256 = 16.777.215.

HTML renk onaltılık değerleri daha derli toplu 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 ondalık renk notasyonu biçimine 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üzenleyicinin, istediğiniz rengi seçmenize ve elde etmenize izin veren sözde bir renk paleti vardır. farklı sayı sistemlerindeki farklı renk modelleri için kodu.

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

HTML'deki renk adları

HTML nitelikleri bir değer olarak alabilir yalnızca 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. Birincisi, RGB model kodu HTML'deki renk adının arkasına gizlenmiştir ve ikincisi, her tarayıcı, adı kullanarak belirtilen HTML öğesinin rengini farklı görüntüler, bu 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 HTML sayfasının öğelerini bir ad kullanarak renklendirmeye çalışalım:

Tahmin edebileceğiniz gibi çok fazla renk ve ton var. Burada HTML niteliklerinin bir degrade ayarlamanıza izin vermediğini belirtmekte fayda var, bu CSS'de mümkündür, ancak bunun hakkında başka bir gönderide konuşacağız. 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österir Bir ad verirseniz, bir HTML öğesi hangi rengi 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. Ama 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 elde ettiği küçük, ince, dikdörtgen veya oval bir tahtadır. Bazen tutmayı kolaylaştırmak için palette bir başparmak deliği açılır. Paletin bir görüntüsü aşağıda bulunabilir. Bu nedenle, HTML'de palet yoktur.

Ancak çeşitli metin editörlerinde renk paleti eklentileri Bu yardımcı olur hızlı bir şekilde bir HTML öğesinin rengini seçin. Grafik editörlerinde bir renk paleti de vardır, çünkü bir tasarımcı için oturup hesaplamak ç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 editörünün en basit paletini görebilirsiniz.

Renk paletinin birçok modülünün ve eklentisinin, yalnızca RGB / RGBA biçiminde değil, aynı zamanda diğer modellerin biçiminde de bir renk kodu almanıza izin verdiğini unutmayın. Hatırlamak HTML'de palet olmadığını, ö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ılmış olan (sonuçta, palete bazen ş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 pratik yapalım ve deneyelim HTML öğesi renkleriyle çalışma. Yapmayı öğreneceğimiz ilk şey - html belgesindeki 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 renklerle çalışmayı öğrenme

Metin rengini değiştir

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

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 renkle vurgular:

HTML'de yazı rengini değiştirmek değil, HTML'de yazı rengini değiştirmek demek doğrudur. profesyonel

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:

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):

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

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.

Üç 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 düşü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.

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

Ö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.

CSS'deki renk kodları, renkleri belirtmek için kullanılır. Tipik olarak, bir öğenin ön planı (örneğin, metin, bağlantı rengi) veya bir öğenin arka planı (arka plan, blok rengi) için bir renk ayarlamak için renk kodları veya renk değerleri kullanılır. Düğme rengini, kenarlıkları, işaretçiyi, vurgulu ve diğer dekoratif efektleri değiştirmek için de kullanılabilirler.

Renk değerlerinizi çeşitli formatlarda ayarlayabilirsiniz. Aşağıdaki tabloda olası tüm biçimler listelenmektedir:

Bu biçimler aşağıda daha ayrıntılı olarak açıklanmaktadır.

CSS Renkleri - Hex Kodları

Onaltılık renk kodu altı basamaklı renkli bir gösterimdir. İlk iki hane (RR) kırmızı değeri, sonraki ikisi yeşil değeri (GG) ve son ikisi mavi değeri (BB) gösterir.

CSS Renkleri - Kısa Hex Kodları

Kısa onaltılık renk kodu altı karakterli gösterimin daha kısa bir biçimidir. Bu formatta, eşdeğer altı basamaklı renk değerini üretmek için her basamak tekrarlanır. Örneğin: #0F0, #00FF00 olur.

Onaltılık değer, Adobe Photoshop, Core Draw, vb. gibi herhangi bir grafik yazılımından alınabilir.

CSS'deki her onaltılık renk kodundan önce bir "#" karma işareti gelir. Aşağıdakiler, onaltılık gösterimin kullanımına ilişkin örneklerdir.

CSS Renkleri - RGB Değerleri

RGB değeri rgb() özelliği kullanılarak ayarlanan bir renk kodudur. Bu özellik üç değer alır: kırmızı, yeşil ve mavi için birer tane. Değer, 0 ile 255 arasında bir tam sayı veya bir yüzde olabilir.

Not: Tüm tarayıcılar rgb() color özelliğini desteklemez, bu nedenle kullanılması önerilmez.

Aşağıda, RGB değerlerini kullanan birden çok rengi gösteren bir örnek verilmiştir.

Renk kodu üreteci

Hizmetimizle milyonlarca renk kodu oluşturabilirsiniz.

Güvenli Tarayıcı Renkleri

Aşağıda en güvenli ve bilgisayardan bağımsız olan 216 renkten oluşan bir tablo bulunmaktadır. CSS'deki bu renkler 000000 ila FFFFFF hex kodu arasında değişir. 256 renk paletiyle çalışırken tüm bilgisayarların renkleri doğru göstermesini sağladıklarından kullanımları güvenlidir.