Html yorqin yashil rang. Uslublardagi rang turli yo'llar bilan belgilanishi mumkin: o'n oltilik qiymat bo'yicha, nomi bo'yicha, RGB, RGBA, HSL, HSLA formatida
Veb-dizaynda rangni ifodalashning bir necha usullari mavjud.
HEX - 16-bazaga asoslangan o'n oltilik rangni ko'rsatish tizimi. Ushbu tizim uchun raqamli raqamni 16 ga to'ldirish uchun 0 dan 9 gacha arab o'nli raqamlari va A dan F gacha lotin harflari ishlatiladi. Veb-dizayn uchun 16 ta asosiy (asosiy) rang O'n oltilik rang kodi #RRGGBB deb ataladi, bunda har bir juft rangdagi ulushi uchun javobgardir: RR - qizil, GG - yashil va BB - ko'k. Har bir rang fraktsiyasi 00 dan FF gacha.
Veb-dizayndagi ranglarning yana ikkita ko'rinishi: RGB (*,*,*) ko'rinishida, bu erda rangning har bir "*" qismi 0 dan 255 gacha bo'lgan o'nlik raqamlar bilan va rang nomlari bilan ifodalanadi. Ingliz tili.
Rangli tasvirni yaratishda asosiy muammo ranglarni to'g'ri ko'paytirishdir har xil turlari kompyuterlar, monitorlar va brauzerlar. Agar brauzer rangni to'g'ri ko'rsatolmasa, u shunga o'xshashni tanlaydi yoki bir nechta ranglarni aralashtiradi. Va ba'zida uni butunlay boshqa rang bilan almashtirish mumkin.
Jadval 16 asosiy rang, ular barcha brauzerlarda qo'llaniladi
| Ism | Rang | Hex | (RGB) |
| Aqua (dengiz to'lqini) | #00FFFF | (000,255,255) | |
| Qora | #000000 | (000,000,000) | |
| Moviy | #0000FF | (000,000,255) | |
| Fuşya (magenta) | #FF00FF | (255,000,255) | |
| Kulrang | #808080 | (128,128,128) | |
| Yashil | #008000 | (000,128,000) | |
| Ohak (yorqin yashil) | #00FF00 | (000,255,000) | |
| Maroon (quyuq bordo) | #800000 | (128,000,000) | |
| To'q rangli (to'q ko'k) | #000080 | (000,000,128) | |
| Zaytun | #808000 | (128,128,000) | |
| Siyohrang | #800080 | (128,000,128) | |
| Qizil (qizil) | #FF0000 | (255,000,000) | |
| Kumush | #C0C0C0 | (192,192,192) | |
| Teal (kulrang-yashil) | #008080 | (000,128,128) | |
| Oq | #FFFFFF | (255,255,255) | |
| Sariq | #FFFF00 | (255,255,000) |
Jadval siyohrang ranglar va uning soyalari
| Ism | Rang | Hex | (RGB) |
| Magenta (magenta) | #FFCBDB | (255,203,219) | |
| Magenta (magenta) | #FF0099 | (255,000,153) | |
| Magenta (magenta) | #F95A61 | (249,090,097) | |
| Fuşya (fuchsia) | #FF00FF | (255,000,255) | |
| Mauvein (anilin binafsha) | #EF0097 | (239,000,151) | |
| Qizil ikra pushti (to'q sariq pushti) | #FF91A4 | (255,145,164) | |
| Cenise (binafsha rang soyasi) | #DE3163 | (153,149,140) | |
| Baqlajon (baqlajon) | #990066 | (153,000,132) | |
| Lavanda qizarishi (pushti-lavanta) | #FFF0F5 | (255,240,245) | |
| Lilak (lilak) | #C8A2C8 | (200,162,200) | |
| Magenta (magenta) | #FF008F | (255,000,143) | |
| Orkide (orkide) | #DA70D6 | (218,112,214) | |
| Qizil-binafsha (binafsha-qizil) | #C71585 | (199,021,133) | |
| Sanguine (sanguine) | #92000A | (146,000,010) | |
| Qushqo'nmas (binafsha rang soyasi) | #D8BFD8 | (185,211,238) | |
| Binafsha-baqlajon (binafsha rang) | #991199 | (153,017,153) | |
| Rosa vivo (chuqur pushti) | #FF007F | (255,000,127) | |
| Lavanda-atirgul (binafsha rang) | #FBA0E3 | (108,123,139) | |
| Mountbatten pushti | #997ABD | (153,122,141) |
Jadval kulrang ranglar va uning soyalari
| Ism | Rang | Hex | (RGB) |
| Kulrang | #808080 | (128,128,128) | |
| Kulrang | #bebebe | (190,190,190) | |
| (kulrang soya) | #858585 | (133,133,133) | |
| Kulrang33 | #545454 | (084,084,084) | |
| (Kulrang shifer) | #708090 | (112,128,144) | |
| (Kvars) | #99958s | (153,149,140) | |
| (Och kulrang) | #bbbbbb | (187,187,187) | |
| (kumush) | #c0c0c0 | (192,192,192) | |
| (kulrang-oq) | #f0f0f0 | (240,240,240) | |
| (Abdel-Karimning soqollari) | #e0e0e0 | (224,224,224) | |
| Ochiq kulrang (ochiq kulrang) | #d3d3d3 | (211,211,211) | |
| LightStateGray() | #778899 | (119,136,153) | |
| StateGray-1 (Och makkajo'xori ko'k1) | #c6e2ff | (198,226,255) | |
| StateGray-2 (Och makkajo'xori ko'k2) | #b9d3ee | (185,211,238) | |
| StateGray3() | #9fb6cd | (159,182,205) | |
| StateGray4() | #6c7b8b | (108,123,139) |
Chizilgan rasmga diqqat bilan qarang. Ochiladigan oynaning foni shaffof holga keltiriladi. Bu juda keng tarqalgan dizayn texnikasi. Keling, buni qanday amalga oshirish mumkinligi haqida o'ylab ko'raylik.
Vazifa
Brauzerning rangini shaffof qiling.
Yechim
Bunday vaziyatda birinchi fikr fon uchun oldindan belgilangan shaffoflikka ega png24 tasviridan foydalanishdir. Ammo bu rasm mutlaqo keraksiz. Busiz (va shuning uchun serverga qo'shimcha so'rovsiz) juda yaxshi ish qilishingiz mumkin. Keling, hali ham optimal echimni topishga harakat qilaylik.
Ikkinchi fikr - foydalanish. Ammo bu holda bu juda qulay emas. Axir, keyin nafaqat fon, balki yozuvlar ham shaffof bo'ladi. Ha, aslida, bir vaqtning o'zida butun oyna.
Albatta, siz qo'shimcha konteyner qo'shishga urinib ko'rishingiz va faqat unga shaffoflikni qo'llashingiz mumkin, ammo bu HTML elementi faqat bezak uchun mo'ljallangan va ortiqcha bo'lishi aniq. Busiz qilish mumkinmi?
Albatta qila olasiz! Agar siz RGBA dan foydalansangiz.
RGBA rang tavsifi formati
CSS3 RGB va RGBA funksiyalaridan foydalanib rangni belgilash imkonini beradi. Bunday holda, biz bitta bayt ajratilgan har bir rang komponentining nisbatini ko'rsatishimiz kerak (agar hech kim bilmasa, 0 dan 255 gacha).
Bu holat uchun sintaksis juda oddiy:
Fon: rgb(0, 255, 0); /* toza yashil rang */
RGBA uchun to'rtinchi parametr qo'shiladi - alfa shaffofligi (0 dan 1 gacha).
Fon: rgba(255, 0, 0, 0,5); /* 50% shaffoflik bilan sof qizil */
Mana, bizning muammomizning yechimi. Faqat rgba yordamida fon rangini o'rnating va hamma narsa biz xohlagan tarzda ko'rinadi. Keraksiz rasmlar va elementlarsiz!
Bu raqamlarni qayerdan olsam bo'ladi?
Photoshop-ning ko'z tomchilari vositasidan foydalanib, rangning tarkibiy qismlarini ko'rishingiz mumkin.
Brauzerlararo muvofiqligi haqida
RGB funktsiyasi RGBA-dan ancha eski va CSS2 standarti davridan beri mavjud bo'lganligi sababli, eng qadimiy brauzerlardan himoya qilish uchun siz quyidagi ikki nusxadagi konstruktsiyadan foydalanishingiz mumkin:
SomeBlock (fon: rgb(255, 0, 0); fon: rgba (255, 0, 0, 0,5); )
Ushbu yondashuv bilan zamonaviy brauzerlarning bobolari shaffoflikka ega bo'lmaydilar, lekin rangning o'zi to'g'ri bo'lib qoladi.
IEga alohida g'amxo'rlik qilishingiz kerak bo'ladi. Eshaklar RGBA-ni 8-versiyagacha tushunmaydilar.
Har doimgidek: yer dehqonlar uchun, fabrikalar ishchilar uchun, eshaklar esa tayoq! Sifatida .
Albatta, jangovar sharoitda biz ushbu qoidani biz bog'laydigan alohida CSS-ga joylashtiramiz.
SomeBlock (fon: shaffof; filtr: progid: DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); masshtablash: 1; )
Hiyla - boshlang'ich va tugatish ranglarini bir xil (ff0000 - qizil) sifatida belgilash va ushbu filtrdagi gradient uchun alfa kanalini o'rnatishingiz mumkinligidan foydalaning (misolda, qiymat 80).
Ma'lumot uchun: filtr o'n oltilik tizimdan foydalanadi va mutlaqo noaniq rangning kodi FF (o'nlik sonida bu 255). Shunga ko'ra, o'n oltilik 80 - o'nlik 128, ya'ni 50% shaffoflik.
Sinov qilingan:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Chrome
CSS rang moduli mualliflarga html elementlarining ranglari va shaffofligini, shuningdek rang xususiyatining qiymatlarini aniqlash imkonini beruvchi qiymatlarni batafsil bayon qiladi.
rang xususiyati
1. Ustuvor ranglar: rang xususiyati
Xususiyat turli xil ranglarni ko'rsatish tizimlaridan foydalangan holda shrift rangini belgilaydi. Xususiyat element matn mazmunining rangini tavsiflaydi. Bundan tashqari, u rang qiymatlarini qabul qiladigan har qanday boshqa xususiyatlar uchun potentsial bilvosita qiymatni (currentColor) ta'minlash uchun ishlatiladi.
Mulk meros qilib olingan.
2. Rang qiymatlari
2.1. Asosiy kalit so'zlar
Asosiy kalit so'zlar ro'yxati quyidagi ma'nolarni o'z ichiga oladi:
| Ism | HEX | RGB | Rang |
|---|---|---|---|
| qora | #000000 | 0,0,0 | |
| kumush | #C0C0C0 | 192,192,192 | |
| kulrang | #808080 | 128,128,128 | |
| oq | #FFFFFF | 255,255,255 | |
| to'q qizil | #800000 | 128,0,0 | |
| qizil | #FF0000 | 255,0,0 | |
| siyohrang | #800080 | 128,0,128 | |
| fuşya | #FF00FF | 255,0,255 | |
| yashil | #008000 | 0,128,0 | |
| Laym | #00FF00 | 0,255,0 | |
| zaytun | #808000 | 128,128,0 | |
| sariq | #FFFF00 | 255,255,0 | |
| dengiz floti | #000080 | 0,0,128 | |
| ko'k | #0000FF | 0,0,255 | |
| ko'k | #008080 | 0,128,128 | |
| suv | #00FFFF | 0,255,255 |
Rang nomlari katta-kichik harflarga sezgir emas.
Sintaksis
Rang: ko'k;
2.2. Raqamli rang qiymatlari
2.2.1. RGB model ranglari
RGB qiymatining o'n oltilik formati - bu # belgisi, undan keyin darhol uch yoki olti o'n oltilik belgilar. Uch xonali RGB yozuvi #rgb olti xonali #rrggbb shakliga nol qo'shish o'rniga raqamlarni nusxalash orqali o'zgartiriladi. Masalan, #fb0 #ffbb00 gacha kengayadi. Bu qisqa #fff yozuvida oq #ffffff ko'rsatilishini ta'minlaydi va displey rang chuqurligiga bog'liqliklarni olib tashlaydi.
Funktsional yozuvdagi RGB qiymatining formati rgb (keyin uchta raqamli qiymatdan iborat vergul bilan ajratilgan ro'yxat (uchta butun qiymat yoki uch foizli qiymat), undan keyin belgi). Butun son qiymati 255 100% va F yoki FF ga oʻn oltilik tizimda mos keladi:
Rgb(255,255,255) = rgb(100%, 100%, 100%) = #FFF
Raqamli qiymatlar atrofida bo'shliq belgilariga ruxsat beriladi.
Rang CSS-da o'rnatilishi mumkin turli yo'llar bilan:
- nomi bilan,
- o'n oltilik qiymat bo'yicha,
- RGB va RGBA formatlarida,
- HSL va HSLA formatlarida.
Rangni nomi bo'yicha o'rnating
Brauzerlar nomlar bo'yicha elementlar uchun ba'zi ranglarni belgilashni qo'llab-quvvatlaydi. Ushbu jadvalda ba'zi kalit so'zlar ( Ingliz nomlari ranglar) rang xususiyatlarini, RGB kodini, o'n oltilik kodni (HEX) va HSL kodini belgilash uchun ishlatiladi.
| Ism | Rang | RGB | HEX | HSL | Tavsif |
|---|---|---|---|---|---|
| oq | rgb(255, 255, 255) | #ffffff yoki #fff | hsl(0, 0%, 100%) | Oq | |
| kumush | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Kulrang | |
| kulrang | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | To'q kulrang | |
| qora | rgb(0, 0, 0) | #000000 yoki #000 | hsl(0, 0%, 0%) | Qora | |
| to'q qizil | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | To'q qizil | |
| qizil | rgb(255, 0, 0) | #ff0000 yoki #f00 | hsl(0, 100%, 50%) | Qizil | |
| apelsin | rgb(255, 165, 0) | #ffa500 | hsl(38,8, 100%, 50%) | apelsin | |
| sariq | rgb(255, 255, 0) | #ffff00 yoki #ff0 | hsl(60, 100%, 50%) | Sariq | |
| zaytun | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Zaytun | |
| Laym | rgb(0, 255, 0) | #00ff00 yoki #0f0 | hsl(120, 100%, 50%) | Och yashil | |
| yashil | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Yashil | |
| suv | rgb(0, 255, 255) | #00ffff yoki #0ff | hsl(180, 100%, 50%) | Moviy | |
| ko'k | rgb(0, 0, 255) | #0000ff yoki #00f | hsl(240, 100%, 50%) | Moviy | |
| dengiz floti | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Toʻq koʻk | |
| ko'k | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Moviy-yashil | |
| fuşya | rgb(255, 0, 255) | #ff00ff yoki #f0f | hsl(300, 100%, 50%) | Pushti | |
| siyohrang | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | binafsha |
Bu rang nomlaridan foydalanishga misol bo'lib, rang nomlari kengaytirilgan jadvaldan olingan.
Bu kod qanday ishlaydi:
RGB yordamida rangni sozlash
RGB qo'shimcha rang modelidir. Inglizchada qo'shimcha- qo'shimcha. RGB - bu qisqartma Inglizcha so'zlar: Qizil, Yashil, Moviy - qizil, yashil, ko'k). Bundan ko'rinib turibdiki, RGB modelida ranglar turli miqdorda uchta rang (qizil, yashil, ko'k) qo'shilishi bilan sintezlanadi.
Qizil, yashil va ko'k ranglarni aralashtirish orqali siz bir necha million soyalarni olishingiz mumkin. Barcha mumkin bo'lgan kombinatsiyalar kompyuter xotirasida saqlanadi.
Gapga keling.
Ushbu formatdagi xususiyatlarni o'rnatish uchun rgb(r, g, b) yozuvidan foydalaning, bu erda r, g, b har bir rang uchun uchta kanal (qizil, yashil, ko'k). Har bir kanal uchun qiymatlar 0 dan 255 gacha bo'lgan oraliqda o'rnatiladi.
Misol kod.
Hamma narsani aniq qilish uchun bu erda kod misoli:
Bu misol shunday ishlashi kerak:
1-rasm. RGB-dagi ranglar. Misol uchun tushuntirishlar.
Sahifaning boshida biz div.rgb sinfini yaratamiz, u teg tomonidan yaratilgan bloklar uchun kerak
Keyinchalik, kodda biz blokning fon rangini o'rnatamiz
Ushbu misolni tahrir qilib ko'ring va o'z qiymatlaringizni belgilang, masalan, rgb(100, 100, 100) .
RGBA yordamida rangni sozlash
CSS3-da ranglar bilan ishlash uchun yangi vosita - RGBA formati mavjud. Buni RGB modelining evolyutsiyasi deb atash mumkin, ammo bitta yangi kanal qo'shilishi bilan - A yoki alfa kanali. Ushbu kanal rangning shaffofligini o'rnatadi. Uning qiymatlari 0 dan 1 gacha bo'lgan oraliqda o'rnatiladi. 0 qiymati to'liq shaffoflik, 1 - to'liq shaffoflik (rang birinchi uchta RGB kanalida ko'rsatilgandek bir xil bo'ladi) va oraliq qiymatlarga mos keladi. 0,4 yoki 0,6 kabi - turli darajadagi shaffoflik.
Misol kod.
Bu qanday ishlaydi:
Ushbu kod vizual ravishda quyidagiga o'xshaydi, u rang qiymatini belgilash uchun RGB modelidan foydalanadi:
Mana uning natijasi:
Nolga teng bo'lgan alfa-kanal qiymati har qanday rangni ko'rinmas qiladi - mutlaqo shaffof bir qiymat RGB kodidagi rangni o'zgartirmasdan tarjima qiladi. Rgba(255,0,0,1.0) xususiyati qizil rangni ko'rsatadi rgb(255, 0, 0) .
O'n oltilik qiymat bo'yicha (HEX kodi)
Kundalik hayotda biz o'nlik sanoq tizimidan foydalanamiz. Uning kelib chiqishi juda oddiy - qo'limizda o'n barmog'imiz bor va barmoqlar bilan hisoblash hayotda qulay edi. Agar o'nlik sistemada o'nta raqam bo'lsa: 0 dan 9 gacha va 10 raqami keyingi raqam bo'lsa, u holda o'n oltilik sanoq sistemasida 16 ta raqam, keyingi raqam esa 16 raqami bo'ladi.
Rang kodlarini ko'rsatish uchun 0 dan 9 gacha bo'lgan oddiy o'nlik raqamlar o'n oltilik raqamlar sifatida ishlatiladi va 10 dan 15 gacha bo'lgan raqamlarni ko'rsatish uchun A dan F gacha lotin harflari ishlatiladi, ya'ni (0, 1, 2, 3, 4, 5). , 6, 7, 8, 9, A, B, C, D, E, F). Aniqlik uchun buni jadvalga keltiramiz:
F dan katta o'n oltilik raqamlarni yozish uchun (o'nlik tizimda 15), o'nlik tizimda bo'lgani kabi, ular ikkita raqam kombinatsiyasidan ham foydalanadilar, lekin allaqachon o'n oltilik raqamlar, bu aniq. Shunday qilib, 255 o'nlik sonni o'n oltilik tizimda yozish uchun FF belgisidan foydalaning.
O'n oltilik tizim kompyuter uchun tushunarli va u o'n oltilik qiymat bilan belgilangan qiymatlarni tezroq qayta ishlaydi.
O'n oltilik tizimda rangni belgilash uchun raqamli qiymatdan oldin "#" belgisini qo'ying, masalan: #FFC0CB. #FFC0CB qiymatining o'zi uchta o'n oltilik FF, C0 va CB raqamlaridan iborat. Ushbu yozuvning ma'nosi rangni RGB formatida (rgb(r, g, b)) o'rnatish bilan bir xil - HEX kodidagi har bir o'n oltilik raqam RGB modelining kanalidagi ranglarning to'yinganligini ko'rsatadi.
Ushbu kod quyidagi elementlarni ko'rsatadi:
Va bu yuqoridagi sahifadagi "RGB yordamida ranglarni o'rnatish" bo'limidan olingan natija bilan rasm.
1-rasm. RGB-dagi ranglar. Biz ranglarning bir xil ekanligini ko'ramiz.
HEX rang kodining qisqartirilgan yozuviga ruxsat beriladi: 6 xonali raqam 3 xonali raqam sifatida yozilishi mumkin. Bu faqat bitta kanalning rang qiymatidagi ikkita raqam takrorlanganda amal qiladi.
Ya'ni, quyidagi qisqartma qabul qilinadi:
Masalan, #ff22aa rangi #f2a yoki #44aa22 rangi #4a2 sifatida yozilishi mumkin.
HSL yordamida rangni sozlash
CSS3 ranglarni belgilash uchun yangi formatga ega.
HSL formati inglizcha so'zlarning qisqartmasi: Hue (hue), Saturate (to'yinganlik) va Lightness (engillik).
HSL-dagi rang - bu maxsus rang g'ildiragidagi rangning qiymati (2-rasm) va darajalarda ko'rsatilgan. Agar biz RGB modeli bilan o'xshashliklarni chizsak, u holda 0 ° qizil rangga, 120 ° yashil rangga va 240 ° ko'k rangga mos keladi.
Rang qiymati 0 dan 359 gacha o'zgaradi.
Rasm 2. HSL rang g'ildiragi. Ikkinchi qiymat - to'yinganlik (Saturate) foiz sifatida o'rnatiladi. 100% to'yinganlikda rang iloji boricha "suvli" bo'ladi, chunki to'yinganlik indikatori 0% ga o'tadi, rang xiralashadi va kul rangga aylanadi.
Uchinchi qiymat, Yengillik ham foiz sifatida o'rnatiladi. Foiz qanchalik yuqori bo'lsa, rang yorqinroq bo'ladi. 0% va 100% ekstremal qiymatlari mos ravishda qora (yorug'lik yo'q) va oq (ortiqcha ochilgan) ranglarni ko'rsatadi va birinchi kanalda rang g'ildiragidan qaysi rang tanlanganligi muhim emas. Optimal rang yorqinligi qiymati 50% ni tashkil qiladi.
HSLA yordamida rangni sozlash
HSLA formati HSL bilan bog'liq, xuddi RGB RGBA bilan bog'liq. HSLA formatida, RGBA-da bo'lgani kabi, ranglarning shaffofligi uchun mas'ul bo'lgan alfa-kanal qo'shiladi.
HSL formatida ko'rsatilgan rangni o'qish osonroq. Biz buni intuitiv deb aytishimiz mumkin. Masalan, agar xotirada HSL rang g'ildiragining rasmi mavjud bo'lsa, hsl (120,60%,50%) kodi yakuniy rangni ifodalashi mumkin. RGB va HEX formatlari haqida ham shunday deyish mumkin emas, bu formatlarda ko'rsatilgan rang kodi faqat monitorda tasvirlanganidan keyin aniq bo'ladi.
CSS3-dagi yangi formatlar (HSL, HSLA va RGBA) brauzerlarda IE 9.0, Opera 10.0 Firefox 3.0 versiyalaridan boshlab ishlaydi. Uslublarni eski brauzerlarda qanday qilib ishlashim mumkin?
Someblock (fon rangi: rgb(255,50,50); fon rangi: rgba(255,50,50,0,85) )
Ushbu kodni eski brauzerlarda ishlatganda, .someblosk sinfi uchun fon rangi, garchi u alfa kanalidan foydalanmasa ham, RGB formatida ko'rsatiladi.
Uchun html sahifalari Ranglar birinchi navbatda o'n oltilik tizimda belgilanadi. Buning uchun kodni yozishning ikki turi qo'llaniladi - to'liq yoki qisqartirilgan. HTML rangini to'liq to'g'ri ko'rsatish uchun siz oltita belgini kiritishingiz kerak (raqamlar va/yoki inglizcha harflar) xeshdan keyin, masalan, qora rang shunday yoziladi: #000000. HTML ranglarini belgilash uchun stenografiya xesh va uning orqasida uchta raqam va/yoki harflardan iborat. Bundan tashqari, ushbu turdagi aktsiyalardan faqat ma'lum bir rangning to'liq yozuvi xesh belgisidan keyin bir xil belgilardan iborat bo'lsa ishlatilishi mumkin. Masalan, xuddi shu qora rangni shunday yozish mumkin: #000. Siz html ranglarini katta va kichik belgilar yordamida belgilashingiz mumkin, chunki ular katta-kichik harflarga sezgir emas.
"#" dan keyin yozilgan har bir belgi qizil, yashil va ma'lum bir nisbatga mos keladi ko'k ranglar. O'z navbatida, barcha monitorlar juda ko'p piksellardan (mikroskopik nuqtalardan) iborat bo'lib, ularning har biri 3 ta "chiroq" (yorug'lik manbalari) ni o'z ichiga oladi: qizil, yashil va ko'k. Keyin, ushbu "chiroqlar" tomonidan chiqarilgan yorug'likning intensivligini sozlash orqali monitor bizga kerakli rangni ko'rsatadi.
Qizil, ko'k va yashil yorug'likning emissiya intensivligini (0 dan 256 gacha) birlashtirib, monitorlar 16 000 000 turli xil soyalarni ko'rsatishi mumkin.
Shuningdek, veb-saytlar uchun ranglar og'zaki yoki RGB kodida ko'rsatilishi mumkin.
Bugungi kunda 147 ta rangni og'zaki yozish mumkin. Ba'zi turli nomlar bir xil ranglarni anglatishi mumkinligini bilish muhim, masalan, Kulrang va Kulrang kul rang (#808080).
Veb-saytlar uchun xavfsiz ranglar.
Har bir monitor va brauzer 16 million html ranglarini to'g'ri ko'rsata olmaydi.
Agar, masalan, brauzer to'g'ri ko'rsata olmaydigan rangga duch kelsangiz, unda:
- Brauzer uni eng o'xshash va muvaffaqiyatli qayta ishlab chiqarilishi mumkin bo'lgan bilan almashtiradi;
- To'g'ri ko'rsatish uchun brauzer bir nechta ranglarni aralashtirishi va natijani takrorlashi mumkin.
Har qanday brauzerda va har qanday monitorda chiqish kodda ko'rsatilgan rang bo'lishini ta'minlash uchun "Xavfsiz ranglar" dan foydalanish tavsiya etiladi. Ular qo'lda yoki birovning xohishi bilan emas, balki matematik tarzda aniqlangan. HTML hujjatlari uchun 216 ta 100% xavfsiz ranglar mavjud va bugungi texnologiyalar zamonaviy monitorlar va brauzerlar millionlab ranglarni taniy oladigan darajaga etgan bo'lsa-da, ranglarni ko'rsatishni kafolatlash uchun ushbu xavfsiz ranglardan foydalanishni tavsiya etamiz.
| O'n oltilik rang tizimi. | RGB rang kodlari (qizil, yashil, ko'k). |
| HTML rang kodi: #000000 | RGB rangi: 0 0 0 |
| HTML rang kodi: #333333 | RGB rangi: 51 51 51 |
| HTML rang kodi: #666666 | RGB rangi: 102 102 102 |
| HTML rang kodi: #999999 | RGB rangi: 153 153 153 |
| HTML rang kodi: #CCCCCC | RGB rangi: 204 204 204 |
| HTML rang kodi: #FFFFFF | RGB rangi: 255 255 255 |
| HTML rang kodi: #666600 | RGB rangi: 102 102 0 |
| HTML rang kodi: #999900 | RGB rangi: 153 153 0 |
| HTML rang kodi: #999933 | RGB rangi: 153 153 51 |
| HTML rang kodi: #999966 | RGB rangi: 153 153 102 |
| HTML rang kodi: #CCCC33 | RGB rangi: 204 204 51 |
| HTML rang kodi: #CCCC66 | RGB rangi: 204 204 102 |
| HTML rang kodi: #333300 | RGB rangi: 51 51 0 |
| HTML rang kodi: #666633 | RGB rangi: 102 102 51 |
| HTML rang kodi: #CCCC99 | RGB rangi: 204 204 153 |
| HTML rang kodi: #CCFF33 | RGB rangi: 204 255 51 |
| HTML rang kodi: #CCFF00 | RGB rangi: 204 255 0 |
| HTML rang kodi: #CCFF66 | RGB rangi: 204 255 102 |
| HTML rang kodi: #669900 | RGB rangi: 102 153 0 |
| HTML rang kodi: #99CC33 | RGB rangi: 153 204 51 |
| HTML rang kodi: #99CC00 | RGB rangi: 153 204 0 |
| HTML rang kodi: #99CC66 | RGB rangi: 153 204 102 |
| HTML rang kodi: #99FF33 | RGB rangi: 153 255 51 |
| HTML rang kodi: #99FF00 | RGB rangi: 153 255 0 |
| HTML rang kodi: #336600 | RGB rangi: 51 102 0 |
| HTML rang kodi: #669933 | RGB rangi: 102 153 51 |
| HTML rang kodi: #66CC33 | RGB rangi: 102 204 51 |
| HTML rang kodi: #66CC00 | RGB rangi: 102 204 0 |
| HTML rang kodi: #99FF66 | RGB rangi: 153 255 102 |
| HTML rang kodi: #CCFF99 | RGB rangi: 204 255 153 |
| HTML rang kodi: #009900 | RGB rangi: 0 153 0 |
| HTML rang kodi: #339900 | RGB rangi: 51 153 0 |
| HTML rang kodi: #33CC00 | RGB rangi: 51 204 0 |
| HTML rang kodi: #33FF00 | RGB rangi: 51 255 0 |
| HTML rang kodi: #66FF33 | RGB rangi: 102 255 51 |
| HTML rang kodi: #66FF00 | RGB rangi: 102 255 0 |
| HTML rang kodi: #00CC33 | RGB rangi: 0 204 51 |
| HTML rang kodi: #33CC33 | RGB rangi: 51 204 51 |
| HTML rang kodi: #00CC00 | RGB rangi: 0 204 0 |
| HTML rang kodi: #00FF00 | RGB rangi: 0 255 0 |
| HTML rang kodi: #00FF33 | RGB rangi: 0 255 51 |
| HTML rang kodi: #33FF33 | RGB rangi: 51 255 51 |
| HTML rang kodi: #003300 | RGB rangi: 0 51 0 |
| HTML rang kodi: #336633 | RGB rangi: 51 102 51 |
| HTML rang kodi: #669966 | RGB rangi: 102 153 102 |
| HTML rang kodi: #66CC66 | RGB rangi: 102 204 102 |
| HTML rang kodi: #99CC99 | RGB rangi: 153 204 153 |
| HTML rang kodi: #CCFFCC | RGB rangi: 204 255 204 |
| HTML rang kodi: #006600 | RGB rangi: 0 102 0 |
| HTML rang kodi: #339933 | RGB rangi: 51 153 51 |
| HTML rang kodi: #00FF66 | RGB rangi: 0 255 102 |
| HTML rang kodi: #33FF66 | RGB rangi: 51 255 102 |
| HTML rang kodi: #66FF66 | RGB rangi: 102 255 102 |
| HTML rang kodi: #99FF99 | RGB rangi: 153 255 153 |
| HTML rang kodi: #009933 | RGB rangi: 0 153 51 |
| HTML rang kodi: #00CC66 | RGB rangi: 0 204 102 |
| HTML rang kodi: #33CC66 | RGB rangi: 51 204 102 |
| HTML rang kodi: #00FF99 | RGB rangi: 0 255 153 |
| HTML rang kodi: #33FF99 | RGB rangi: 51 255 153 |
| HTML rang kodi: #66FF99 | RGB rangi: 102 255 153 |
| HTML rang kodi: #006633 | RGB rangi: 0 102 51 |
| HTML rang kodi: #009966 | RGB rangi: 0 153 102 |
| HTML rang kodi: #339966 | RGB rangi: 51 153 102 |
| HTML rang kodi: #00CC99 | RGB rangi: 0 204 153 |
| HTML rang kodi: #33CC99 | RGB rangi: 51 204 153 |
| HTML rang kodi: #66CC99 | RGB rangi: 102 204 153 |
| HTML rang kodi: #009999 | RGB rangi: 0 153 153 |
| HTML rang kodi: #33CCCC | RGB rangi: 51 204 204 |
| HTML rang kodi: #00FFCC | RGB rangi: 0 255 204 |
| HTML rang kodi: #33FFCC | RGB rangi: 51 255 204 |
| HTML rang kodi: #66FFCC | RGB rangi: 102 255 204 |
| HTML rang kodi: #99FFCC | RGB rangi: 153 255 204 |
| HTML rang kodi: #00CCCC | RGB rangi: 0 204 204 |
| HTML rang kodi: #00FFFF | RGB rangi: 0 255 255 |
| HTML rang kodi: #33FFFF | RGB rangi: 51 255 255 |
| HTML rang kodi: #66FFFF | RGB rangi: 102 255 255 |
| HTML rang kodi: #99FFFF | RGB rangi: 153 255 255 |
| HTML rang kodi: #CCFFFF | RGB rangi: 204 255 255 |
| HTML rang kodi: #336666 | RGB rangi: 51 102 102 |
| HTML rang kodi: #006666 | RGB rangi: 0 102 102 |
| HTML rang kodi: #669999 | RGB rangi: 102 153 153 |
| HTML rang kodi: #339999 | RGB rangi: 51 153 153 |
| HTML rang kodi: #66CCCC | RGB rangi: 102 204 204 |
| HTML rang kodi: #99CCCC | RGB rangi: 153 204 204 |
| HTML rang kodi: #003333 | RGB rangi: 0 51 51 |
| HTML rang kodi: #0099CC | RGB rangi: 0 153 204 |
| HTML rang kodi: #3399CC | RGB rangi: 51 153 204 |
| HTML rang kodi: #00CCFF | RGB rangi: 0 204 255 |
| HTML rang kodi: #33CCFF | RGB rangi: 51 204 255 |
| HTML rang kodi: #66CCFF | RGB rangi: 102 204 255 |
| HTML rang kodi: #006699 | RGB rangi: 0 102 153 |
| HTML rang kodi: #336699 | RGB rangi: 51 102 153 |
| HTML rang kodi: #6699CC | RGB rangi: 102 153 204 |
| HTML rang kodi: #0099FF | RGB rangi: 0 153 255 |
| HTML rang kodi: #3399FF | RGB rangi: 51 153 255 |
| HTML rang kodi: #99CCFF | RGB rangi: 153 204 255 |
| HTML rang kodi: #003366 | RGB rangi: 0 51 102 |
| HTML rang kodi: #003399 | RGB rangi: 0 51 153 |
| HTML rang kodi: #0033FF | RGB rangi: 0 51 255 |
| HTML rang kodi: #3366CC | RGB rangi: 51 102 204 |
| HTML rang kodi: #0066CC | RGB rangi: 0 102 204 |
| HTML rang kodi: #0066FF | RGB rangi: 0 102 255 |
| HTML rang kodi: #000033 | RGB rangi: 0 0 51 |
| HTML rang kodi: #0033CC | RGB rangi: 0 51 204 |
| HTML rang kodi: #0000CC | RGB rangi: 0 0 204 |
| HTML rang kodi: #0000FF | RGB rangi: 0 0 255 |
| HTML rang kodi: #3366FF | RGB rangi: 51 102 255 |
| HTML rang kodi: #6699FF | RGB rangi: 102 153 255 |
| HTML rang kodi: #000066 | RGB rangi: 0 0 102 |
| HTML rang kodi: #000099 | RGB rangi: 0 0 153 |
| HTML rang kodi: #3333CC | RGB rangi: 51 51 204 |
| HTML rang kodi: #3300CC | RGB rangi: 51 0 204 |
| HTML rang kodi: #3300FF | RGB rangi: 51 0 255 |
| HTML rang kodi: #3333FF | RGB rangi: 51 51 255 |
| HTML rang kodi: #333366 | RGB rangi: 51 51 102 |
| HTML rang kodi: #333399 | RGB rangi: 51 51 153 |
| HTML rang kodi: #666699 | RGB rangi: 102 102 153 |
| HTML rang kodi: #6666CC | RGB rangi: 102 102 204 |
| HTML rang kodi: #6666FF | RGB rangi: 102 102 255 |
| HTML rang kodi: #9999CC | RGB rangi: 153 153 204 |
| HTML rang kodi: #330066 | RGB rangi: 51 0 102 |
| HTML rang kodi: #330099 | RGB rangi: 51 0 153 |
| HTML rang kodi: #6600FF | RGB rangi: 102 0 255 |
| HTML rang kodi: #6633FF | RGB rangi: 102 51 255 |
| HTML rang kodi: #9999FF | RGB rangi: 153 153 255 |
| HTML rang kodi: #CCCCFF | RGB rangi: 204 204 255 |
| HTML rang kodi: #330033 | RGB rangi: 51 0 51 |
| HTML rang kodi: #663399 | RGB rangi: 102 51 153 |
| HTML rang kodi: #6633CC | RGB rangi: 102 51 204 |
| HTML rang kodi: #6600CC | RGB rangi: 102 0 204 |
| HTML rang kodi: #9966FF | RGB rangi: 153 102 255 |
| HTML rang kodi: #9966CC | RGB rangi: 153 102 204 |
| HTML rang kodi: #663366 | RGB rangi: 102 51 102 |
| HTML rang kodi: #660099 | RGB rangi: 102 0 153 |
| HTML rang kodi: #9900FF | RGB rangi: 153 0 255 |
| HTML rang kodi: #9933FF | RGB rangi: 153 51 255 |
| HTML rang kodi: #9933CC | RGB rangi: 153 51 204 |
| HTML rang kodi: #CC99FF | RGB rangi: 204 153 255 |
| HTML rang kodi: #660066 | RGB rangi: 102 0 102 |
| HTML rang kodi: #996699 | RGB rangi: 153 102 153 |
| HTML rang kodi: #9900CC | RGB rangi: 153 0 204 |
| HTML rang kodi: #CC00FF | RGB rangi: 204 0 255 |
| HTML rang kodi: #CC33FF | RGB rangi: 204 51 255 |
| HTML rang kodi: #CC66FF | RGB rangi: 204 102 255 |
| HTML rang kodi: #993399 | RGB rangi: 153 51 153 |
| HTML rang kodi: #990099 | RGB rangi: 153 0 153 |
| HTML rang kodi: #CC33CC | RGB rangi: 204 51 204 |
| HTML rang kodi: #CC00CC | RGB rangi: 204 0 204 |
| HTML rang kodi: #CC66CC | RGB rangi: 204 102 204 |
| HTML rang kodi: #CC99CC | RGB rangi: 204 153 204 |
| HTML rang kodi: #CC3399 | RGB rangi: 204 51 153 |
| HTML rang kodi: #FF00FF | RGB rangi: 255 0 255 |
| HTML rang kodi: #FF33FF | RGB rangi: 255 51 255 |
| HTML rang kodi: #FF66FF | RGB rangi: 255 102 255 |
| HTML rang kodi: #FF99FF | RGB rangi: 255 153 255 |
| HTML rang kodi: #FFCCFF | RGB rangi: 255 204 255 |
| HTML rang kodi: #990066 | RGB rangi: 153 0 102 |
| HTML rang kodi: #CC0099 | RGB rangi: 204 0 153 |
| HTML rang kodi: #CC6699 | RGB rangi: 204 102 153 |
| HTML rang kodi: #FF33CC | RGB rangi: 255 51 204 |
| HTML rang kodi: #FF00CC | RGB rangi: 255 0 204 |
| HTML rang kodi: #FF66CC | RGB rangi: 255 102 204 |
| HTML rang kodi: #660033 | RGB rangi: 102 0 51 |
| HTML rang kodi: #993366 | RGB rangi: 153 51 102 |
| HTML rang kodi: #CC0066 | RGB rangi: 204 0 102 |
| HTML rang kodi: #FF0099 | RGB rangi: 255 0 153 |
| HTML rang kodi: #FF3399 | RGB rangi: 255 51 153 |
| HTML rang kodi: #FF99CC | RGB rangi: 255 153 204 |
| HTML rang kodi: #663333 | RGB rangi: 102 51 51 |
| HTML rang kodi: #996666 | RGB rangi: 153 102 102 |
| HTML rang kodi: #CC3366 | RGB rangi: 204 51 102 |
| HTML rang kodi: #FF0066 | RGB rangi: 255 0 102 |
| HTML rang kodi: #FF3366 | RGB rangi: 255 51 102 |
| HTML rang kodi: #FF6699 | RGB rangi: 255 102 153 |
| HTML rang kodi: #330000 | RGB rangi: 51 0 0 |
| HTML rang kodi: #990033 | RGB rangi: 153 0 51 |
| HTML rang kodi: #993333 | RGB rangi: 153 51 51 |
| HTML rang kodi: #CC3333 | RGB rangi: 204 51 51 |
| HTML rang kodi: #CC6666 | RGB rangi: 204 102 102 |
| HTML rang kodi: #CC9999 | RGB rangi: 204 153 153 |
| HTML rang kodi: #CC0033 | RGB rangi: 204 0 51 |
| HTML rang kodi: #FF0033 | RGB rangi: 255 0 51 |
| HTML rang kodi: #FF3333 | RGB rangi: 255 51 51 |
| HTML rang kodi: #FF6666 | RGB rangi: 255 102 102 |
| HTML rang kodi: #FF9999 | RGB rangi: 255 153 153 |
| HTML rang kodi: #FFCCCC | RGB rangi: 255 204 204 |
| HTML rang kodi: #990000 | RGB rangi: 153 0 0 |
| HTML rang kodi: #CC0000 | RGB rangi: 204 0 0 |
| HTML rang kodi: #FF0000 | RGB rangi: 255 0 0 |
| HTML rang kodi: #FF3300 | RGB rangi: 255 51 0 |
| HTML rang kodi: #CC3300 | RGB rangi: 204 51 0 |
| HTML rang kodi: #FF6633 | RGB rangi: 255 102 51 |
| HTML rang kodi: #660000 | RGB rangi: 102 0 0 |
| HTML rang kodi: #993300 | RGB rangi: 153 51 0 |
| HTML rang kodi: #CC6633 | RGB rangi: 204 102 51 |
| HTML rang kodi: #FF6600 | RGB rangi: 255 102 0 |
| HTML rang kodi: #FF9966 | RGB rangi: 255 153 102 |
| HTML rang kodi: #FFCC99 | RGB rangi: 255 204 153 |
| HTML rang kodi: #663300 | RGB rangi: 102 51 0 |
| HTML rang kodi: #996633 | RGB rangi: 153 102 51 |
| HTML rang kodi: #CC6600 | RGB rangi: 204 102 0 |
| HTML rang kodi: #CC9966 | RGB rangi: 204 153 102 |
| HTML rang kodi: #FF9933 | RGB rangi: 255 153 51 |
| HTML rang kodi: #FF9900 | RGB rangi: 255 153 0 |
| HTML rang kodi: #996600 | RGB rangi: 153 102 0 |
| HTML rang kodi: #CC9933 | RGB rangi: 204 153 51 |
| HTML rang kodi: #CC9900 | RGB rangi: 204 153 0 |
| HTML rang kodi: #FFCC33 | RGB rangi: 255 204 51 |
| HTML rang kodi: #FFCC00 | RGB rangi: 255 204 0 |
| HTML rang kodi: #FFCC66 | RGB rangi: 255 204 102 |
| HTML rang kodi: #CCCC00 | RGB rangi: 204 204 0 |
| HTML rang kodi: #FFFF00 | RGB rangi: 255 255 0 |
| HTML rang kodi: #FFFF33 | RGB rangi: 255 255 51 |
| HTML rang kodi: #FFFF66 | RGB rangi: 255 255 102 |
| HTML rang kodi: #FFFF99 | RGB rangi: 255 255 153 |
| HTML rang kodi: #FFFFCC | RGB rangi: 255 255 204 |
Ushbu jadvalda 216 ta xavfsiz HTML rang kodlari mavjud. Har bir rang grafik muharrirlarda rangni belgilash uchun RGB va HTML sahifalarida rangni belgilash uchun HEXda qiymatga ega.
