Web renkleri - Web colors

Web renkleri olan renkler kullanılan web sayfalarını gösteren üzerinde World Wide Web ve açıklayan ve bu renkleri belirlemek için yöntemler. Renkler RGB üçlüsü veya onaltılık formatta ( onaltılık üçlü ) veya bazı durumlarda yaygın İngilizce adlarına göre belirtilebilir. Renk değerleri oluşturmak için genellikle bir renk aracı veya başka bir grafik yazılımı kullanılır. Bazı kullanımlarda, onaltılık renk kodları, baştaki bir sayı işareti (#) kullanılarak gösterimle belirtilir . Her biri sekiz bit ile temsil edilen kırmızı, yeşil ve mavi bileşenlerinin yoğunluğuna göre bir renk belirlenir.. Bu nedenle, sRGB gamı içinde bir web rengini belirtmek için kullanılan 24 bit ve bu şekilde belirtilebilecek 16.777.216 renk vardır.

sRGB gamının dışındaki renkler , kırmızı, yeşil ve mavi bileşenlerin bir veya daha fazlasının negatif veya %100'den büyük yapılmasıyla Basamaklı Stil Sayfalarında belirtilebilir , bu nedenle renk uzayı teorik olarak scRGB'ye benzer bir sınırsız sRGB ekstrapolasyonudur . sRGB olmayan bir rengin bu şekilde belirtilmesi, RGB() işlev çağrısını gerektirir. Onaltılık sözdizimi ile imkansızdır (ve dolayısıyla CSS kullanmayan eski HTML belgelerinde imkansızdır ).

Mosaic ve Netscape Navigator'ın ilk sürümleri, her ikisi de X Pencere Sistemi uygulamaları olarak başladığından, renk listelerinin temeli olarak X11 renk adlarını kullandı . Web renklerinin, belirli bir fosfor kümesinin kromatikliklerini , belirli bir aktarım eğrisini, uyarlanabilir beyaz noktayı ve görüntüleme koşullarını ilişkilendiren açık bir kolorimetrik tanımı, sRGB vardır . Bunlar, renk yönetimi olmadan bile işlemenin belirtilen değerlere oldukça yakın olmasına izin vermek için gerçek dünyadaki birçok monitöre ve görüntüleme koşuluna benzer olacak şekilde seçilmiştir . Kullanıcı aracıları , belirtilen renkleri temsil ettikleri aslına uygunluk açısından farklılık gösterir. Daha gelişmiş kullanıcı aracıları, daha iyi renk doğruluğu sağlamak için renk yönetimini kullanır; bu özellikle Web'den yazdırma uygulamaları için önemlidir .

altıgen üçlü

Bir altıgen üçlüsü , altı haneli bir, üç olan bayt onaltılı kullanılan numara HTML , CSS , SVG'ye renkleri göstermek için, diğer işlem uygulamaları. Bayt, rengin kırmızı, yeşil ve mavi bileşenlerini temsil eder. Bir bayt, 00 ila FF (onaltılık gösterimde) veya 0 ila 255 ondalık gösterim aralığındaki bir sayıyı temsil eder. Bu, renk bileşenlerinin her birinin en az (0) ila en fazla (255) yoğunluğunu temsil eder. Böylece web renkleri, 24 bit RGB renk şemasındaki renkleri belirtir . Onaltılı üçlü, üç baytın onaltılık gösterimde aşağıdaki sırayla birleştirilmesiyle oluşturulur:

• Bayt 1: kırmızı değer (renk tipi kırmızı)
• Bayt 2: yeşil değer (renk türü yeşil)
• Bayt 3: mavi değer (renk türü mavi)

Örneğin, kırmızı/yeşil/mavi değerlerinin ondalık sayılar olduğu rengi düşünün: kırmızı=36, yeşil=104, mavi=160 (grimsi-mavi renk). 36, 104 ve 160 ondalık sayılar sırasıyla 24, 68 ve A0 onaltılık sayılara eşdeğerdir. Onaltılık üçlü, bu örnekte 2468A0 olan altı onaltılık basamağın bir araya getirilmesiyle elde edilir.

Üç renk değerinden herhangi biri 10 onaltılıdan (16 ondalık) küçükse, üçlünün her zaman tam olarak altı basamağa sahip olması için baştaki sıfırla temsil edilmelidir. Örneğin, 4, 8, 16 ondalık üçlüsü, 04, 08, 10 altıgen rakamlarıyla temsil edilecek ve 040810 altıgen üçlüsünü oluşturacaktır.

Bu sistem tarafından temsil edilebilecek renk sayısı 16 ⁶ veya 256 ³ veya 2 ²⁴ = 16.777.216'dır.

Steno onaltılık biçim

Kısaltılmış, üç (onaltılık) basamaklı bir form kullanılır. Bu formu altı basamaklı forma genişletmek, her basamağı ikiye katlamak kadar basittir: Aşağıdaki CSS örneğinde sunulduğu gibi 09C 0099CC olur :

.threedigit { color: #09C;    }
.sixdigit   { color: #0099CC; } /* same color as above */

Bu stenografi formu, paleti 4.096 renge indirger; bu, tüm altı basamaklı formun (16.777.216 renk) kullanıldığı 24 bit rengin aksine 12 bit renge eşdeğerdir. Bu sınırlama, birçok metin tabanlı belge için yeterlidir.

RGB'yi onaltılıya dönüştürme

RGB değerleri genellikle 0–255 aralığında verilir; 0–1 aralığındaysa, dönüştürmeden önce değerler 255 ile çarpılır. On altıya bölünen bu sayı (tamsayı bölümü; kalanlar yoksayılır) ilk onaltılık basamağı verir (0 ile F arasında, burada A'dan F'ye kadar olan harfler 10 ila 15 arasındaki sayıları temsil eder. Daha fazla ayrıntı için onaltılık sayıya bakın ). Kalan, ikinci onaltılık basamağı verir. Örneğin, RGB değeri 201, 16'lık 12 gruba bölünür, bu nedenle ilk basamak C'dir. Dokuzdan kalan, onaltılı C9 sayısını verir. Bu işlem, üç renk değerinin her biri için tekrarlanır.

Sayı tabanları arasında dönüştürme, hem elde taşınan modeller hem de çoğu modern işletim sistemiyle birlikte verilen yazılım hesaplayıcıları dahil olmak üzere hesap makinelerinin ortak bir özelliğidir . Özellikle renk değerlerini dönüştürmek için web tabanlı araçlar da mevcuttur.

HTML renk adları

Renk adlarının son W3C özellikleri, temel ve genişletilmiş renkler arasında ayrım yapar . HTML ve XHTML'de renkler metin, arka plan rengi, çerçeve kenarlıkları, tablolar ve ayrı tablo hücreleri için kullanılabilir.

Temel renkler

Temel renkler, HTML 4.01 spesifikasyonunda tanımlanan ve 1999'da onaylanan aşağıdaki gibi 16 renktir (adlar bu bağlamda büyük/küçük harfe duyarlı olmayacak şekilde tanımlanmıştır):

Bu 16 renk sRGB olarak etiketlendi ve "Windows VGA paletiyle desteklenen standart 16 renk" olduklarını belirten HTML 3.0 belirtimine dahil edildi .

Genişletilmiş renkler

X11 renk adlarının SVG Sürümü

UHD (4K) çözünürlükte sRGB hex/dec ve HSL kodlarıyla SVG1.1 adlı renkler

Genişletilmiş renkler, HTML 4.01, CSS 2.0, SVG 1.0 ve CSS3 Kullanıcı Arayüzlerinden (CSS3 UI) gelen özelliklerin birleştirilmesinin sonucudur.

Web tarayıcıları tarafından çeşitli renkler tanımlanır . Belirli bir tarayıcı bu renklerin hepsini tanımayabilir, ancak 2005'ten itibaren tüm modern, genel kullanımlı grafik tarayıcılar renklerin tam listesini destekler. Bu renklerin çoğu , X Pencere Sistemi ile dağıtılan X11 renk adları listesindendir . Bu renkler SVG 1.0 tarafından standartlaştırılmıştır ve SVG Full kullanıcı aracıları tarafından kabul edilmektedir . SVG Tiny'nin parçası değiller .

X11 ürünüyle birlikte gönderilen renklerin listesi, uygulamalar arasında değişiklik gösterir ve yeşil gibi belirli HTML adlarıyla çakışır. X11 renkleri, sRGB yerine basit RGB olarak tanımlanır (dolayısıyla belirli bir renk alanı yoktur) . Bu, X11'de (örneğin, /usr/lib/X11/rgb.txt'de) bulunan renk listesinin doğrudan web için renk seçmek için kullanılmaması gerektiği anlamına gelir.

CSS3 spesifikasyonundan web "X11 renklerinin" listesi, onaltılık ve ondalık eşdeğerleriyle birlikte aşağıda gösterilmiştir. W3C standartlarındaki alfabetik listeleri karşılaştırın. Buna ortak eşanlamlılar dahildir: aqua (HTML4/CSS 1.0 standart adı) ve camgöbeği (ortak sRGB adı), macenta (ortak sRGB adı) ve fuşya (HTML4/CSS 1.0 standart adı), gri (HTML4/CSS 1.0 standart adı) ve gri.

CSS renkleri

Basamaklı Stil Tablolar özellikleri HTML 4 spec, yani 16 olarak adlandırılan renklerin aynı sayıda tanımlayan HTML rengini , ve Netscape 124 renk X11 renk Internet Explorer (IE) 3.0 ve kabul edildi 140 isimleri toplam listesi Netscape Navigator 3.0. Blooberry.com, Opera 2.1 ve Safari 1'in Netscape'in genişletilmiş 140 renk adından oluşan listesini de içerdiğini, ancak daha sonra Windows 98'de Opera 3.5'te bulunmayan 14 isim keşfettiğini belirtiyor.

CSS 2.1'de 16 HTML4 renginin olduğu bölüme 17. renk olarak 'turuncu' rengi (140'tan biri) eklendi. CSS3.0 spesifikasyonu , "Temel renk anahtar sözcükleri" olarak yeniden adlandırılan "HTML4 renkli anahtar sözcükler" bölümünde turuncuyu içermiyordu . Aynı referansta, "SVG renk anahtar sözcükleri" bölümü, daha önceki bir çalışma taslağında "X11 renkli anahtar sözcükler" olarak başladıktan sonra "Genişletilmiş renkli anahtar sözcükler" olarak yeniden adlandırıldı. 4. seviye renk modülünün çalışma taslağı, Temel ve Genişletilmiş bölümleri basit bir "Adlandırılmış Renkler" bölümünde birleştirir.

CSS 2, SVG ve CSS 2.1, web yazarlarının , değerleri işletim sisteminden alınan renk adları olan sistem renklerini , işletim sisteminin vurgulanan metin rengini veya araç ipucu kontrolleri için arka plan rengini seçmelerine olanak tanır . Bu, web yazarlarının içeriklerini kullanıcı aracısının işletim sistemine göre biçimlendirmelerini sağlar. CSS3 renk modülü vardır kaldırılmış kendisi sonradan CSS3 çıkarıldı CSS3 UI Sistemi Görünüm özelliği, lehine sistem renklerinin kullanılmasını.

CSS3 spesifikasyonu , stil sayfalarına HSL renk alanı değerlerini de sunar:

 /* RGB model */
 p { color: #F00 } /* #rgb */
 p { color: #FF0000 } /* #rrggbb */
 p { color: rgb(255, 0, 0) } /* integer range 0 - 255 */
 p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

 /* RGB with alpha channel, added to CSS3 */
 p { color: rgba(255, 0, 0, 0.5) } /* 0.5 opacity, semi-transparent */

 /* HSL model, added to CSS3 */
 p { color: hsl(0, 100%, 50%) } /* red */
 p { color: hsl(120, 100%, 50%) } /* green */
 p { color: hsl(120, 100%, 25%) } /* dark green */
 p { color: hsl(120, 100%, 75%) } /* light green */
 p { color: hsl(120, 50%, 50%) } /* pastel green */

 /* HSL model with alpha channel */
 p { color: hsla(120, 100%, 50%, 1) } /* green */
 p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */
 p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */

CSS Renk 4

21 Haziran 2014'te CSS Çalışma Grubu , Eric Meyer'in altıncı doğum günü olan 7 Haziran 2014'te ölen kızı Rebecca'yı anmak için Editörün Renk Taslağı modülünün 4. Seviyesine RebeccaPurple rengini ekledi .

CSS ayrıca transparentsıfır alfa değerini temsil eden özel rengi de destekler ; varsayılan transparentolarak, görünmez bir nominal siyah olarak işlenir: rgba(0, 0, 0, 0).

CSS Renk 5

Web uyumlu renkler

1990'ların ortalarında, birçok ekran yalnızca 256 renk gösterebiliyordu. Bunlar donanım tarafından belirlenebilir veya bir "renk tablosu" ile değiştirilebilir. Mevcut olmayan bir renk bulunduğunda (örneğin bir görüntüde), farklı bir renk kullanılması gerekiyordu. Bu, ya en yakın renk kullanılarak ya da renk taklidi kullanılarak yapılabilir .

"Standart" bir renk paleti yapmak için çeşitli girişimlerde bulunuldu. 256 renkli ekranlarda taklid olmadan gösterilebilecek bir dizi renk gerekliydi; 216 sayısı kısmen bilgisayar işletim sistemlerinin on altı ila yirmi rengi kendi kullanımları için ayırması nedeniyle seçilmiştir; aynı zamanda, her biri 00 ile FF arasında (her iki sınır dahil) kırmızı, yeşil ve mavinin tam olarak altı eşit aralıklı tonuna (6 × 6 × 6 = 216) izin verdiği için seçilmiştir.

Renk listesi, renk taklidi yapmaya karşı bağışıklık kazandıran özel özelliklere sahipmiş gibi sunulur, ancak 256 renkli ekranlarda uygulamalar gerçekte seçtikleri herhangi bir renk seçiminden oluşan bir paleti ayarlayabilir, gerisini taklidi yapabilir. Bu renkler, çeşitli tarayıcı uygulamaları tarafından seçilen paletlerle eşleştikleri için özellikle seçilmiştir. Farklı tarayıcılarda kullanılan çok farklı paletler yoktu.

"Web için güvenli" renklerin bir kusuru vardı , paletin uygulamalar arasında paylaşıldığı X11 gibi sistemlerde , tarayıcılar tarafından daha küçük renk küpleri (5×5×5 veya 4×4×4) tahsis edildi - "web- güvenli" renkler bu tür sistemlerde taklidi yapar. Daha geniş bir renk yelpazesine sahip bir görüntü sağlanarak ve çift ​​nicelemenin kalite kaybına uğramak yerine tarayıcının gerekirse renk uzayını nicelleştirmesine izin vererek farklı sonuçlar elde edildi .

2000'li yıllar boyunca, kişisel bilgisayarlarda 256 renkli ekranların kullanımı 24 bit ( TrueColor ) ekranların lehine keskin bir şekilde düştü ve "web uyumlu" renklerin kullanımı pratik olarak kullanılmaz hale geldi.

"Web uyumlu" renklerin hepsinin standart adları yoktur, ancak her biri bir RGB üçlüsü ile belirtilebilir : her bileşen (kırmızı, yeşil ve mavi) aşağıdaki tablodan altı değerden birini alır (256 olası renkten tam 24 bit renkte her bileşen için mevcut değerler).

Aşağıdaki tablo tüm "web uyumlu" renkleri gösterir. Web uyumlu paletin bir dezavantajı, web sayfası arka planları için küçük açık renk yelpazesidir, oysa aralığın alt ucundaki en koyu iki renk gibi yoğunluklar birbirine benzer ve bu da onları ayırt etmeyi zorlaştırır. "*" (yıldız) ile çevrelenen değerler "gerçekten güvenli palet"in bir parçasıdır; aşağıdaki En güvenli web renkleri bölümüne bakın.

Renk tablosu

Listelenen her renk kodu, RGB değeri için bir kısaltmadır. Örneğin, kod 609, RGB kodu 102-0-153 veya HEX kodu #660099 ile eşdeğerdir .

En güvenli web renkleri

Tasarımcılar, 216 renk paleti geliştirildiğinde çok sayıda 8 bitlik renkli ekranlar olduğundan, web sitelerinde bu 216 "web uyumlu" renge bağlı kalmaya teşvik edildi. David Lehn ve Hadley Stern, web uyumlu paletindeki 216 rengin yalnızca 22'sinin, 16 bit bilgisayar ekranlarında tutarsız yeniden eşleme olmaksızın güvenilir bir şekilde görüntülendiğini keşfettiler . Bu 22 rengi "gerçekten güvenli palet" olarak adlandırdılar; büyük ölçüde yeşil, sarı ve mavi tonlarından oluşur.

Ulaşılabilirlik

Renk seçimi

Bazı tarayıcılar ve cihazlar renkleri desteklemez. Bu ekranlar veya kör ve renk körü kullanıcılar için, renklere bağlı olarak Web içeriği kullanılamaz veya kullanımı zor olabilir.

Ya hiçbir renk belirtilmemeli (tarayıcının varsayılan renklerini çağırmak için) ya da kaçınmak için hem arka plan hem de tüm ön plan renkleri (düz metin, ziyaret edilmemiş bağlantılar, üzerine gelinen bağlantılar, etkin bağlantılar ve ziyaret edilen bağlantılar gibi) belirtilmelidir. siyah üzerine siyah veya beyaz efektler üzerine beyaz .

Renk kontrastı

Erişilebilirlik Yönergeleri Web İçerik , en az 4.5'lik bir kontrast oranına öneriyoruz: 1 arasındaki nispi parlaklığın en az 3 metnin ve arka plan rengi veya 1: büyük metin için. Gelişmiş erişilebilirlik, 7:1'den büyük kontrast oranları gerektirir.

Ancak, erişilebilirlik sorunlarının ele alınması, yalnızca kontrast oranını artırmaktan ibaret değildir. Web Erişilebilirlik Girişimi'ne yapılan bir raporun belirttiği gibi, disleksik okuyuculara maksimumun altındaki kontrast oranları daha iyi hizmet veriyor . Kirli beyaz (0xFFFFE5) üzerine kirli siyah (0x0A0A0A) ve krem ​​üzerine siyah (0x000000) (0xFAFAC8) için atıfta bulundukları öneriler sırasıyla 11.7:1 ve 20.3:1 kontrast oranlarına sahiptir. Diğer renk çiftleri arasında koyu yeşil (0xA0A000) üzerine kahverengi (0x282800), WCAG önerisinden daha düşük olan 3,24:1 kontrast oranına sahiptir , açık yeşil (0xB9B900) üzerine koyu kahverengi (0x1E1E00) 4,54 kontrast oranına sahiptir. Sarı (0xFFFF00) üzerinde :1 ve mavi (0x00007D) 11.4:1 kontrast oranına sahiptir. Raporda adı geçen renklerin, aynı adı taşıyan web renklerinden farklı renk değerleri kullandığına dikkat edin.

Ayrıca bakınız

Referanslar

Dış bağlantılar

• CSS renk değeri üzerinde MDN Web Dokümanlar
• CSS2.1 Renk Belirtimi
• Web Güvenli Renklerin Listelenmesi
• Web renkleri de Curlie