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.
Çeşitli formatlarda kendi renk değerlerinizi 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 altı basamaklı bir renk temsilidir. İlk iki hane (RR) kırmızı değer, sonraki ikisi yeşil değer (GG) ve son ikisi mavi değerdir (BB).
CSS Renkleri - Kısa Hex Kodları
Kısa altıgen renk kodu altı basamaklı gösterimin daha kısa 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. 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 |
>> Renk yönetimi
Onaltılık RGB renk değerleri
Rengi tanımlama ve işleme yöntemleri, amaçlanan nihai sunum açısından birbirinden farklıdır. Örneğin, baskı ve bilgisayar monitörleri için renk temsillerini karşılaştıralım. İlk durumda, temel alınır Beyaz daha sonra üzerine üç ana rengin uygulandığı kağıdın rengi: Mavi, Mor ve sarı... Birbirleriyle ve kağıdın beyaz rengiyle farklı oranlarda karışan bu üç ana renk, saf siyah dışında farklı renk tonları verir veya renklerin tamamen yokluğunda kağıdın beyaz rengini verir. Onlara siyah eklersek, CMYK- eksik renklerin beyazdan çıkarılmasıyla gerekli renk elde edildiğinde bir renk oluşturma yöntemi.
İkinci durumda, temel alınır siyah her hücresi üç renkten birinde parlayan monitör ekranının rengi: kırmızı-Kırmızı, Yeşil-yeşil ve Mavi-Mavi. Ardından, herhangi bir ışımanın tamamen yokluğunda, saf siyah ekran rengi elde ederiz ve gerekli renklerden herhangi biri, üç rengin her birinin oranıyla belirlenir. Bu durumda, alırız RGB- bir renk transferi yöntemi. Ana renkler arasında değişebilir 0
önce 255
, veya 0%
önce 100%
veya onaltılık bir değer olarak gösterilebilir. Aşağıdaki resimde ana renklerin karıştırılmasının sonuçlarını görebilirsiniz.
Onaltılık sayı sistemi, ondalık sayının aksine, basamak satırında on basamak değil on altıdır - bu nedenle adı. Buna göre, iki basamaklı kombinasyonların tekrarlanmayan varyantları yalnızca - 256 , sonra bir sayı dizisine devam etmek için 9 gelen mektuplar Aönce F dolayısıyla dizi şöyle görünecek -
| 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F. |
Bu durumda, renk, her biri iki basamaktan oluşan üç onaltılık sayı ile belirtilir. İlk sayı yoğunluğu belirler kırmızı renkler, ortalama Yeşil, son şey- Mavi renkler. Tüm sayılar aralığındaki değerleri alabilir 00 önce FF(0'dan 255'e kadar). Örneğin: yeşil olarak verilir # 00FF00, kırmızı gibi # FF0000, mavi gibi # 0000FF, beyaz gibi #FFFFFF, renk veya siyahın tamamen yokluğu şu şekilde verilir: #000000 .
Aşağıdaki formda, üç rengin her biri için herhangi bir onaltılık değer ayarlayabilir ve çıktı alanına tıklayarak bunların karıştırılma sonucunu görebilirsiniz.
Onaltılık RGB renk değerlerinin bazılarına örnek olarak kırmızı, mavi ve yeşil tonlamalar verilebilir.
| görüş | kod | görüş | kod | görüş | kod | görüş | kod | görüş | kod | görüş | kod |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | # A000000 | #002000 | # 00A000 | #000020 | # 0000A0 | ||||||
| #300000 | # B000000 | #003000 | # 00B000 | #000030 | # 0000B0 | ||||||
| #400000 | # C000000 | #004000 | # 00C000 | #000040 | # 0000C0 | ||||||
| #500000 | # D000000 | #005000 | # 00D000 | #000050 | # 0000D0 | ||||||
| #600000 | # E000000 | #006000 | # 00E000 | #000060 | # 0000E0 | ||||||
| #700000 | # FF0000 | #007000 | # 00FF00 | #000070 | # 0000FF |
Dize değişmezlerini kullanarak renk belirtme
Kullanım kolaylığı için bazı renklere ve bunların kombinasyonlarına tüm tarayıcılar tarafından tanınan isimler atanmış ve birçoğunun isimle ayarlanması mümkün olmuştur. Aşağıdaki tablo bazı renk adlarını listeler:
| görüş | isim | görüş | isim | görüş | isim | görüş | isim |
| Beyaz | kırmızı | turuncu | Sarı | ||||
| Yeşil | Mavi | Mor | Siyah | ||||
| Alice Mavi | Antik Beyaz | su | Akuamarin | ||||
| Azure | Bej | bisküvi | Blanchedalmond | ||||
| Mavi menekşe | Kahverengi | burlywood | öğrenci mavisi | ||||
| Chartreuse | Çikolata | Mercan | Peygamber Çiçeğimavi | ||||
| Mısır püskülü | kızıl | camgöbeği | Koyu mavi | ||||
| koyu mavi | Karanlıkaltın Başak | Koyu gri | Koyu yeşil | ||||
| koyu haki | koyu eflatun | koyu zeytin yeşili | Koyu turuncu | ||||
| karaorkide | Koyu Kırmızı | somon | koyu deniz yeşili | ||||
| Darkslateblue | Darkslategray | koyuturkuaz | Koyu mor | ||||
| Derin pembe | deringökyüzü | Dimgray | dodgerblue | ||||
| ateş tuğlası | çiçekbeyaz | Orman yeşili | Fuşya | ||||
| kazançlarboro | hayalet beyazı | Altın | Altın Başak | ||||
| Gri | Yeşil sarı | Şeker kavunu | Sıcak pembe | ||||
| Kızılderili | çivit | Fildişi | Haki | ||||
| Lavanta | lavanta allık | limon şifon | Açık mavi | ||||
| açık mercan | Açık cam göbeği | açıksoğuk sarı | Açık yeşil | ||||
| Açık gri | Açık pembe | somon balığı | açık deniz yeşili | ||||
| açık gök mavisi | ışıkslategri | açık çelikmavi | Açık sarı | ||||
| Kireç | Limon yeşili | Keten | macenta | ||||
| bordo | orta akuamarin | Orta mavi | orta orkide | ||||
| ortamor | Orta deniz yeşili | Mediumslateblue | Ortabaharyeşili | ||||
| orta turkuaz | orta mor | Gece yarısı mavisi | nane kreması | ||||
| puslu gül | Navajobeyaz | Donanma | ihtiyar | ||||
| zeytin | Zeytinyağı | portakal rengi | Orkide | ||||
| palegoldenrod | Soluk yeşil | paleturkuaz | paleviolet kırmızısı | ||||
| Papaya kırbaç | şeftali | Peru | Pembe | ||||
| Erik | Toz mavi | pembe kahverengi | Kraliyet mavisi | ||||
| eyer kahverengi | Deniz yeşili | deniz kabuğu | Sienna | ||||
| Gümüş | Gökyüzü mavi | arduvaz mavisi | arduvaz grisi | ||||
| Kar | İlkbahar yesili | çelik mavisi | bronzluk | ||||
| deniz mavisi | devedikeni | Domates | Turkuaz | ||||
| Menekşe | Buğday | Beyaz duman | Sarı yeşil |
Güvenli bir renk seçici kullanma
Ne yazık ki, farklı sistem ayarlarına sahip farklı platformlarda, doğru renksel geriverim bir sorundur. Mesele şu ki, tarayıcı her zaman belgenin renk paletini sistem ayarlarına ayarlamaya çalışır ve renkleri bağımsız olarak karıştırarak ve değiştirerek yetenekleri izler. Sonuç olarak, bazen kullanıcı, web yöneticisinin kendisine göstermek istediği şeyi tam olarak görmez. Bu durumdan bir çıkış yolu, her rengin farklı platformlardaki tüm tarayıcılar tarafından aynı olması garanti edilen bir paletin kullanılmasında bulundu. Bu sözde garantili palet, aynı zamanda denir güvenli palet. Bu palet, renk bileşenleri aşağıdaki değerleri alan renkleri içerir: 00 ,33 ,66 ,99 , CC,FF, mümkün olan her şekilde 216 onların kombinasyonları.
| görüş | kod | görüş | kod | görüş | kod | görüş | kod | görüş | kod | görüş | kod |
| ffffff | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
HEX / HTML
HEX rengi, RGB onaltılık gösterimden başka bir şey değildir.
Renkler, her grubun kendi renginden sorumlu olduğu onaltılık basamaklardan oluşan üç grup olarak temsil edilir: # 112233, burada 11 kırmızı, 22 yeşil, 33 mavidir. Tüm değerler 00 ile FF arasında olmalıdır.
Birçok uygulamada, onaltılık renkler için kısaltılmış bir gösterim biçimine izin verilir. Üç grubun her biri aynı karakterleri içeriyorsa, örneğin # 112233, o zaman # 123 olarak yazılabilir.
- h1 (renk: # ff0000;) / * kırmızı * /
- h2 (renk: # 00ff00;) / * yeşil * /
- h3 (renk: # 0000ff;) / * mavi * /
- h4 (renk: # 00f;) / * aynı mavi, steno * /
RGB
RGB (Kırmızı, Yeşil, Mavi) renk uzayı, kırmızı, yeşil ve mavi karıştırılarak elde edilebilecek tüm olası renklerden oluşur. Bu model fotoğrafçılık, televizyon ve bilgisayar grafiklerinde popülerdir.
RGB değerleri 0 ile 255 arasında bir tamsayı olarak belirtilir. Örneğin rgb (0,0,255) mavi parametresi en yüksek değerine (255) ve geri kalanı 0'a ayarlandığı için mavi olarak görüntülenir.
Bazı uygulamalar (özellikle web tarayıcıları) RGB değerlerinin yüzde olarak yazılmasını destekler (%0 ila %100).
- h1 (renk: rgb (255, 0, 0);) / * kırmızı * /
- h2 (renk: rgb (0, 255, 0);) / * yeşil * /
- h3 (renk: rgb (0, 0, 255);) / * mavi * /
- h4 (renk: rgb (%0, %0, %100);) / * aynı mavi, yüzde yazma * /
RGB renk değerleri tüm büyük tarayıcılarda desteklenir.
RGBA
Son zamanlarda, modern tarayıcılar, bir nesnenin opaklığını belirleyen bir alfa kanalını destekleyen bir RGB uzantısı olan RGBA renk modeliyle çalışmayı öğrendi.
RGBA renk değeri şu şekilde belirtilir: rgba (kırmızı, yeşil, mavi, alfa). Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında değişen bir sayıdır.
- h1 (renk: rgb (0, 0, 255);) / * normal RGB'de mavi * /
- h2 (renk: rgba (0, 0, 255, 1);) / * RGBA'da aynı mavi, çünkü opaklık: %100 * /
- h3 (renk: rgba (0, 0, 255, 0.5);) / * opaklık: %50 * /
- h4 (renk: rgba (0, 0, 255, .155);) / * opaklık: %15,5 * /
- h5 (renk: rgba (0, 0, 255, 0);) / * tamamen şeffaf * /
RGBA, IE9 +, Firefox 3+, Chrome, Safari ve Opera 10+'da desteklenir.
HSL
HSL renk modeli, RGB modelinin silindirik bir temsilidir. HSL, renkleri tipik RGB'den daha sezgisel ve anlaşılır bir şekilde temsil eder. Model genellikle grafik uygulamalarında, renk seçicilerde ve görüntü analizinde kullanılır.
HSL, parlaklık ile karıştırılmaması için Ton, Doygunluk, Açıklık / Parlaklık anlamına gelir.
Ton, rengin renk tekerleğindeki konumunu ayarlar (0'dan 360'a kadar). Doygunluk, doygunluğun bir yüzdesidir (%0 ila %100). Hafiflik, hafiflik yüzdesidir (%0 ila %100).
- h1 (renk: hsl (120, %100, %50);) / * yeşil * /
- h2 (renk: hsl (%120, %100, %75);) / * açık yeşil * /
- h3 (renk: hsl (%120, %100, %25);) / * koyu yeşil * /
- h4 (renk: hsl (%120, %60, %70);) / * pastel yeşil * /
HSL, IE9 +, Firefox, Chrome, Safari ve Opera 10+'da desteklenir.
HSLA
RGB / RGBA'ya benzer şekilde HSL, bir nesnenin opaklığını belirtmek için alfa kanalına sahip bir HSLA moduna sahiptir.
HSLA renk değeri şu şekilde verilir: hsla (ton, doygunluk, açıklık, alfa). Alfa parametresi, 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında değişen bir sayıdır.
- h1 (renk: hsl (120, %100, %50);) / * normal HSL'de yeşil * /
- h2 (renk: hsla (120, %100, %50, 1);) / * HSLA'da aynı yeşil, çünkü opaklık: %100 * /
- h3 (renk: hsla (120, %100, %50, 0,5);) / * opaklık: %50 * /
- h4 (renk: hsla (120, %100, %50, .155);) / * opaklık: %15.5 * /
- h5 (renk: hsla (120, %100, %50, 0);) / * tamamen şeffaf * /
CMYK
CMYK renk modeli genellikle renkli baskı ve baskı ile ilişkilendirilir. CMYK (RGB'nin aksine) çıkarmalı bir modeldir, yani daha yüksek değerler daha koyu renklerle ilişkilendirilir.
Renkler Camgöbeği, Macenta, Sarı artı siyah (Key / siyah) oranıyla tanımlanır.
CMYK'da bir rengi tanımlayan sayıların her biri, bir renk kombinasyonunu oluşturan belirli bir rengin mürekkebinin yüzdesini veya daha doğrusu, belirli bir renkteki bir filmde (veya doğrudan CTP durumunda bir baskı plakası).
Örneğin, PANTONE 7526 rengini elde etmek için 9 kısım camgöbeği, 83 kısım macenta, 100 sarı ve 46 siyah karıştırın. Bu şu şekilde gösterilebilir: (9,83,100,46). Bazen şu tanımlamaları kullanırlar: C9M83Y100K46 veya (%9, %83, %100, %46) veya (0.09 / 0.83 / 1.0 / 0.46).
HSB / HSV
HSB (HSV olarak da bilinir), HSL'ye benzer, ancak iki farklı renk modelidir. Her ikisi de silindirik geometriye dayanmaktadır, ancak HSB / HSV "hexcone" modelini temel alırken, HSL "bi-hexcone" modelini temel almaktadır. Sanatçılar genellikle bu modeli kullanmayı tercih ederler, genel olarak HSB/HSV cihazının renklerin doğal algısına daha yakın olduğu kabul edilir. Özellikle HSB renk modeli Adobe Photoshop'ta kullanılmaktadır.
HSB / HSV, Ton, Doygunluk, Parlaklık / Değer anlamına gelir.
Ton, rengin renk tekerleğindeki konumunu ayarlar (0'dan 360'a kadar). Doygunluk, doygunluğun bir yüzdesidir (%0 ila %100). Parlaklık, parlaklık yüzdesidir (%0 ila %100).
XYZ
XYZ renk modeli (CIE 1931 XYZ) tamamen matematiksel bir alandır. RGB, CMYK ve diğer modellerin aksine, XYZ'de ana bileşenler "hayali"dir, yani X, Y ve Z'yi karıştırılacak herhangi bir renk kümesiyle ilişkilendiremezsiniz. XYZ, teknik alanlarda kullanılan hemen hemen tüm diğer renk modelleri için ana modeldir.
laboratuvar
LAB renk modeli (CIELAB, "CIE 1976 L * a * b *"), CIE XYZ uzayından hesaplanır. Lab'i geliştirirken amaç, renk değişiminin insan algısı açısından (XYZ'ye kıyasla) daha doğrusal olacağı bir renk uzayı oluşturmaktı, yani renk koordinat değerlerinde aynı değişiklik renk uzayının farklı bölgeleri aynı renk değişimi hissini üretir.
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, bu nedenle # 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 #, 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şil 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 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, kırmızının mümkün olan en kırmızı 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ülmektedir. Bunlar sarı, camgöbeği ve moru (eflatun olarak da adlandırılır) içerir. Genel olarak, yakındaki renkleri karıştırarak 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. Bunun için Adobe Photoshop gibi farklı renk modelleriyle çalışabilen bir grafik düzenleyici uygundur. İncirde. 6.2, bu programda bir renk seçmek 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 palette olmayan bir rengi gösteremediği grafiklerin görüntülenme şeklinden kaynaklanmaktadır. Bu durumda, renk, belirtilen rengi taklit eden, kendisine yakın olan diğer piksellerin 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). Bu bileşenin onaltılık değeri parantez içinde belirtilmiştir. 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üçük.
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.
| 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
Örnek yazı
Bu örnekte, arka plan rengi, etiketin bgcolor niteliği kullanılarak ayarlanır.
ve metin özniteliği aracılığıyla metnin 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.Çizime yakından bakın. Açılır pencerenin arka planı yarı saydam yapılır. Bu oldukça yaygın bir tasarım hilesidir. Bunun nasıl uygulanabileceğini düşünelim.
Görev
Tarayıcılar arası yarı saydam bir renk yapın.
Çözüm
Bu durumda ilk düşünce, önceden ayarlanmış yarı saydamlığa sahip arka plan için bir png24 görüntüsü kullanmaktır. Ancak bu resim tamamen gereksiz. Onsuz (ve dolayısıyla sunucuya gereksiz bir istek olmadan) mükemmel bir şekilde yapabilirsiniz. En uygun çözümü bulmaya çalışalım.
İkinci düşünce kullanmaktır. Ancak bu durumda çok uygun değil. Sonuçta, sadece arka plan değil, aynı zamanda yazıtlar da yarı saydam hale gelecektir. Evet, aslında, tüm pencere aynı anda.
Elbette, ek bir kap eklemeyi ve yalnızca ona opaklık uygulamayı deneyebilirsiniz, ancak bu HTML öğesi yalnızca dekorasyon amaçlı olacak ve açıkçası gereksiz olacaktır. Onsuz yapabilir misin?
Emin olmak! RGBA kullanıyorsanız.
RGBA renk açıklama formatı
CSS3, RGB ve RGBA işlevlerini kullanarak rengi belirlemenize olanak tanır. Bu durumda, bir baytın tahsis edildiği her renk bileşeninin kesirini belirtmeliyiz (0'dan 255'e, aniden, kim bilmiyor).
Bu durum için sözdizimi çok basittir:
Arka plan: rgb (0, 255, 0); / * saf yeşil * /
RGBA için dördüncü bir parametre eklenir - alfa şeffaflığı (0'dan 1'e).
Arka plan: rgba (255, 0, 0, 0,5); / * %50 şeffaflık ile saf kırmızı * /
İşte sorunumuzun çözümü. Arka plan rengini rgba kullanarak ayarlamak yeterlidir ve her şey ihtiyacımız olan gibi görünecektir. Gereksiz resim ve öğe yok!
Bu numaraları nereden alabilirim?
Photoshop'ta damlalık aracını kullanarak renk bileşenlerine bakabilirsiniz.
Tarayıcılar arası uyumluluk hakkında
RGB işlevi RGBA'dan çok daha eski olduğundan ve CSS2 standardının günlerinden beri mevcut olduğundan, en eski tarayıcılara karşı korunmak için aşağıdaki yinelenen yapıyı kullanabilirsiniz:
SomeBlock (arka plan: rgb (255, 0, 0); arka plan: rgba (255, 0, 0, 0.5);)
Bu yaklaşımla, modern tarayıcıların büyük dedeleri yarı saydamlığa sahip olmayacak, ancak rengin kendisi doğru kalacaktır.
IE ile ayrı ayrı ilgilenmemiz gerekecek. Eşekler, sürüm 8 dahil RGBA'yı anlamaz.
Her zaman olduğu gibi: toprak köylülere, fabrikalar işçilere ve eşekler koltuk değneğine! Olarak .
Elbette savaş koşullarında bu kuralı bağladığımız ayrı bir CSS'ye koyuyoruz.
SomeBlock (arka plan: şeffaf; filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 80ff0000, endColorstr = # 80ff0000); yakınlaştırma: 1;)
İşin püf noktası, başlangıç ve bitiş renklerini aynı (ff0000 - kırmızı) belirtmek ve bu filtredeki gradyan için alfa kanalını ayarlayabileceğiniz gerçeğinden yararlanmaktır (örnekte, değer 80).
Referans için: filtre onaltılık bir sistem kullanır ve FF kodu tamamen opak bir renge karşılık gelir (ondalık olarak 255'tir). Buna göre onaltılık 80, ondalık 128'dir, yani %50 şeffaflık.
Kontrol edilmiş:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Krom
Taramalı Atomik Kuvvet Mikroskobu Laboratuvar raporu şunları içermelidir:
Havai iletişim ağı için destek seçimi
AC katener tasarımı ve hesaplanması
Mikroişlemci sistemlerinin geliştirilmesi Mikroişlemci sistemlerinin tasarım aşamaları
mcs51 ailesinin mikrodenetleyicileri