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

CSS'deki renk kodları, renkleri belirtmek için kullanılır. Tipik olarak, bir öğenin ön planı (örneğin, metin, bağlantı rengi) veya bir öğenin arka planı (arka plan, blok rengi) için bir renk ayarlamak için renk kodları veya renk değerleri kullanılır. Düğme rengini, kenarlıkları, işaretçiyi, vurgulu ve diğer dekoratif efektleri değiştirmek için de kullanılabilirler.

Renk değerlerinizi çeşitli formatlarda ayarlayabilirsiniz. Aşağıdaki tabloda olası tüm biçimler listelenmektedir:

Bu biçimler aşağıda daha ayrıntılı olarak açıklanmaktadır.

CSS Renkleri - Hex Kodları

Onaltılık renk kodu altı basamaklı renkli bir gösterimdir. İlk iki hane (RR) kırmızı değeri, sonraki ikisi yeşil değeri (GG) ve son ikisi mavi değeri (BB) gösterir.

CSS Renkleri - Kısa Hex Kodları

Kısa onaltılık renk kodu altı karakterli gösterimin daha kısa bir biçimidir. 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. gibi herhangi bir grafik yazılımından alınabilir.

CSS'deki her onaltılık renk kodundan önce bir "#" karma işareti gelir. Aşağıdakiler, onaltılık gösterimin kullanımına ilişkin örneklerdir.

CSS Renkleri - RGB Değerleri

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

Renk kodu üreteci

Hizmetimizle milyonlarca renk kodu oluşturabilirsiniz.

Güvenli Tarayıcı Renkleri

Aşağıda en güvenli ve bilgisayardan bağımsız olan 216 renkten oluşan bir tablo bulunmaktadır. CSS'deki bu renkler 000000 ila FFFFFF hex kodu arasında değişir. 256 renk paleti ile çalışırken tüm bilgisayarların renkleri doğru şekilde göstermesini sağladıklarından kullanımları güvenlidir.

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

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.

RGB ile

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

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

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

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

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

Bildiğiniz gibi renk, bir kişinin durumunu etkileyebilir: hem zihinsel hem de fiziksel. Her gün internette gezinirken gözler milyonlarca rengi ve gölgeyi değerlendirir. Renk psikolojisine aşina bir web tasarımcısı, herhangi bir hedefe ulaşmak için ziyaretçinin ruh halini kontrol edebilir.

Bunun nedeni, bazı tonların yatıştırması ve bazılarının ise tam tersine heyecanlandırmasıdır. Ardından, bilgisayar teknolojisi kullanılarak rengin nasıl sentezlendiği ve gösterildiği hakkında konuşacağız.

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

RGB'nin kısaltılmış adı buradan gelir. Bu renklerin ana renk olarak seçilmesinin bir nedeni var: İnsan gözünün retina fizyolojisi ve bunları nasıl algıladığı:

Sayısal renk gösterimi

Daha önce de belirtildiği gibi, RGB renkleri ana renklerin karıştırılmasıyla oluşturulur. Her birinin yoğunluğunu tanımlamak için, rengin onaltılık olarak 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'in altında değerler alırsa, kırmızı, yeşil ve mavinin çeşitli tonları elde edilir. Aşağıda, tonlamalarının bir tablosu ve her bir gölgenin onaltılık değerleri verilmiştir:

RGB Renk Tabloları

Doğal olarak, ana renklerin tonlamalarına ek olarak, karışık olanlar da vardır ve sayıları oldukça fazladır. Bu nedenle, mevcut tüm gölgelerin yanı sıra adlarının ve sayısal temsillerinin sunulduğu bir RGB renkleri tablosu oluşturuldu ( ondalık ve onaltılık biçimde).

Onu burada tanıyabilirsin. Bu tablo, web tasarımcılarının hayatını büyük ölçüde kolaylaştırır, çünkü birkaç saniye içinde istediğiniz gölgeyi 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 türetilen sözde "güvenli" RGB renk paleti derlendi.

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

Bir web geliştiricisi, bu paletteki RGB renk kodlarını kullanarak, farklı tarayıcılar, platformlar ve monitörler kullanılarak sitelerinin sayfalarında renkleri görüntüleme konusunda gönül rahatlığı yaşayabilir. Şu anda güvenli renkler tablosu alaka düzeyini kaybediyor olsa da ( teknolojik ilerleme durmuyor), kullanırken dedikleri gibi huzur içinde uyuyabilirsiniz.

RGB modelinde altın rengi

İlk kez "altın" kelimesi, XIV yüzyılın başında Aurum - altın adı verilen kimyasal bir elementin rengini tanımlamak için kullanıldı. RGB modelinde altın rengi 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 renk

Bej, en etkileyici olmasa da tarihte oldukça önemli bir yere sahiptir. Pek çok kültürel anıt, özellikle antik heykeller, bej tonu olan steatit ve sabuntaşından yapılmıştır. RGB modelinde, bej aşağıdaki sayısal temsillere sahiptir.

Ne yazık ki, sitede tat duyumlarını görüntülemek henüz mümkün değil. Ancak bu, renklerin yardımıyla tamamen telafi edilebilir. Sonuçta, html renkleri milyonlarca gölgeden herhangi birini görüntülemenize izin verir. Bu yüzden " renkli kalemler” setinde yediden çok daha fazlası var.

html'de renk şeması

Html'de renk birkaç biçimde belirtilebilir:

1. Onaltılık değer olarak - onaltılık sistemde belirtilen kod kullanılır. Html'deki bu tür renk kodları, üç çift onaltılık sayıdan oluşur. Her çift, tonun ana rengiyle doygunluğundan sorumludur:

• İlk sayısal çift kırmızı renkten sorumludur;
• İkinci çift yeşil rengin içeriği içindir;
• İkincisi, mavi rengin içeriği içindir.

Kodun başına (sayılardan önce) bir kare işareti konur. Bu onaltılık renk kodudur. 1'den 9'a kadar olan sayılara ek olarak, bu sayı sistemi Latin alfabesinin harflerini (A, B, C, D, E, F) kullanır.

Örneğin, html'deki beyaz renk kodu #FFFFFF gibi görünür.:

Gri, iki anahtar sözcükle temsil edilir: gri ve gri. Onaltılık kodları (HEX ) aynı değerle verilir #808080 .

Örnek :

#808080

• R - kırmızı (kırmızı);
• G - yeşil (yeşil);
• B - mavi (mavi).

RGB formatında renk numarası şu şekilde yazılır: rgb(0, 210, 100).

arka plan rengi:rgb(100,186,43)

Kullanım örneği:

arka plan rengi:rgba(100,86,143,0,2)

arka plan rengi:rgba(100,86,143,0,5)

arka plan rengi:rgba(100,86,143,0,8)

arka plan rengi:rgba(100,86,143,1)

html renk tabloları ve renk üreteçleri

Bu kadar geniş bir renk ayarı formatı yelpazesi ile kafa karıştırmak kolaydır. Bu nedenle özel bir renk tablosu icat edildi. İçinde, renk tonlarının 147 anahtar adına karşılık gelen kodlar, renk gösterimi için tüm ana standartlarda verilmiştir. Ek olarak, her alan görsel renk eşleştirmesi için bir çubukla donatılmıştır. Bu tablolardan biri colorscheme.ru sitesinde sunulmaktadır:

Bu engeli aşmak ve doğru rengi seçmeyi olabildiğince kolaylaştırmak için etkileşimli web hizmetleri geliştirilmiştir. Kullanıcı arayüzleri birbirinden biraz farklı olabilir.

html-color-codes.info sitesinde renk üreteci şöyle görünür:

Jeneratördeki her rengin doygunluğu, özel kaydırıcılar kullanılarak ayarlanır. Görsel olarak, renk tonu, sol taraftaki çerçeve ve dikdörtgenin rengiyle gösterilir. Altta 3 alan ana formatlardaki renk kodunu gösterir.

Ancak renk üreteci yalnızca özel sitelerde mevcut değildir. Hemen hemen tüm grafik editörleri benzer bir araçla donatılmıştır. Örneğin Photoshop'ta:

Renk Güvenliği

Ve çok uzun zaman önceydi, sadece 256 rengi destekleyen video kartları çağındaydı. O günlerde, işletim sistemleri yalnızca belirli sayıda sekiz bitlik gölgeleri bozulma olmadan görüntüleyebiliyordu.

Ardından, güvenli renklerin büyük tablosu oluşturuldu. O zamanın herhangi bir tarayıcısında bozulma olmadan görüntülenebilecek 216 renk tonu gösterdi. Ve bu güne kadar büyük el yazması» hala bazı kaynaklarda mevcuttur:

HTML'de renk üç şekilde belirtilebilir:

HTML'de rengi adına göre ayarlama

Bazı renkler, değer olarak rengin İngilizce adı kullanılarak adlarıyla belirtilebilir. En yaygın anahtar kelimeler: siyah (siyah), beyaz (beyaz), kırmızı (kırmızı), yeşil (yeşil), mavi (mavi), vb.:

Metin Rengi - Kırmızı

World Wide Web Consortium (W3C) standardının en popüler renkleri şunlardır:

Farklı renk adlarının kullanımına bir örnek:

Örnek: adına göre bir renk ayarlama

• Kendin dene "

Kırmızı zemin üzerine başlık

Turuncu zemin üzerine başlık

Kireç arka plan üzerinde başlık

Mavi zemin üzerine beyaz metin

Kırmızı zemin üzerine başlık

Turuncu zemin üzerine başlık

Kireç arka plan üzerinde başlık

Mavi zemin üzerine beyaz metin

RGB ile renk belirleme

Farklı renkleri monitörde görüntülerken RGB paleti esas alınır. Üç ana renk karıştırılarak herhangi bir renk elde edilir: R - kırmızı, G - yeşil (yeşil), B - mavi (mavi). Her rengin parlaklığı bir byte ile verilir ve bu nedenle 0 ile 255 arasında değerler alabilir. Örneğin RGB (255,0,0) kırmızı olarak gösterilir çünkü kırmızı en yüksek değerine (255) ayarlıdır ve diğerleri 0 olarak ayarlanmıştır. Rengi yüzde olarak da ayarlayabilirsiniz. Parametrelerin her biri, karşılık gelen rengin parlaklık seviyesini gösterir. Örneğin: rgb(127, 255, 127) ve rgb(50%, 100%, 50%) değerleri aynı orta doygunluk yeşil rengini ayarlayacaktır:

Örnek: RGB ile renk belirleme

• Kendin dene "

rgb(127, 255, 127)

rgb(%50, %100, %50)

rgb(127, 255, 127)

rgb(%50, %100, %50)

Rengi onaltılık değere göre ayarla

Değerler R G B ayrıca şu biçimde onaltılık (HEX) renk değerleri kullanılarak belirtilebilir: #RRGGBB burada RR (kırmızı), GG (yeşil) ve BB (mavi) 00'dan FF'ye kadar onaltılık değerlerdir (ondalık 0- ile aynı) 255) . Onaltılı sistem, onlu sistemden farklı olarak adından da anlaşılacağı gibi 16 sayısını temel alır. Onaltılı sistem şu karakterleri kullanır: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Burada 10'dan 15'e kadar olan sayılar Latin harfleriyle değiştirilmiştir. Onaltılık sistemde 15'ten büyük sayılar, iki karakterin bir değerde birleşimidir. Örneğin, ondalıktaki en yüksek sayı olan 255, onaltılıktaki en yüksek FF'ye karşılık gelir. Ondalık sistemden farklı olarak, onaltılık sayıdan önce bir pound işareti gelir. # , örneğin #FF0000 kırmızı olarak görüntülenir çünkü kırmızı en yüksek değerine (FF) ve diğer renkler minimum değerlerine (00) ayarlanmıştır. Hash sembolünden sonraki karakterler # hem büyük hem de küçük harf olarak yazılabilir. Onaltılık sistem, her karakterin iki katına eşit olduğu kısaltılmış #rgb biçimini kullanmanıza olanak tanır. Bu nedenle, #f7O girişi #ff7700 olarak kabul edilmelidir.

Örnek: Renkli HEX

• Kendin dene "

kırmızı: #FF0000

yeşil: #00FF00

mavi: #0000FF

kırmızı: #FF0000

yeşil: #00FF00

mavi: #0000FF

kırmızı+yeşil=sarı: #FFFF00

kırmızı+mavi=mor: #FF00FF

yeşil+mavi=cam göbeği: #00FFFF

Yaygın olarak kullanılan renklerin listesi (ad, HEX ve RGB):

Doygunluk ve tona göre renk kodları (arka plan).