Html'de renksiz renk. HTML Eğitimi. RGB renkleri. Güvenli Palet Renkleri

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, dolayısıyla #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.

Çizime yakından bakın. Açılır kutunun arka planı yarı saydam yapılır. Bu oldukça yaygın bir tasarım tekniğidir. Bunun nasıl uygulanabileceğini düşünelim.

Görev

Çapraz tarayıcı yarı saydam renk yapın.

Çözüm

Bu durumda ilk akla gelen, saydamlığı zaten ayarlanmış olan arka plan için bir png24 görüntüsü kullanmaktır. Ancak bu resim tamamen gereksiz. Onsuz gayet iyi yapabilirsiniz (ve dolayısıyla sunucuya fazladan bir istekte bulunmadan). En iyi çözümü bulmaya çalışalım.

İkinci düşünce kullanmaktır. Ancak bu durumda çok uygun değil. Sonuçta, o zaman sadece arka plan değil, aynı zamanda yazılar da yarı saydam hale gelecektir. Evet, aslında, tüm pencere aynı anda.

Tabii ki, ek bir kap eklemeyi deneyebilir ve yalnızca ona opaklık uygulayabilirsiniz, ancak bu HTML öğesi yalnızca dekorasyon amaçlı olacak ve açıkça gereksiz olacaktır. Onsuz yapmak mümkün mü?

Tabi ki yapabilirsin! RGBA kullanıyorsanız.

RGBA renk açıklama formatı

CSS3, rengin RGB ve RGBA işlevleri kullanılarak belirtilmesine izin verir. Aynı zamanda, altında bir baytın tahsis edildiği her bir renk bileşeninin payını da belirtmeliyiz (0'dan 255'e, aniden birisi bilmiyor).

Bu durum için sözdizimi çok basittir:

arka plan: rgb(0, 255, 0); /* saf yeşil renk */

RGBA için dördüncü bir parametre eklenir - alfa saydamlığı (0'dan 1'e).

Arka plan: rgba(255, 0, 0, 0.5); /* %50 opaklıkla saf kırmızı */

İşte sorunumuzun çözümü burada. Arka plan rengini rgba kullanarak ayarlamak yeterlidir ve her şey ihtiyacımız olan gibi görünecektir. Fazladan resim ve öğe yok!

Bu numaraları nereden alabilirim?

Photoshop'ta damlalık aracını kullanarak renkleri oluşturan renklere bakabilirsiniz.

Tarayıcılar arası uyumluluk hakkında

RGB işlevi, RGBA'dan çok daha eski olduğundan ve CSS2 standardının günlerinden beri var olduğundan, en eski tarayıcılara karşı koruma sağlamak için aşağıdaki yinelenen yapıyı kullanabilirsiniz:

Bazı Bloklar (arka plan: rgb(255, 0, 0); arka plan: rgba(255, 0, 0, 0,5); )

Bu yaklaşımla, modern tarayıcıların büyük büyükbabaları yarı saydamlığa sahip olmayacak, ancak rengin kendisi doğru kalacaktır.

Ayrı olarak, IE ile ilgilenmeniz gerekecek. 8. sürüme kadar eşek benzeri olanlar RGBA'yı anlamaz.

Her zaman olduğu gibi: toprak - köylülere, fabrikalar - işçilere ve eşekler - bir koltuk değneği! Gibi .

Tabii ki, savaş koşullarında, bu kuralı dahil ettiğimiz ayrı bir CSS'de çıkarıyoruz.

SomeBlock ( arka plan:şeffaf; filtre:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); yakınlaştırma: 1; )

İşin püf noktası, aynı başlangıç ​​ve bitiş renklerini (ff0000 - kırmızı) belirlemek ve bu filtrede degrade için alfa kanalını ayarlayabilmenin avantajından yararlanmaktır (örnekte, değer 80'dir).

Başvuru için: filtre onaltılık bir sistem kullanır ve FF kodu tamamen opak bir renge karşılık gelir (ondalık olarak 255'tir). Buna göre hexadecimal 80, ondalık 128 yani %50 şeffaflıktır.

Doğrulandı:

• IE 6-9
• Firefox 3+
• Opera 10+
• Safari 4
• Krom

HEX/HTML

HEX biçimindeki bir renk, RGB'nin onaltılık gösteriminden başka bir şey değildir.

Renkler, her grubun kendi renginden sorumlu olduğu üç onaltılık basamak grubu olarak temsil edilir: #112233, burada 11 kırmızı, 22 yeşil, 33 mavidir. Tüm değerler 00 ile FF arasında olmalıdır.

Çoğu uygulama, onaltılık renkler için kısa gösterimi kabul eder. Üç grubun her biri aynı karakterleri içeriyorsa, örneğin #112233, o zaman #123 olarak yazılabilir.

1. h1 ( renk: #ff0000; ) /* kırmızı */
2. h2 ( color: #00ff00; ) /* yeşil */
3. h3 ( renk: #0000ff; ) /* mavi */
4. h4 ( color: #00f; ) /* aynı mavi, steno */

RGB

RGB (Kırmızı, Yeşil, Mavi) renk uzayı, kırmızı, yeşil ve mavinin karıştırılmasıyla elde edilebilecek tüm olası renklerden oluşur. Bu model fotoğrafçılık, televizyon ve bilgisayar grafiklerinde popülerdir.

RGB değerleri 0 ile 255 arasında bir tamsayı olarak belirtilir. Örneğin rgb(0,0,255) mavi olarak gösterilir çünkü mavi parametresi en yüksek değerine (255) ve geri kalanı 0'a ayarlanmıştır.

Bazı uygulamalar (özellikle web tarayıcıları) RGB yüzdelerini (%0'dan %100'e kadar) destekler.

1. h1 ( renk: rgb(255, 0, 0); ) /* kırmızı */
2. h2 ( color: rgb(0, 255, 0); ) /* yeşil */
3. h3 ( renk: rgb(0, 0, 255); ) /* mavi */
4. h4 ( color: rgb(0%, 0%, 100%)); ) /* aynı mavi, yüzde gösterimi */

RGB renk değerleri tüm büyük tarayıcılarda desteklenir.

RGBA

Son zamanlarda, modern tarayıcılar, bir nesnenin opaklığını belirleyen bir alfa kanalını destekleyen RGB'nin bir uzantısı olan RGBA renk modeliyle çalışmayı öğrendi.

RGBA renk değeri şu şekilde belirtilir: rgba(red, green, blue, alpha). alpha parametresi 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayıdır.

1. h1 ( color: rgb(0, 0, 255); ) /* normal RGB'de mavi */
2. h2 ( color: rgba(0, 0, 255, 1); ) /* opaklık: %100 olduğu için RGBA'da aynı mavi */
3. h3 ( color: rgba(0, 0, 255, 0.5); ) /* opaklık: %50 */
4. h4 ( color: rgba(0, 0, 255, .155); ) /* opaklık: %15,5 */
5. h5 ( color: rgba(0, 0, 255, 0); ) /* tamamen saydam */

RGBA, IE9+, Firefox 3+, Chrome, Safari ve Opera 10+'da desteklenir.

HSL

HSL renk modeli, RGB modelinin silindirik bir koordinat sistemindeki temsilidir. HSL, renkleri tipik RGB'den daha sezgisel ve anlaşılması kolay bir şekilde temsil eder. Model genellikle grafik uygulamalarında, renk paletlerinde ve görüntü analizinde kullanılır.

HSL, Ton (renk / ton), Doygunluk (doygunluk), Açıklık / Parlaklık (hafiflik / hafiflik / parlaklık, parlaklıkla karıştırılmaması gereken) anlamına gelir.

Hue, rengin renk çarkındaki konumunu ayarlar (0'dan 360'a). Doygunluk, bir doygunluk yüzdesi değeridir (%0'dan %100'e). Hafiflik, hafiflik yüzdesidir (%0'dan %100'e).

1. h1 ( renk: hsl(120, %100, %50); ) /* yeşil */
2. h2 ( renk: hsl(120, %100, %75); ) /* açık yeşil */
3. h3 ( renk: hsl(120, %100, %25); ) /* koyu yeşil */
4. h4 ( renk: hsl(120, %60, %70); ) /* pastel yeşil */

HSL, IE9+, Firefox, Chrome, Safari ve Opera 10+'da desteklenir.

HSLA

RGB/RGBA'ya benzer şekilde HSL, bir nesnenin opaklığını belirtmek için bir alfa kanalı desteğine sahip bir HSLA moduna sahiptir.

HSLA renk değeri şu şekilde belirtilir: hsla(hue, saturation, lightness, alpha). alpha parametresi 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayıdır.

1. h1 ( color: hsl(120, 100%, %50); ) /* normal HSL'de yeşil */
2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* HSLA'da aynı yeşil çünkü opaklık: %100 */
3. h3 ( renk: hsla(120, %100, %50, 0,5); ) /* opaklık: %50 */
4. h4 ( renk: hsla(120, %100, %50, .155); ) /* opaklık: %15,5 */
5. h5 ( color: hsla(120, 100%, 50%, 0); ) /* tamamen şeffaf */

CMYK

CMYK renk modeli genellikle renkli baskıyla, baskıyla ilişkilendirilir. CMYK (RGB'den farklı olarak) çıkarımsal bir modeldir, yani daha yüksek değerler daha koyu renklerle ilişkilendirilir.

Renkler, cam göbeği (Cyan), macenta (Macenta), sarı (Sarı) ve siyah (Key / blackK) oranlarına göre belirlenir.

CMYK'de bir rengi tanımlayan sayıların her biri, belirli bir rengin renk kombinasyonunu oluşturan mürekkebinin yüzdesini veya daha doğrusu, bu rengin filmi (veya doğrudan CTP durumunda baskı plakası).

Örneğin, "PANTONE 7526" rengini elde etmek için 9 parça cyan, 83 parça macenta, 100 sarı ve 46 siyahı karıştırırsınız. Bu, şu şekilde gösterilebilir: (9,83,100,46). Bazen şu tanımlamaları kullanırlar: C9M83Y100K46 veya (%9, %83, %100, %46) veya (0.09 / 0.83 / 1.0 / 0.46).

HSB/HSV

HSB (HSV olarak da bilinir), HSL'ye benzer, ancak iki farklı renk modelidir. Her ikisi de silindirik geometriye dayalıdır, ancak HSB/HSV "hexcone" modeline, HSL ise "bi-hexcone" modeline dayanmaktadır. Sanatçılar sıklıkla bu modeli kullanmayı tercih ederler, genel olarak HSB/HSV cihazının doğal renk algısına daha yakın olduğu kabul edilir. Özellikle Adobe Photoshop'ta HSB renk modeli kullanılmaktadır.

HSB / HSV, Ton (renk / ton), Doygunluk (doygunluk), Parlaklık / Değer (parlaklık / değer) anlamına gelir.

Hue, rengin renk çarkındaki konumunu ayarlar (0'dan 360'a). Doygunluk, bir doygunluk yüzdesi değeridir (%0'dan %100'e). Parlaklık, parlaklığın bir yüzdesidir (%0 ila %100).

XYZ

XYZ renk modeli (CIE 1931 XYZ) tamamen matematiksel bir alandır. RGB, CMYK ve diğer modellerin aksine, XYZ'de birincil bileşenler "hayali"dir, yani X, Y ve Z'yi herhangi bir renk karışımına eşleyemezsiniz. XYZ, teknik alanlarda kullanılan hemen hemen tüm diğer renk modelleri için ana modeldir.

LABORATUVAR

LAB renk modeli (CIELAB, "CIE 1976 L*a*b*"), CIE XYZ alanından hesaplanır. Lab'ın amacı, renk değişiminin insan algısı açısından (XYZ'ye kıyasla) daha doğrusal olacağı, yani renk uzayının farklı alanlarında renk koordinat değerlerinde aynı değişikliğin üreteceği bir renk uzayı yaratmaktı. aynı renk değişimi hissi.