CSS renk modülü, yazarların html öğelerinin renklerini ve opaklığını belirtmesine izin veren değerlerin yanı sıra color özelliğinin değerlerini detaylandırır.
renk özelliği
1. Öncelikli renkler: renk özelliği
Özellik, yazı tipi rengini çeşitli işleme sistemlerini kullanarak ayarlar. Özellik, öğenin metin içeriğinin rengini tanımlar. Ayrıca, renk değerlerini kabul eden diğer özellikler için olası bir dolaylı değer (currentColor) sağlamak için kullanılır.
Mülkiyet miras alınır.
2. Renk değerleri
2.1. Ana anahtar kelimeler
Ana anahtar kelimelerin listesi aşağıdaki değerleri içerir:
| İsim | HEX | RGB | Renk |
|---|---|---|---|
| siyah | #000000 | 0,0,0 | |
| gümüş | #C0C0C0 | 192,192,192 | |
| gri | #808080 | 128,128,128 | |
| beyaz | #FFFFFF | 255,255,255 | |
| kestane rengi | #800000 | 128,0,0 | |
| kırmızı | #FF0000 | 255,0,0 | |
| mor | #800080 | 128,0,128 | |
| fuşya | #FF00FF | 255,0,255 | |
| Yeşil | #008000 | 0,128,0 | |
| Misket Limonu | #00FF00 | 0,255,0 | |
| zeytin | #808000 | 128,128,0 | |
| Sarı | #FFFF00 | 255,255,0 | |
| Donanma | #000080 | 0,0,128 | |
| mavi | #0000FF | 0,0,255 | |
| deniz mavisi | #008080 | 0,128,128 | |
| su | #00FFFF | 0,255,255 |
Renk adları büyük/küçük harfe duyarlı değildir.
Sözdizimi
Renk tonu;
2.2. Sayısal Renk Değerleri
2.2.1. RGB Model Renkleri
Onaltılık bir RGB değerinin formatı, hemen ardından üç veya altı onaltılık karakter gelen bir # işaretidir. Üç basamaklı RGB gösterimi #rgb, sıfır ekleyerek değil, basamakları kopyalayarak altı basamaklı #rrggbb biçimine dönüştürülür. Örneğin, #fb0 #ffbb00 olarak genişler. Bu, beyaz #ffffff'in #fff stenosunda belirtilebilmesini sağlar ve ekranın renk derinliğindeki tüm bağımlılıkları ortadan kaldırır.
İşlevsel gösterimde bir RGB değerinin formatı rgb'dir( ardından üç sayısal değerden oluşan virgülle ayrılmış bir liste (üç tamsayı değeri veya üç yüzde değeri) ve ardından bir karakter gelir). 255 tamsayı değeri, onaltılık gösterimde %100 ve F veya FF'ye karşılık gelir:
rgb(255,255,255) = rgb(100%, 100%, 100%) = #FFF
Sayısal değerlerin etrafında boşluk karakterlerine izin verilir.
Bu sayfa, HTML, CSS, JavaScript, Flash, vb. gibi Web geliştirme dillerinde renkleri belirlemek için kullanılabilecek anahtar kelimeler içeren bir tablo içerir.
Eski WC3 spesifikasyonunda, HTML ve CSS'de renkleri ayarlamak için yalnızca 16 anahtar kelime kullanıldı. Daha sonra, daha modern spesifikasyonlarda, renk adlarını belirtmek için 130 anahtar kelime daha eklendi. Aşağıdaki tablo, karşılık gelen renk adlarını, onaltılık ve RGB kodlarını içerir.
CSS kurallarına göre renk isimleri büyük/küçük harf duyarlı değildir. IndianRed ve indianred renk girişleri eşdeğerdir.
Tablodaki 146 anahtar kelimeden aslında daha az renk olduğunu da belirtmekte fayda var. Bunun nedeni, bazı anahtar kelimelerin aynı renge atıfta bulunmasıdır. Dolayısıyla, Gray ve Gray adları #808080 koduyla yüzde 50 griyi temsil ederken, Macenta sözcüğü, #FF00FF onaltılı koduna karşılık gelen Fuşya renginin HTML eşanlamlısıdır. Aqua ve Cyan kelimeleri de eşanlamlıdır, #00FFFF koduna karşılık gelirler.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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. Onaltılı sistemde 15'ten büyük sayılar, iki sayının bire birleştirilmesiyle oluşturulur. Örneğin, ondalık olarak 255 sayısı, onaltılık olarak FF sayısına karşılık gelir. Sayı sisteminin tanımında karışıklığı önlemek için, onaltılık sayının önüne kare sembolü # gelir, örneğin #666999. Üç rengin her biri - kırmızı, yeşil ve mavi - 00 ile FF arasında değerler alabilir. Böylece, rengin tanımı, ilk iki karakterin rengin kırmızı bileşenini, ortadaki iki karakterin yeşili ve son ikisinin de maviyi işaret ettiği #rrggbb üç bileşene bölünmüştür. Her karakterin iki katına çıkarılması gereken kısaltılmış #rgb formunun kullanılmasına izin verilir. Bu nedenle #fe0 girişi #ffee00 olarak kabul edilmelidir.
isimle
| 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 ada göre destekler. Masada. 1 adları, hex kodunu, RGB, HSL formatındaki değerleri ve açıklamayı gösterir.
| İ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 | |
| 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ı | |
| Portakal | #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%) | 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 Explorer | Krom | Opera | safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Ondalık olarak kırmızı, yeşil ve mavi değerleri kullanarak bir renk tanımlayabilirsiniz. Üç renk bileşeninin her biri 0 ile 255 arasında bir değer alır. Rengi yüzde olarak ayarlamak da kabul edilebilir, %100 ise 255 sayısına karşılık gelir. Önce rgb anahtar sözcüğü belirtilir ve ardından renk bileşenleri belirlenir. virgülle ayrılmış parantez içinde 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ı 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ğrulanması bu sürüme göre yapılmalıdır. CSS3 standardının hala geliştirilme aşamasında olduğu ve bazı özelliklerinin değişebileceği unutulmamalıdır. Örneğin, arka plan rengi özelliğine eklenen bir RGB rengi doğrulamayı geçer, ancak arka plan özelliğine eklenen bir RGB rengi doğrulamayı geçmez. 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 tekerleğindeki (Şekil 1) renk değeridir ve derece olarak belirtilir. 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. Küçük değerler rengi daha koyu hale getirirken, yüksek değerler 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 biçimi, sözdizimi açısından HSL'ye benzer, ancak öğenin saydamlığı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üme göre geçerliliğini kontrol edin.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
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!
Bu örneğin sonucu Şekil 2'de gösterilmektedir. 2.
Pirinç. 2. Web sayfasındaki renkler
HTML renkleri, eğik çizgiden sonra altı karakterle gösterilir - örneğin, #000000. Bu altı karakter, son renkteki çeşitli renklerin (Kırmızı, Yeşil ve Mavi) oranlarını temsil eder. Bilgisayar monitörünüzdeki görüntü, piksel adı verilen çok sayıda noktadan oluşur. Her piksel küçük bir ışık kaynağıdır, buna kırmızı, yeşil ve mavi olmak üzere üç el fenerinden oluşan "el feneri" diyelim. Tek tek renkli fenerlerin parıltısının yoğunluğunu azaltarak veya artırarak istenen rengi elde ederiz.
html renk kodları
HTML'deki renkler, kırmızı, mavi ve yeşilin (RGB) birleşimi için onaltılık (HEX) gösterimle gösterilir.
En küçük renk değeri 0'dır (onaltılık 00). En yüksek renk değeri 255'tir (onaltılık FF).
Onaltılık renk değeri, # ile başlayan üç basamaktır.
Renk kodları (değerler)
| Renk | HEX kodu | RGB kodu |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
16 milyon ton
Her bir renk için 0 ile 255 arasında değişen değerlerle kırmızı, mavi ve yeşili birleştirmek, 16 milyonun üzerinde gölge (256 x 256 x 256) ekler.
Modern monitörlerin çoğu en az 16.384 farklı renk tonu görüntüleme kapasitesine sahiptir (LCD monitörler genellikle 262,16 milyon (Ekim 2013'te güncellendi) renkler, CRT monitörler ise neredeyse sınırsız sayıda renk görüntüleyebilir).
Aşağıdaki renk tablosu, mavi ve yeşil için sıfır değerleri ile 0'dan 255'e kırmızı oranındaki değişimi göstermektedir:
| Kırmızı | HEX kodu | RGB kodu |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080000 | rgb(8,0,0) | |
| #100000 | rgb(16,0,0) | |
| #180000 | rgb(24,0,0) | |
| #200000 | rgb(32,0,0) | |
| #280000 | rgb(40,0,0) | |
| #300000 | rgb(48,0,0) | |
| #380000 | rgb(56,0,0) | |
| #400000 | rgb(64,0,0) | |
| #480000 | rgb(72,0,0) | |
| #500000 | rgb(80,0,0) | |
| #580000 | rgb(88,0,0) | |
| #600000 | rgb(96,0,0) | |
| #680000 | rgb(104,0,0) | |
| #700000 | rgb(112,0,0) | |
| #780000 | rgb(120,0,0) | |
| #800000 | rgb(128,0,0) | |
| #880000 | rgb(136,0,0) | |
| #900000 | rgb(144,0,0) | |
| #980000 | rgb(152,0,0) | |
| #A00000 | rgb(160,0,0) | |
| #A80000 | rgb(168,0,0) | |
| #B00000 | rgb(176,0,0) | |
| #B80000 | rgb(184,0,0) | |
| #C00000 | rgb(192,0,0) | |
| #C80000 | rgb(200,0,0) | |
| #D00000 | rgb(208,0,0) | |
| #D80000 | rgb(216,0,0) | |
| #E00000 | rgb(224,0,0) | |
| #E80000 | rgb(232,0,0) | |
| #F00000 | rgb(240,0,0) | |
| #F80000 | rgb(248,0,0) | |
| #FF0000 | rgb(255,0,0) |
grinin tonları
Gri tonlarını elde etmek için tüm renklerin eşit oranları kullanılır. İstenilen rengin seçimini kolaylaştırmak için size gri tonları için kodlar sağlıyoruz.
| grinin tonları | HEX kodu | RGB kodu |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | |
| #101010 | rgb(16,16,16) | |
| #181818 | rgb(24,24,24) | |
| #202020 | rgb(32,32,32) | |
| #282828 | rgb(40,40,40) | |
| #303030 | rgb(48,48,48) | |
| #383838 | rgb(56,56,56) | |
| #404040 | rgb(64,64,64) | |
| #484848 | rgb(72,72,72) | |
| #505050 | rgb(80,80,80) | |
| #585858 | rgb(88,88,88) | |
| #606060 | rgb(96,96,96) | |
| #686868 | rgb(104,104,104) | |
| #707070 | rgb(112,112,112) | |
| #787878 | rgb(120,120,120) | |
| #808080 | rgb(128,128,128) | |
| #888888 | rgb(136,136,136) | |
| #909090 | rgb(144,144,144) | |
| #989898 | rgb(152,152,152) | |
| #A0A0A0 | rgb(160,160,160) | |
| #A8A8A8 | rgb(168,168,168) | |
| #B0B0B0 | rgb(176.176,176) | |
| #B8B8B8 | rgb(184,184,184) | |
| #C0C0C0 | rgb(192,192,192) | |
| #C8C8C8 | rgb(200,200,200) | |
| #D0D0D0 | rgb(208.208.208) | |
| #D8D8D8 | rgb(216,216,216) | |
| #E0E0E0 | rgb(224,224,224) | |
| #E8E8E8 | rgb(232,232,232) | |
| #F0F0F0 | rgb(240,240,240) | |
| #F8F8F8 | rgb(248.248.248) | |
| #FFFFFF | rgb(255,255,255) |
Çapraz tarayıcı (tüm tarayıcılar için) html renk adları
Tüm tarayıcılarda desteklenen 150 html renk adından oluşan bir koleksiyon.
Standartlaştırılmış renk adları
W3C, HTML ve CSS için 16 geçerli renk adını listeler: aqua (akuamarin), siyah (siyah), mavi (mavi), fuşya (macenta), gri (gri), yeşil (yeşil), kireç (kireç veya açık yeşil), bordo (kestane), lacivert (ultramarine), zeytin (zeytin), mor (mor), kırmızı (kırmızı), gümüş (gümüş), deniz mavisi (gri), beyaz (beyaz) ve sarı (sarı).
Bu listede olmayan renkleri kullanırken onaltılık kodunu (HEX) veya RGB kodunu kullanmak daha doğru olacaktır.
Güvenli renkler
Birkaç yıl önce, bilgisayarlar maksimum 256 farklı rengi destekleyebildiğinde, sistem için ayrılmış 40 renk ile 216 "Web Güvenli Renk" listesi önerildi.
Bu 216 renkli palet, 256 renkli palet modunda renkleri doğru şekilde görüntülemek için oluşturulmuştur.
Artık önemli değil çünkü dünyadaki çoğu bilgisayar milyonlarca renk tonunu destekliyor. Her durumda, işte bu renklerin bir listesi:
| 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 |
Altın Numaralar Güzel bir telefon numarası nasıl satılır
Kripto para madenciliği: basit kelimelerle nedir
En iyi dizüstü bilgisayar işletim sistemi: Eksiksiz inceleme
Sınıf arkadaşlarından müzik indirmek için programlar Sosyal ağ sınıf arkadaşlarından üzücü bir şarkı indirin
Yandex tarayıcısının mobil versiyonu