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

Renkleri belirtmek için onaltılık sayılar kullanılır. Hexadecimal sistem, ondalık sistemden farklı olarak adından da anlaşılacağı gibi 16 rakamına dayanmaktadır. Rakamlar ş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ştirilmiştir. 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. Bir rengin yüzde olarak belirtilmesi de kabul edilebilir, %100 255 sayısına karşılık gelir. Önce rgb anahtar kelimesi belirtilir ve ardından renk bileşenleri virgülle ayrılarak parantez içinde belirtilir, ö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

HEX/HTML

HEX biçimindeki bir renk, RGB'nin onaltılık gösteriminden başka bir şey değildir.

Renkler, her grubun kendi renginden sorumlu olduğu üç onaltılık basamak grubu 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.

Çoğu uygulama, onaltılık renkler için kısa gösterimi kabul eder. Üç grubun her biri aynı karakterleri içeriyorsa, örneğin #112233, o zaman #123 olarak yazılabilir.

1. h1 ( renk: #ff0000; ) /* kırmızı */
2. h2 ( color: #00ff00; ) /* yeşil */
3. h3 ( renk: #0000ff; ) /* mavi */
4. h4 ( color: #00f; ) /* aynı mavi, steno */

RGB

RGB (Kırmızı, Yeşil, Mavi) renk uzayı, kırmızı, yeşil ve mavinin karıştırılmasıyla 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 olarak gösterilir çünkü mavi parametresi en yüksek değerine (255) ve geri kalanı 0'a ayarlanmıştır.

Bazı uygulamalar (özellikle web tarayıcıları) RGB yüzdelerini (%0'dan %100'e kadar) destekler.

1. h1 ( renk: rgb(255, 0, 0); ) /* kırmızı */
2. h2 ( color: rgb(0, 255, 0); ) /* yeşil */
3. h3 ( renk: rgb(0, 0, 255); ) /* mavi */
4. h4 ( color: rgb(0%, 0%, 100%)); ) /* aynı mavi, yüzde gösterimi */

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 RGB'nin bir uzantısı olan RGBA renk modeliyle çalışmayı öğrendi.

RGBA renk değeri şu şekilde belirtilir: rgba(red, green, blue, alpha). alpha parametresi 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayıdır.

1. h1 ( color: rgb(0, 0, 255); ) /* normal RGB'de mavi */
2. h2 ( color: rgba(0, 0, 255, 1); ) /* opaklık: %100 olduğu için RGBA'da aynı mavi */
3. h3 ( color: rgba(0, 0, 255, 0.5); ) /* opaklık: %50 */
4. h4 ( color: rgba(0, 0, 255, .155); ) /* opaklık: %15,5 */
5. h5 ( color: rgba(0, 0, 255, 0); ) /* tamamen saydam */

RGBA, IE9+, Firefox 3+, Chrome, Safari ve Opera 10+'da desteklenir.

HSL

HSL renk modeli, RGB modelinin silindirik bir koordinat sistemindeki temsilidir. HSL, renkleri tipik RGB'den daha sezgisel ve anlaşılması kolay bir şekilde temsil eder. Model genellikle grafik uygulamalarında, renk paletlerinde ve görüntü analizinde kullanılır.

HSL, Ton (renk / ton), Doygunluk (doygunluk), Açıklık / Parlaklık (hafiflik / hafiflik / parlaklık, parlaklıkla karıştırılmaması gereken) anlamına gelir.

Hue, rengin renk çarkındaki konumunu ayarlar (0'dan 360'a). Doygunluk, bir doygunluk yüzdesi değeridir (%0'dan %100'e). Hafiflik, hafiflik yüzdesidir (%0'dan %100'e).

1. h1 ( renk: hsl(120, %100, %50); ) /* yeşil */
2. h2 ( renk: hsl(120, %100, %75); ) /* açık yeşil */
3. h3 ( renk: hsl(120, %100, %25); ) /* koyu yeşil */
4. 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 bir alfa kanalı desteğine sahip bir HSLA moduna sahiptir.

HSLA renk değeri şu şekilde belirtilir: hsla(hue, saturation, lightness, alpha). alpha parametresi 0.0 (tamamen şeffaf) ile 1.0 (tamamen opak) arasında bir sayıdır.

1. h1 ( color: hsl(120, 100%, %50); ) /* normal HSL'de yeşil */
2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* HSLA'da aynı yeşil çünkü opaklık: %100 */
3. h3 ( renk: hsla(120, %100, %50, 0,5); ) /* opaklık: %50 */
4. h4 ( renk: hsla(120, %100, %50, .155); ) /* opaklık: %15,5 */
5. h5 ( color: hsla(120, 100%, 50%, 0); ) /* tamamen saydam */

CMYK

CMYK renk modeli genellikle renkli baskıyla, baskıyla ilişkilendirilir. CMYK (RGB'den farklı olarak) çıkarımsal bir modeldir, yani daha yüksek değerler daha koyu renklerle ilişkilendirilir.

Renkler, cam göbeği (Cyan), macenta (Macenta), sarı (Sarı) ve siyah (Key / blackK) oranlarına göre belirlenir.

CMYK'de bir rengi tanımlayan sayıların her biri, belirli bir rengin renk kombinasyonunu oluşturan mürekkebinin yüzdesini veya daha doğrusu, bu rengin filmi (veya doğrudan CTP durumunda baskı plakası).

Örneğin, "PANTONE 7526" rengini elde etmek için 9 parça cyan, 83 parça macenta, 100 sarı ve 46 siyahı karıştırırsınız. 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 dayalıdır, ancak HSB/HSV "hexcone" modeline, HSL ise "bi-hexcone" modeline dayanmaktadır. Sanatçılar sıklıkla bu modeli kullanmayı tercih ederler, genel olarak HSB/HSV cihazının doğal renk algısına daha yakın olduğu kabul edilir. Özellikle Adobe Photoshop'ta HSB renk modeli kullanılmaktadır.

HSB / HSV, Ton (renk / ton), Doygunluk (doygunluk), Parlaklık / Değer (parlaklık / değer) anlamına gelir.

Hue, rengin renk çarkındaki konumunu ayarlar (0'dan 360'a). Doygunluk, bir doygunluk yüzdesi değeridir (%0'dan %100'e). Parlaklık, parlaklığın bir 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 birincil bileşenler "hayali"dir, yani X, Y ve Z'yi herhangi bir renk karışımına eşleyemezsiniz. 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 alanından hesaplanır. Lab'ın amacı, renk değişiminin insan algısı açısından (XYZ'ye kıyasla) daha doğrusal olacağı, yani renk uzayının farklı alanlarında renk koordinat değerlerinde aynı değişikliğin üreteceği bir renk uzayı yaratmaktı. aynı renk değişimi hissi.

>>Renk Yönetimi

Onaltılık RGB renk değerleri

Renkleri tanımlama ve işleme yöntemleri, amaçlanan nihai temsil 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 beyazüç ana rengin daha sonra uygulandığı kağıdın rengi: mavi, mor Ve sarı. Birbirine ve kağıdın beyaz rengine farklı oranlarda karışan bu üç ana renk, saf siyah dışında farklı renk tonları verir veya renklerin tamamen yokluğunda beyaz kağıda verir. Onlara siyah eklersek, CMYK- beyazdan eksik renklerin çıkarılmasıyla istenilen renk elde edildiğinde rengi aktarmanın bir yolu.

İkinci durumda, temel 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 parlamanın tamamen yokluğunda, ekranın saf siyah rengini elde ederiz ve gerekli renklerden herhangi biri, üç rengin her birinin oranına göre verilir. bu durumda alacağız RGB- Renk aktarma yöntemi. Birincil renkler anlamlara sahip olabilir 0 önce 255 veya dan 0% önce 100% veya onaltılık bir değer olarak gösterilebilir. Aşağıdaki şekilde ana renkleri karıştırmanın sonuçlarını görebilirsiniz.

Onaltılık sayı sistemi, ondalık sayı sisteminden farklı olarak, basamak dizisinde on basamak değil, on altı basamak vardır - bu nedenle adı. Buna göre, iki basamaklı kombinasyonların tekrarlanmayan varyantları yalnızca - olabilir - 256 , sonra basamak dizisine devam etmek için 9 gelen mektuplar Aönce F, böylece satır şöyle görünecek -

Bu durumda renk, her biri iki rakamdan oluşan üç onaltılık sayı ile verilir. İlk sayı yoğunluğu belirler kırmızı renkler, ortalama yeşil, son şey- mavi renkler. Tüm sayılar arasında değişen değerler alabilir 00 önce FF(0'dan 255'e kadar). Örneğin: yeşil renk şu şekilde verilir: #00FF00, kırmızı gibi #FF0000, mavi gibi #0000FF, beyaz gibi #FFFFFF, rengin veya siyahın tamamen yokluğu olarak 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 karışımlarının sonucunu görebilirsiniz.

Bazı onaltılık RGB renk değerlerine örnekler: kırmızı, mavi ve yeşil tonlamalar.

Dize Sabit Değerleriyle Renk Belirtme

Kullanım kolaylığı için bazı renklere ve bunların kombinasyonlarına tüm tarayıcılar tarafından tanınan adlar verildi ve birçoğunu ada göre ayarlamak mümkün hale geldi. Aşağıdaki tabloda bazı renk adları gösterilmektedir:

Güvenli Renk Seçici Kullanma

Ne yazık ki, farklı sistem ayarlarına sahip farklı platformlarda doğru renk üretimi bir sorundur. Mesele şu ki, tarayıcı her zaman belgenin renk paletini, renkleri kendi başına karıştırarak ve değiştirerek sistem ayarlarına ve monitör özelliklerine göre ayarlamaya çalışır. Sonuç olarak, bazen kullanıcı web yöneticisinin ona göstermek istediğini tam olarak göremez. Bu durumdan çıkış yolu, farklı platformlardaki tüm tarayıcılar tarafından her rengin aynı şekilde işlenmesi garanti edilen bir palet kullanımında bulundu. Bu sözde garantili palet olarak da bilinir 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ı.

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 paletiyle çalışırken tüm bilgisayarların renkleri doğru göstermesini sağladıklarından kullanımları güvenlidir.