Turuncu kod. HTML Eğitimi. RGB renkleri. Güvenli Palet Renkleri
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.
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.
h1 ( renk: #ff0000; ) /* kırmızı */
h2 ( color: #00ff00; ) /* yeşil */
h3 ( renk: #0000ff; ) /* mavi */
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.
h1 ( renk: rgb(255, 0, 0); ) /* kırmızı */
h2 ( color: rgb(0, 255, 0); ) /* yeşil */
h3 ( renk: rgb(0, 0, 255); ) /* mavi */
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.
h1 ( color: rgb(0, 0, 255); ) /* normal RGB'de mavi */
h2 ( color: rgba(0, 0, 255, 1); ) /* opaklık: %100 olduğu için RGBA'da aynı mavi */
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).
h1 ( renk: hsl(120, %100, %50); ) /* yeşil */
h2 ( renk: hsl(120, %100, %75); ) /* açık yeşil */
h3 ( renk: hsl(120, %100, %25); ) /* koyu 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.
h1 ( color: hsl(120, 100%, %50); ) /* normal HSL'de yeşil */
h2 ( color: hsla(120, 100%, 50%, 1); ) /* HSLA'da aynı yeşil çünkü opaklık: %100 */
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.
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.
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.
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!