RGB 240 40 ne renk? HTML öğreticisi. RGB renkleri. Güvenli palet renkleri. Örnek: RGB Kullanarak Rengi Belirleme

style niteliğini kullanma, arka plan özelliğini kullanma ve rgb(255, 0, 0) , rgb(0, 255, 0) ve rgb(0, 0, 255) değerlerine değer atama. Yani, dönüşümlü olarak bir kanalı olabildiğince doymuş hale getiriyoruz ve geri kalan kanallar, değerleri sıfır olduğundan sentez için kullanılmıyor.

Bu örneği düzenlemeyi ve kendi değerlerinizi belirtmeyi deneyin; örneğin rgb(100, 100, 100) .

RGBA kullanarak rengi ayarlama

CSS3'te renklerle çalışmak için yeni bir araç var - RGBA formatı. Buna RGB modelinin bir evrimi denilebilir, ancak yeni bir kanalın (A veya alfa kanalı) eklenmesiyle. Bu kanal rengin şeffaflığını ayarlar. Değerleri 0 ila 1 aralığında ayarlanır. 0 değeri tam şeffaflığa, 1 - tam opaklığa (renk ilk üç RGB kanalında belirtilenle aynı olacaktır) ve ara değerlere karşılık gelir. ​0,4 veya 0,6 gibi - değişen derecelerde yarı saydamlık.

Örnek kod.

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

Bu kod, bir renk değeri belirtmek için RGB modelini kullanan aşağıdaki koda görsel olarak benzer:

İşte sonucu:

Sıfıra eşit bir alfa kanalı değeri, herhangi bir rengi görünmez hale getirir - kesinlikle şeffaftır; bire eşit bir değer, RGB kodundaki rengi değişiklik yapmadan dönüştürür. rgba(255,0,0,1.0) özelliği kırmızı rgb(255, 0, 0) rengini gösterir.

Onaltılı değere göre (HEX kodu)

Günlük hayatta ondalık sayma sistemini kullanırız. Kökeni çok basit; ellerimizde on parmağımız var ve parmaklarımızla saymak hayatta kolaylık sağladı. Ondalık sistemde on basamak varsa: 0'dan 9'a kadar ve bir sonraki basamak 10 rakamıysa, onaltılık sayı sisteminde 16 basamak vardır ve bir sonraki basamak 16 sayısıdır.

Renk kodlarını belirtmek için, onaltılık basamak olarak 0'dan 9'a kadar olan sıradan ondalık basamaklar kullanılır ve 10'dan 15'e kadar olan sayıları belirtmek için A'dan F'ye kadar olan Latin harfleri kullanılır, yani (0, 1, 2, 3, 4, 5) , 6, 7, 8, 9, A, B, C, D, E, F). Açıklık sağlamak için bunu bir tabloya koyalım:

Ondalık sistemde olduğu gibi F'den (ondalık sistemde 15) büyük onaltılık sayıları yazmak için, iki rakamın kombinasyonunu da kullanırlar, ancak zaten onaltılıktır ki bu açıktır. Bu nedenle, 255 ondalık sayısını onaltılık gösterimle yazmak için FF gösterimini kullanın.

Hexadecimal sistem bilgisayar için daha anlaşılır olup, hexadecimal değere göre belirlenen değerleri daha hızlı işler.

Onaltılı sistemde bir renk belirtmek için sayısal değerin önüne "#" işareti koyun, örneğin: #FFC0CB. #FFC0CB değerinin kendisi üç onaltılık basamaktan FF, C0 ve CB'den oluşur. Bu girişin anlamı, rengin RGB formatında ayarlanmasıyla aynıdır (rgb(r, g, b)) - HEX kodundaki her onaltılık basamak, RGB modelinin kanalındaki renk doygunluğunu gösterir.

Bu kod aşağıdaki öğeleri gösterecektir:

Ve işte yukarıdaki sayfada "RGB kullanarak renkleri ayarlama" bölümünün sonucunu içeren bir resim.

Şekil 1. RGB'deki renkler.

Renklerin aynı olduğunu görüyoruz.

HEX renk kodunun kısaltılmış gösterimine izin verilir: 6 basamaklı bir sayı, 3 basamaklı bir sayı olarak yazılabilir. Bu yalnızca bir kanalın renk değerindeki iki rakam tekrarlandığında 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 Kullanarak Rengi Ayarlama

CSS3'te renkleri belirtmek için yeni bir format var.

HSL formatı İngilizce kelimelerin kısaltmasıdır: Hue (hue), Saturation (saturasyon) ve Lightness (lightness).

HSL'deki renk tonu, özel bir renk tekerleğindeki (Şekil 2) bir rengin değeridir ve derece cinsinden belirtilir. RGB modeliyle benzetme yaparsak 0° kırmızıya, 120° yeşile, 240° ise maviye karşılık gelir.

Renk tonu değeri 0'dan 359'a değişecektir.

Şekil 2. HSL renk tekerleği.

İkinci değer - doygunluk (Doygunluk) yüzde olarak ayarlanır. %100 doygunlukta renk mümkün olduğu kadar "sulu" olur; doygunluk göstergesi %0'a doğru hareket ettikçe renk donuklaşır ve griye döner.

Üçüncü değer olan Hafiflik de yüzde olarak ayarlanır. Yüzde ne kadar yüksek olursa renk o kadar parlak olur. %0 ve %100'lük uç değerler sırasıyla siyah (ışıksız) ve beyaz (aşırı pozlanmış) renkleri gösterecektir ve ilk kanalda renk tekerleğinden hangi rengin seçildiği önemli değildir. Optimum renk parlaklık değeri %50'dir.

HSLA Kullanarak Rengi Ayarlama

HSLA formatı, tıpkı RGB'nin RGBA ile olduğu gibi HSL ile ilgilidir. HSLA formatında, RGBA'da olduğu gibi, renk şeffaflığından sorumlu olan bir alfa kanalı eklenir.

HSL formatında belirtilen rengin okunması daha kolaydır. Sezgisel olduğunu söyleyebiliriz. Örneğin, hsl(120,60%,50%) kodu, eğer bellekte HSL renk tekerleğinin bir resmi varsa, son rengi temsil edebilir. RGB ve HEX formatları için aynı şeyi söylemek mümkün değil; bu formatlarda belirtilen renk kodu ancak monitörde görüntülendikten sonra netleşiyor.

CSS3'teki yeni formatlar (HSL, HSLA ve RGBA), şu sürümlerden itibaren tarayıcılarda çalışır: IE 9.0, Opera 10.0 Firefox 3.0. Stillerin eski tarayıcılarda çalışmasını nasıl sağlayabilirim?

Somebloсk ( arka plan rengi: rgb(255,50,50); arka plan rengi: rgba(255,50,50,0,85))

Bu kodu eski tarayıcılarda kullanırken, .somebloсk sınıfının arka plan rengi, alfa kanalı kullanmayacak olsa da RGB formatında görüntülenecektir.

Web tasarımında rengi temsil etmenin birkaç yolu vardır.

HEX, 16 tabanını temel alan onaltılık bir renk temsil sistemidir. Bu sistemde, dijital sayıyı 16'ya tamamlamak için 0'dan 9'a kadar Arap ondalık rakamları ve A'dan F'ye kadar Latin harfleri kullanılır. Web tasarımı için 16 ana (anahtar) renk #RRGGBB olarak adlandırılan onaltılık renk kodu kullanılır; burada her çift kendi renk payından sorumludur: RR – kırmızı, GG – yeşil ve BB – mavi. Her renk fraksiyonu 00 ile FF arasında değişir.

Web tasarımında rengin diğer iki temsili şunlardır: RGB(*,*,*) biçimindedir; burada bir rengin her "*" kısmı, 0'dan 255'e kadar ondalık rakamlarla ve İngilizce'deki renk adlarıyla temsil edilir.

Renkli bir görüntü oluştururken asıl sorun, renklerin farklı bilgisayar, monitör ve tarayıcı türlerinde doğru şekilde çoğaltılmasıdır. Tarayıcı bir rengi doğru görüntüleyemezse benzerini seçer veya birkaç rengi karıştırır. Ve bazen tamamen farklı bir renkle değiştirilebilir.

Masa 16 ana renk tüm tarayıcılarda kullanılan

İsim	Renk	Altıgen	(RGB)
Su (deniz dalgası)		#00FFFF	(000,255,255)
Siyah		#000000	(000,000,000)
Mavi		#0000FF	(000,000,255)
Fuşya (macenta)		#FF00FF	(255,000,255)
Gri		#808080	(128,128,128)
Yeşil		#008000	(000,128,000)
Kireç (parlak yeşil)		#00FF00	(000,255,000)
Bordo (koyu bordo)		#800000	(128,000,000)
Lacivert (koyu mavi)		#000080	(000,000,128)
zeytin		#808000	(128,128,000)
Mor		#800080	(128,000,128)
Kırmızı		#FF0000	(255,000,000)
Gümüş		#C0C0C0	(192,192,192)
Deniz mavisi (gri-yeşil)		#008080	(000,128,128)
Beyaz		#FFFFFF	(255,255,255)
Sarı		#FFFF00	(255,255,000)

Masa mor renkler ve tonları

İsim	Renk	Altıgen	(RGB)
Macenta (macenta)		#FFCBDB	(255,203,219)
Macenta (macenta)		#FF0099	(255,000,153)
Macenta		#F95A61	(249,090,097)
Fuşya (fuşya)		#FF00FF	(255,000,255)
Mauvein (anilin moru)		#EF0097	(239,000,151)
Somon pembesi (turuncu pembe)		#FF91A4	(255,145,164)
Cenise (morun tonu)		#DE3163	(153,149,140)
Patlıcan Patlıcan (patlıcan)		#990066	(153,000,132)
Lavanta allık (pembemsi-lavanta)		#FFF0F5	(255,240,245)
Leylak (leylak)		#C8A2C8	(200,162,200)
Macenta		#FF008F	(255,000,143)
Orkide (orkide)		#DA70D6	(218,112,214)
Kırmızı-mor (mor-kırmızı)		#C71585	(199,021,133)
İyimser (iyimser)		#92000A	(146,000,010)
Devedikeni (morun tonu)		#D8BFD8	(185,211,238)
Menekşe-patlıcan (morun bir tonu)		#991199	(153,017,153)
Rosa vivo (koyu pembe)		#FF007F	(255,000,127)
Lavanta-gül (morun bir tonu)		#FBA0E3	(108,123,139)
Mountbatten pembe		#997ABD	(153,122,141)

Masa gri renkler ve tonları

İsim	Renk	Altıgen	(RGB)
Gri		#808080	(128,128,128)
Gri		#bebebe	(190,190,190)
(Gri gölge)		#858585	(133,133,133)
Gri33		#545454	(084,084,084)
(Gri arduvaz)		#708090	(112,128,144)
(Kuvars)		#99958с	(153,149,140)
(Açık gri)		#bbbbbb	(187,187,187)
(Gümüş)		#c0c0c0	(192,192,192)
(Gri beyaz)		#f0f0f0	(240,240,240)
(Abdel-Kerim'in sakalları)		#e0e0e0	(224,224,224)
AçıkGri (Açık gri)		#d3d3d3	(211,211,211)
LightStateGray()		#778899	(119,136,153)
StateGray-1 (Soluk peygamber çiçeği mavisi1)		#c6e2ff	(198,226,255)
StateGray-2 (Soluk peygamber çiçeği mavisi2)		#b9d3ee	(185,211,238)
DurumGray3()		#9fb6cd	(159,182,205)
DurumGray4()		#6c7b8b	(108,123,139)

Renkleri belirtmek için onaltılık sayılar kullanılır. Onaltılık sistem, ondalık 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ın yerini Latin harfleri alır. Onaltılık sistemde 15'ten büyük sayılar iki sayının birleştirilmesiyle oluşur. Örneğin ondalık sistemde 255 sayısı, onaltılık sistemde FF sayısına karşılık gelir. Sayı sistemini belirlerken karışıklığı önlemek için, onaltılık sayının önüne # karma sembolü yerleştirilir, örneğin #666999. Üç rengin her biri (kırmızı, yeşil ve mavi) 00'dan FF'ye kadar değerler alabilir. Böylece, renk sembolü üç bileşene bölünmüştür #rrggbb; burada ilk iki sembol rengin kırmızı bileşenini, ortadaki iki - yeşil ve son iki - mavi bileşenini gösterir. Her karakterin iki katına çıkarılması gereken #rgb kısaltılmış formunun kullanılmasına izin verilir. Bu nedenle #fe0 girişi #ffee00 olarak kabul edilmelidir.

İsimle

İnternet Explorer	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 adlarına göre destekler. Masada 1 adları, onaltılık kodu, RGB, HSL değerlerini ve açıklamasını gösterir.

Masa 1. Renklerin adları

İsim	Renk	Kod	RGB	HSL	Tanım
beyaz		#ffffff 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
kestane rengi		#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
turkuaz		#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'yi kullanma

İnternet Explorer	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 terimlerle kullanarak rengi tanımlayabilirsiniz. Üç renk bileşeninin her biri 0 ila 255 arasında bir değer alır. Rengin yüzde olarak belirtilmesine de izin verilir; %100, 255 sayısına karşılık gelir. Önce rgb anahtar sözcüğünü belirtin, ardından parantez içinde renk bileşenlerini belirtin. virgülle ayrılmış olarak, örneğin rgb(255 , 128, 128) veya rgb(100%, 50%, 50%).

RGBA

İnternet Explorer	Krom	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

RGBA formatı söz dizimi açısından RGB'ye benzer ancak öğenin şeffaflığını belirten bir alfa kanalı içerir. 0 değeri tamamen şeffaftır, 1 opaktır ve 0,5 gibi bir ara değer yarı şeffaftır.

RGBA, CSS3'e eklendiğinden CSS kodunun bu sürüme göre doğrulanması gerekir. CSS3 standardının halen geliştirilme aşamasında olduğunu ve bazı özelliklerin değişebileceğini belirtelim. Örneğin, arka plan rengi özelliğine eklenen RGB biçimindeki bir renk doğrulanır, ancak arka plan özelliğine eklenen renk artık geçerli değildir. Aynı zamanda tarayıcılar her iki özelliğin rengini de oldukça doğru anlıyor.

HSL

İnternet Explorer	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 (ton), Doygunluk (doygunluk) ve Lightness (açıklık) ilk harflerinin birleşiminden türetilmiştir. Ton, renk tekerleğindeki (Şekil 1) renk değeridir ve derece cinsinden verilir. 0° kırmızıya, 120° yeşile ve 240° maviye karşılık gelir. Renk tonu değeri 0 ila 359 arasında değişebilir.

Pirinç. 1. Renk tekerleği

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 doygunluk için maksimum değerdir.

Açıklık, rengin ne kadar parlak olduğunu belirtir ve %0 ile %100 arasında bir yüzde olarak belirtilir. Düşü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

İnternet Explorer	Krom	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	10.0+	3.1+	3.0+	2.1+	2.0+

HSLA formatı sözdizimi açısından HSL'ye benzer, ancak öğenin şeffaflığını belirtmek için bir alfa kanalı içerir. 0 değeri tamamen şeffaftır, 1 opaktır ve 0,5 gibi bir ara değer yarı şeffaftır.

RGBA, HSL ve HSLA renk değerleri CSS3'e eklendiğinden bu formatları kullanırken lütfen kodunuzun sürüm 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 hesaplamalı yöntemlere dayanmaktadır. Yazarlar bunları kullanırken güvenliğinizi garanti etmez ve sonuçlarla ilgili herhangi bir sorumluluk kabul etmez. Aslanın yırtıcı ve tehlikeli bir hayvan olduğunu unutmayın!

Bu örneğin sonucu Şekil 2'de gösterilmektedir. 2.

Pirinç. 2. Web sayfasındaki renkler