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

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.

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

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

İş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.

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.

>>Renk Yönetimi

Onaltılık RGB renk değerleri

Renkleri tanımlama ve işleme yöntemleri, amaçlanan nihai temsil açısından birbirinden farklıdır. Örneğin, baskı ve bilgisayar monitörleri için renk temsillerini karşılaştıralım. İlk durumda, temel beyazüç ana rengin daha sonra uygulandığı kağıdın rengi: mavi, mor Ve sarı. Bu üç ana renk, birbiriyle ve kağıdın beyaz rengiyle farklı oranlarda karışarak farklı renk tonları verir, saf siyah dışında veya renklerin tamamen yokluğunda beyaz kağıda verirler. Onlara siyah eklersek, CMYK- beyazdan eksik renklerin çıkarılmasıyla istenilen renk elde edildiğinde rengi aktarmanın bir yolu.

İkinci durumda, temel siyah her hücresi üç renkten birinde parlayan monitör ekranının rengi: kırmızı-kırmızı, yeşil-yeşil ve mavi-mavi. Ardından, herhangi bir parlamanın tamamen yokluğunda, ekranın saf siyah rengini elde ederiz ve gerekli renklerden herhangi biri, üç rengin her birinin oranına göre verilir. bu durumda alacağız RGB- Renk aktarma yöntemi. Birincil renkler anlamlara sahip olabilir 0 önce 255 veya dan 0% önce 100% veya onaltılık bir değer olarak gösterilebilir. Aşağıdaki şekilde ana renkleri karıştırmanın sonuçlarını görebilirsiniz.

Onaltılık sayı sistemi, ondalık sayı sisteminden farklı olarak, basamak dizisinde on basamak değil, on altı basamak vardır - bu nedenle adı. Buna göre, iki basamaklı kombinasyonların tekrarlanmayan varyantları yalnızca - olabilir - 256 , sonra basamak dizisine devam etmek için 9 gelen mektuplar Aönce F, böylece satır şöyle görünecek -

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

Sayıları bir sayı sisteminden diğerine ve tersi yönde dönüştürmek için aşağıdaki hesap makinesini kullanın. Buradaki maksimum değer, FF - 255 .

Bu durumda renk, her biri iki rakamdan oluşan üç onaltılık sayı ile verilir. İlk sayı yoğunluğu belirler kırmızı renkler, ortalama yeşil, son şey- mavi renkler. Tüm sayılar arasında değişen değerler alabilir 00 önce FF(0'dan 255'e). Örneğin: yeşil renk şu şekilde verilir: #00FF00, kırmızı gibi #FF0000, mavi gibi #0000FF, beyaz gibi #FFFFFF, rengin veya siyahın tamamen yokluğu olarak verilir #000000 .

Aşağıdaki formda, üç rengin her biri için herhangi bir onaltılık değer ayarlayabilir ve çıktı alanına tıklayarak karışımlarının sonucunu görebilirsiniz.

KIRMIZI		YEŞİL		mavi
	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f	0 1 2 3 4 5 6 7 8 9 a b c d e f
...buraya tıklayın

Bazı onaltılık RGB renk değerlerine örnekler: kırmızı, mavi ve yeşil tonlamalar.

görüş	kod	görüş	kod	görüş	kod	görüş	kod	görüş	kod	görüş	kod
	#010000		#800000		#000100		#008000		#000001		#000080
	#100000		#900000		#001000		#009000		#000010		#000090
	#200000		#A00000		#002000		#00A000		#000020		#0000A0
	#300000		#B00000		#003000		#00B000		#000030		#0000B0
	#400000		#C00000		#004000		#00C000		#000040		#0000C0
	#500000		#D00000		#005000		#00D000		#000050		#0000D0
	#600000		#E00000		#006000		#00E000		#000060		#0000E0
	#700000		#FF0000		#007000		#00FF00		#000070		#0000FF

Dize Sabit Değerleriyle Renk Belirtme

Kullanım kolaylığı için bazı renklere ve bunların kombinasyonlarına tüm tarayıcılar tarafından tanınan isimler verildi ve birçoğuna isim vermek mümkün hale geldi. Aşağıdaki tabloda bazı renk adları gösterilmektedir:

görüş	İsim	görüş	İsim	görüş	İsim	görüş	İsim
	Beyaz		Kırmızı		Turuncu		Sarı
	Yeşil		Mavi		Mor		Siyah
	Alice Mavi		Antik Beyaz		su		akuamarin
	gök mavisi		Bej		Bisküvi		beyazlatılmış badem
	Mavi menekşe		Kahverengi		Burlywood		Cadetblue
	chartreuse		Çikolata		Mercan		Peygamber Çiçeği mavisi
	Mısır püskülü		kızıl		mavi		koyu mavi
	koyu camgöbeği		karanlık altın çubuk		koyu gri		koyu yeşil
	koyu haki		karamagenta		Darkolivegreen		koyu turuncu
	Kara orkide		koyu Kırmızı		kara somon		koyu deniz yeşili
	koyu mavi		koyu gri		koyu turkuaz		Koyu mor
	Derin pembe		derin gök mavisi		Dimgray		kaçan mavi
	ateş tuğlası		çiçekli beyaz		Orman yeşili		Fuşya
	Gainsboro		hayalet beyaz		Altın		Altın Başak
	Gri		Yeşil sarı		Tatlı özsu		sıcak pembe
	Hint kırmızısı		indigo		Fildişi		Haki
	Lavanta		lavanta rengi		limonşifon		açık mavi
	açık mercan		açık cam göbeği		hafif soğuk çubuk sarısı		açık yeşil
	açık gri		Açık pembe		hafif somon		açık deniz yeşili
	Açık gök mavisi		açık gri		hafif çelik mavi		açık sarı
	kireç		Limon yeşili		keten		eflatun
	bordo		orta akuamarin		orta mavi		orta orkide
	orta mor		Orta deniz yeşili		orta kayrak mavisi		Orta bahar yeşili
	orta turkuaz		orta mor		gece yarısı mavisi		nane kreması
	puslu gül		Navajobeyaz		Donanma		eski dantel
	zeytin		zeytinyağlısı		turuncu kırmızı		Orkide
	soluk altın çubuk		Soluk yeşil		paleturkuaz		soluk kırmızı
	Papaya kırbacı		Şeftali		Peru		Pembe
	Erik		Toz mavi		pembe kahverengi		Kraliyet mavisi
	saddlebrown		Deniz yeşili		deniz kabuğu		sienna
	Gümüş		gökyüzü mavi		kayrak mavisi		kayrak grisi
	Kar		İlkbahar yesili		çelik mavisi		Bronzlaşmak
	deniz mavisi		devedikeni		Domates		Turkuaz
	menekşe		Buğday		Beyaz duman		sarı yeşil

Renk adlarına sahip küçük harfler listesi oldukça kapsamlıdır ve fazlasıyla yeterlidir. Bir adı bile olmayacak kadar sıra dışı bir arka plan rengi ayarlamak istiyorsanız, onaltılık bir değer kullanabilirsiniz.

Güvenli Renk Seçici Kullanma

Ne yazık ki, farklı sistem ayarlarına sahip farklı platformlarda doğru renk üretimi bir sorundur. Mesele şu ki, tarayıcı her zaman belgenin renk paletini, renkleri kendi başına karıştırarak ve değiştirerek sistem ayarlarına ve monitör özelliklerine göre ayarlamaya çalışır. Sonuç olarak, bazen kullanıcı web yöneticisinin ona göstermek istediğini tam olarak göremez. Bu durumdan çıkış yolu, farklı platformlardaki tüm tarayıcılar tarafından her rengin aynı şekilde işlenmesi garanti edilen bir palet kullanımında bulundu. Bu sözde garantili palet olarak da bilinir güvenli palet. Bu palet, renk bileşenleri aşağıdaki değerleri alan renkleri içerir: 00 ,33 ,66 ,99 , CC,FF, mümkün olan her şekilde 216 onların kombinasyonları.

FFFFFF CCCCCC 999999 666666 333333 000000 CCCC66 CCCC33 999966 999933 999900 666600 CCFF66 CCFF00 CCFF33 CCCC99 666633 333300 99FF00 99FF33 99CC66 99CC00 99CC33 669900 CCFF99 99FF99 66CC00 66CC33 669933 336600 66FF00 66FF33 33FF00 33CC00 339900 009900 33FF33 00FF33 00FF00 00CC00 33CC33 00CC33 CCFFCC 99CC99 66CC66 669966 336633 003300 99FF99 66FF66 33FF66 00FF66 339933 006600 66FF99 33FF99 00FF99 33CC66 00CC66 009933 66CC99 33CC99 00CC99 339966 009966 006633 99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999 CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC 99CCCC 66CCCC 339999 669999 006666 336666 66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333 99CCFF 3399FF 0099FF 6699CC 336699 006699 0066FF 3366CC 0066CC 0033FF 003399 003366 6699FF 3366FF 0000FF 0000CC 0033CC 000033 3333FF 3300FF 3300cc 3333CC 000099 000066 9999CC 6666FF 6666CC 666699 333399 333366 CCCCFF 9999FF 6666FF 6600FF 330099 330066 9966CC 9966FF 6600CC 6633CC 663399 330033 CC99FF CC66FF 9933FF 9900FF 660099 663366 CC66FF CC33FF CC00FF 9900cc 996699 660066 CC99CC CC66CC CC33CC CC00CC 990099 993399 FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399 FF66CC FF00CC FF33CC CC6699 CC0099 990066 FF99CC FF3399 FF0099 CC0066 993366 660033 FF6699 FF3399 FF0066 CC3366 996666 663333 CC9999 CC6666 CC3333 CC0000 990033 330000 FFCCCC FF9999 FF6666 FF3333 FF0000 CC0033 FF6633 CC3300 FF3300 FF0000 CC0000 990000 FFCC99 FFCC66 FF6600 CC6633 993300 660000 FF9900 FF9933 CC9966 CC6600 996633 663300 FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600 FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00

görüş	kod	görüş	kod	görüş	kod	görüş	kod	görüş	kod	görüş	kod

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

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 biçimindeki 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) kelimelerinin 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 yüzden bu formatları kullanırken kodun sürümle geçerliliğini kontrol edin.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

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!

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

Pirinç. 2. Web sayfasındaki renkler