Beyaz css rengi. Öğrenci HTML'si. RGB renkleri. Güvenli palet renkleri

  • 30.09.2019

Bir rengi belirtmek için CSS renk kodları kullanılır. Tipik olarak, renk kodları veya renk değerleri, bir öğenin ön planı (örneğin, metin rengi, bağlantı rengi) veya bir öğenin arka planı (arka plan rengi, blok rengi) için bir renk ayarlamak için kullanılır. Ayrıca bir düğmenin, kenarlığın, işaretçinin, vurgunun ve diğer dekoratif efektlerin rengini değiştirmek için de kullanılabilirler.

Kendi renk değerlerinizi çeşitli formatlarda ayarlayabilirsiniz. Aşağıdaki tablo tüm olası biçimleri listeler:

Listelenen formatlar aşağıda daha ayrıntılı olarak açıklanmaktadır.

CSS Renkleri - Onaltılık Kodlar

Onaltılık renk kodu bir rengin altı basamaklı bir temsilidir. İlk iki hane (RR) kırmızı değeri, sonraki ikisi yeşil değeri (GG) ve son ikisi mavi değeri (BB) temsil eder.

CSS Renkleri - Kısa Hex Kodları

Kısa altıgen renk kodu altı basamaklı gösterimin daha kısa şeklidir. 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. herhangi bir grafik yazılımından alınabilir.

CSS'deki her onaltılık renk kodunun önünde bir "#" karma işareti bulunur. Aşağıdakiler, onaltılık gösterimi kullanma örnekleridir.

CSS Renkleri - RGB Değerleri

RGB değeri rgb () özelliği kullanılarak ayarlanan renk kodudur. Bu özellik, her biri kırmızı, yeşil ve mavi için olmak üzere üç değer alır. Değer, 0 ile 255 arasında bir tam sayı veya 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 bulunmaktadır.

Renk kodu üreteci

Hizmetimizi kullanarak milyonlarca renk kodu oluşturabilirsiniz.

Güvenli tarayıcı renkleri

Aşağıda en güvenli ve bilgisayardan en bağımsız olan 216 renkten oluşan bir tablo bulunmaktadır. Bu CSS renkleri 000000 ile FFFFFF onaltılık arasında değişir. 256 renk paleti ile çalışırken tüm bilgisayarların rengi doğru görüntülemesini sağladıklarından kullanımları güvenlidir.

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

Vlad Merjeviç

HTML'de bir renk iki yoldan biriyle belirtilir: onaltılık bir kod kullanarak ve bazı renklerin adıyla. Onaltılık sayı sistemine dayanan yöntem, en evrensel olanı olarak esas olarak kullanılır.

Onaltılık renkler

HTML'de renkleri belirtmek için onaltılık sayılar kullanılır. Onaltılık sistem, ondalık sistemin aksine, 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. Tablo 6.1, ondalık ve onaltılık sayılar arasındaki yazışmayı gösterir.

Onaltılı sistemde 15'ten büyük sayılar, iki sayının bire birleştirilmesiyle oluşturulur (Tablo 6.2). Örneğin, 255 ondalık FF onaltılıktır.

Sayı sisteminin tanımında karışıklığı önlemek için, onaltılık sayının önüne # karma karakteri yerleştirilir, örneğin # aa69cc. Bu durumda register önemli değildir, dolayısıyla #F0F0F0 veya #f0f0f0 yazılmasına izin verilir.

HTML'de kullanılan tipik bir renk şöyle görünür.

Burada web sayfasının arka plan rengi #FA8E47 olarak ayarlanmıştır. Bir sayının önündeki karma sembolü #, onaltılık olduğu anlamına gelir. İlk iki basamak (FA) rengin kırmızı bileşenini tanımlar, üçüncü ila dördüncü basamak (8E) yeşildir ve son iki basamak (47) mavidir. Sonuç olarak, bu rengi elde edersiniz.

FA + 8E + 47 = FA8E47

Üç rengin her biri - kırmızı, yeşil ve mavi - 00'dan FF'ye kadar değerler alabilir ve 256 tonla sonuçlanır. Böylece toplam renk sayısı 256x256x256 = 16.777.216 kombinasyon olabilir. Kırmızı, yeşil ve mavi bileşenlere dayalı renk modeli RGB (kırmızı, yeşil, mavi; kırmızı, yeşil, mavi) olarak adlandırılır. Bu model, üç bileşenin eklenmesinin beyaz bir renk oluşturduğu bir 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), gri bir renk tonu elde edersiniz. Sayı ne kadar yüksek olursa, renk o kadar açık olur, değerler # 000000 (siyah) ile #FFFFFF (beyaz) arasında değişir.
  • Kırmızı bileşen maksimuma (FF) ayarlanırsa ve bileşenlerin geri kalanı sıfıra ayarlanırsa parlak kırmızı bir renk oluşur. # FF0000 rengi, mümkün olan en kırmızı renk tonudur. Aynı durum yeşil (# 00FF00) ve mavi (# 0000FF) için de geçerlidir.
  • Kırmızı ile yeşil karıştırılarak sarı (#FFFF00) elde edilir. Bu, ana renklerin (kırmızı, yeşil, mavi) ve tamamlayıcı veya tamamlayıcı renklerin sunulduğu renk çarkında (Şekil 6.1) açıkça görülebilir. Bunlar sarı, camgöbeği ve moru (eflatun olarak da adlandırılır) içerir. Genel olarak, yakın renkler karıştırılarak herhangi bir renk elde edilebilir. Böylece mavi ve yeşil birleştirilerek camgöbeği (# 00FFFF) elde edilir.

Pirinç. 6.1. renk çemberi

Onaltılık renklerin deneysel olarak seçilmesine gerek yoktur. Bu amaçla, örneğin Adobe Photoshop gibi farklı renk modelleriyle çalışabilen bir grafik düzenleyici uygundur. İncirde. 6.2, bu programda renk seçimi için bir pencere gösterir, mevcut rengin elde edilen onaltılık değeri bir çizgi ile özetlenir. Kopyalayıp kodunuza yapıştırabilirsiniz.

Pirinç. 6.2. Photoshop'ta renk seçim penceresi

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. Bunun nedeni, tarayıcının kendi paleti ile çalıştığı ve paletinde bulunmayan bir rengi gösteremediği grafiklerin görüntülenme şeklinden kaynaklanmaktadır. Bu durumda, renk, belirtilen rengi taklit eden diğer renklerin piksellerinin bir kombinasyonu ile değiştirilir. Rengi farklı tarayıcılarda değişmeden tutmak için, web renkleri olarak adlandırılan bir paleti tanıttık. Web renkleri, her bileşen için - kırmızı, yeşil ve mavi - altı değerden birinin ayarlandığı renklerdir - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC ), 255 (FF). Parantezler bu bileşenin onaltılık değerini gösterir. Tüm olası kombinasyonlardan toplam renk sayısı 6x6x6 - 216 renk verir. Bir web rengi örneği # 33FF66'dır.

Web renginin ana özelliği, tüm tarayıcılarda aynı görünmesidir. Şu anda, monitörlerin kalitesindeki artış ve yeteneklerinin genişlemesi nedeniyle web renklerinin alaka düzeyi çok küçüktür.

Ada göre renkler

Bir dizi sayıyı ezberlememek için bunun yerine yaygın olarak kullanılan renklerin adlarını kullanabilirsiniz. Tablo 6.3 popüler renk adlarının adlarını listeler.

Sekme. 6.3. Bazı renk isimleri
renk adı Renk Açıklama 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
Misket Limonu Açık yeşil # 00FF00
kestane rengi Koyu Kırmızı #800000
Donanma lacivert #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 ne şekilde belirttiğinizin bir önemi yoktur - adıyla veya onaltılık sayılar kullanarak. Bu yöntemler eylemlerinde eşittir. Örnek 6.1, bir web sayfasının arka plan ve metin renginin nasıl ayarlanacağını gösterir.

Örnek 6.1. Arka plan ve metin rengi

Renkler

Örnek yazı

Bu örnekte, arka plan rengi, etiketin bgcolor niteliği kullanılarak ayarlanır. ve metin özniteliği aracılığıyla metin rengi. Bir değişiklik için, text niteliği onaltılık bir sayıya, bgcolor ise deniz mavisi ayrılmış anahtar sözcüğüne ayarlanmıştır.

02/26/15 8.9K

Bildiğiniz gibi, renk bir kişinin durumunu etkileyebilir: hem zihinsel hem de fiziksel. Her gün internetteki sitelere bakan gözler milyonlarca renk ve tonu değerlendiriyor. Renk psikolojisine aşina olan bir web tasarımcısı, herhangi bir hedefe ulaşmak için ziyaretçinin ruh halini değiştirebilir.

Bunun nedeni, bazı gölgelerin yatıştırıcı olması, diğerlerinin ise aksine heyecan verici olmasıdır. Ardından, bilgisayar teknolojisi kullanılarak rengin nasıl sentezlendiğinden ve görüntülendiğinden bahsedeceğiz.

RGB, üç ana bileşeni çeşitli oranlarda karıştırarak tüm renkleri ve gölgelerini elde etme yöntemini temsil eden bir renk modelidir:

  • Kırmızı renk ( kırmızı);
  • yeşil renk ( Yeşil);
  • Mavi renk ( Mavi).

Kısaltılmış RGB isminin geldiği yer burasıdır. Bu renkler bir nedenden dolayı ana renkler olarak seçilmiştir: Bunun nedeni, insan gözünün retinasının fizyolojisi ve onları nasıl algıladığıdır:


RGB modeli bugün en popüler olmaya devam ediyor ve TV ekranlarında ve bilgisayar monitörlerinde renkleri yeniden üretmek için kullanılıyor. Üreticiler ürünlerine farklı özellikler kazandırdıkça, 1996 yılında Microsoft ve HP'nin işbirliği yaptığı sRGB adlı birleşik RGB tabanlı renk sentezi sistemi oluşturuldu.

Sayısal renk gösterimi

Daha önce de belirtildiği gibi RGB renkleri ana renklerin karıştırılmasıyla oluşur. Her birinin yoğunluğunu tanımlamak için, rengin onaltılık sistemde 00-FF'ye karşılık gelen 0-255 (8 bit) aralığı ile temsil edildiği bir şema benimsenmiştir.

Yani, ana renkler şöyle görünecektir:

  • Kırmızı - RGB (255,0,0);
  • Yeşil - RGB (0.255.0);
  • Mavi - RGB (0,0,255);

Renk yoğunluğu 255'ten küçük değerler alırsa, kırmızı, yeşil ve mavinin farklı tonları elde edilir. Aşağıda, tonlarının yanı sıra her bir gölgenin onaltılık değerlerinin bir tablosu bulunmaktadır:

RGB renk tabloları

Doğal olarak, ana renklerin derecelerine ek olarak, karışık olanlar da vardır ve sayıları oldukça fazladır. Bu nedenle, mevcut tüm tonların yanı sıra adlarının ve sayısal temsillerinin sunulduğu bir RGB renk tablosu oluşturulmuştur ( ondalık ve onaltılık).

Buradan tanışabilirsiniz. Bu tablo, web tasarımcıları için hayatı çok daha kolaylaştırır, çünkü birkaç saniye içinde istediğiniz rengi bulabilir ve sayısal temsilini öğrenebilirsiniz.

Güvenli RGB renk paleti

Bununla birlikte, bir noktada renkleri farklı tarayıcılarda görüntüleme sorunu vardı ve bunu çözmek için, matematiksel hesaplamalarla çıkarılan "güvenli" bir RGB renk paleti derlendi.

Tarayıcı bir rengi doğru görüntüleyemediğinde, bitişik renkleri karıştırarak istenen renge yaklaşmaya çalışır ve büyük olasılıkla sonuç tamamen kabul edilemez olacaktır:

Bu paletteki RGB renk kodlarını kullanarak, bir web geliştiricisi, farklı tarayıcılar, platformlar ve monitörler ile görüntülendiğinde site sayfalarında renk gösterme korkusuna sahip olamaz. Şu anda güvenli renkler tablosu alaka düzeyini kaybetmesine rağmen ( teknik ilerleme hala durmuyor), kullanırken, dedikleri gibi, iyi uyuyabilirsiniz.

RGB modelinde altın rengi

İlk kez, XIV yüzyılın başında Aurum - altın adı verilen kimyasal bir elementin rengini tanımlamak için "altın" kelimesi kullanıldı. RGB modelinde altın, aşağıdaki sayısal değerlerle temsil edilir:

  • RGB (255, 215, 0) - ondalık sistem;
  • HEX # FFD700 - onaltılık sistem.

RGB modelinde bej rengi

Bej rengi, en etkileyici olmasa bile tarihte oldukça önemli bir yer kaplar. Birçok kültürel anıt, özellikle antik heykeller, bej bir renk tonuna sahip sabuntaşı ve sabuntaşından yapılmıştır. RGB'de bej, aşağıdaki sayısal temsillere sahiptir.

Renkleri ayarlamak için onaltılık sayılar kullanılır. Onaltılık sistem, ondalık sistemin aksine, 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 olarak 15'ten büyük sayılar, iki sayının bire birleştirilmesiyle oluşturulur. Örneğin, 255 ondalık FF onaltılık sayıya eşittir. Sayı sisteminin tanımında karışıklığı önlemek için, # karma karakteri onaltılık sayının önüne yerleştirilir, örneğin # 666999. Üç rengin her biri - kırmızı, yeşil ve mavi - 00 ile FF arasında değişebilir. Böylece, renk ataması, ilk iki karakterin rengin kırmızı bileşenini, iki ortadaki - yeşil ve son iki - mavi bileşenini belirttiği üç bileşene bölünmüştür. Her karakterin iki katına çıkarılması gereken #rgb gibi kısaltılmış bir form kullanılmasına izin verilir. Bu nedenle # fe0 girişi # ffee00 olarak ele alınmalıdır.

İsimle

Internet 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. Tablo 1 adları, onaltılık kodu, RGB, HSL değerlerini ve açıklamayı gösterir.

Sekme. 1. Renklerin isimleri
İsim Renk kod RGB hsl Açıklama
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
Misket Limonu # 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) lacivert
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) Mor

RGB ile

Internet 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 bileşenlerin ondalık değerlerini kullanarak rengi belirleyebilirsiniz. Üç renk bileşeninin her biri 0 ile 255 arasında bir değer alır. Rengin yüzde olarak ayarlanmasına da izin verilir, %100 ise 255 sayısına karşılık gelir. Önce rgb anahtar sözcüğü belirtilir ve ardından parantez içinde renk bileşenleri virgülle ayrılmış olarak belirtilir, örneğin rgb (255 , 128, 128) veya rgb (%100, %50, %50).

RGBA

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

RGBA biçimi, söz dizimi açısından RGB'ye benzer, ancak öğenin saydamlığını kontrol eden bir alfa kanalı içerir. 0 değeri tam şeffaflığa, 1 opaklığa ve 0,5 ila yarı şeffaflık gibi bir ara değere karşılık gelir.

RGBA, CSS3'e eklendi, bu nedenle CSS kod doğrulaması bu sürüm kullanılarak yapılmalıdır. CSS3 standardının hala geliştirme aşamasında olduğu ve içindeki bazı özelliklerin değişebileceği unutulmamalıdır. Örneğin, arka plan rengi özelliğine eklenen bir RGB rengi doğrulanır, ancak arka plan özelliğine eklenen renk artık geçerli olmaz. Aynı zamanda, tarayıcılar her iki özelliğin rengini de oldukça doğru bir şekilde anlar.

hsl

Internet 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 Hafiflik (hafiflik) ilk harflerinin birleşiminden oluşur. Ton, renk çarkındaki (Şekil 1) rengin değeridir ve derece olarak verilir. 0° kırmızı, 120° yeşil ve 240° mavidir. Ton değeri 0 ile 359 arasında değişebilir.

Pirinç. 1. Renk tekerleği

Doygunluk, bir rengin %0 ile %100 arasında bir yüzde olarak ölçülen yoğunluğudur. %0 değeri renk olmadığını ve gri gölgeyi 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. Düşük değerler rengi daha koyu, yüksek değerler ise daha açık hale getirirken, %0 ve %100 aşırı değerler siyah beyaza karşılık gelir.

HSLA

Internet 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 olarak HSL'ye benzer, ancak öğenin şeffaflığını ayarlayan bir alfa kanalı içerir. 0 değeri tam şeffaflığa, 1 opaklığa ve 0,5 ila yarı şeffaflık gibi bir ara değere karşılık gelir.

CSS3'te RGBA, HSL ve HSLA formatlarındaki renk değerleri eklenmiştir, bu yüzden bu formatları kullanırken versiyona göre kodun geçerliliğini kontrol ediniz.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Renkler

Bir uyarı

Sitede listelenen bir aslanı yakalamanın tüm 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. Unutma, aslan bir yırtıcı ve tehlikeli bir hayvandır!

arrrgh!

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

Pirinç. 2. Web sayfasındaki renkler