Vlad Merjevich
HTML-da rang ikki usulning birida ko'rsatiladi: o'n oltinchi kod yordamida va ba'zi ranglar nomi bilan. O'n oltilik sanoq tizimiga asoslangan usul asosan eng universal usul sifatida qo'llaniladi.
Hexadecimal ranglar
O'n oltinchi raqamlar HTML-da ranglarni aniqlash uchun ishlatiladi. O'nli sanoq sistemasi, o'nlik tizimdan farqli o'laroq, uning nomidan ko'rinib turibdiki, 16 raqamiga asoslanadi. Raqamlar quyidagicha bo'ladi: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C , D, E, F. 10 dan 15 gacha raqamlar almashtirildi lotin harflari bilan... Jadval 6.1 da o'nli va o'n oltinchi raqamlar o'rtasidagi yozishmalar ko'rsatilgan.
O'n oltinchi tizimdagi 15 dan katta sonlar ikkita sonni bitta raqamga birlashtirish orqali hosil bo'ladi (6.2-jadval). Masalan, 255 kasr - FF o'n oltilik.
Sanoq tizimining ta'rifida chalkashliklarni oldini olish uchun # hesh belgisi o'n oltinchi raqamning oldiga qo'yiladi, masalan # aa69cc. Bunday holda, registrning ahamiyati yo'q, shuning uchun # F0F0F0 yoki # f0f0f0 yozish joizdir.
HTML-da ishlatiladigan odatiy rang shunday ko'rinadi.
Bu erda veb-sahifaning fon rangi # FA8E47 ga o'rnatildi. Raqam oldidagi # xash, bu o'n oltilikni anglatadi. Dastlabki ikkita raqam (FA) rangning qizil tarkibiy qismini belgilaydi, uchdan to'rtinchi raqamlar (8E) yashil rangga, oxirgi ikki raqam (47) ko'k rangga ega. Natijada bu rang.
| FA | + | 8E | + | 47 | = | FA8E47 |
Uch rangning har biri - qizil, yashil va ko'k - 00 dan FF gacha bo'lgan qiymatlarni qabul qilishi mumkin, natijada 256 rang mavjud. Shunday qilib, ranglarning umumiy soni 256x256x256 \u003d 16.777.216 kombinatsiyasi bo'lishi mumkin. Qizil, yashil va ko'k komponentlarga asoslangan rang modeli RGB (qizil, yashil, ko'k; qizil, yashil, ko'k) deb nomlanadi. Ushbu model qo'shimcha hisoblanadi (qo'shishdan qo'shish uchun), unda uchta komponentning ham qo'shilishi oq rangga ega bo'ladi.
O'n oltinchi ranglarda harakatlanishni osonlashtirish uchun ba'zi qoidalarni ko'rib chiqing.
- Agar rang tarkibiy qismlarining qiymatlari bir xil bo'lsa (masalan: # D6D6D6), unda siz kul rangni olasiz. Raqam qancha ko'p bo'lsa, rang qanchalik engil bo'lsa, qiymatlar # 000000 (qora) dan #FFFFFF (oq) gacha o'zgarib turadi.
- Agar qizil komponent maksimal (FF) bo'lsa, qolgan qismlar nolga teng bo'lsa, yorqin qizil rang hosil bo'ladi. # FF0000 rangi eng qizil qizil rangdir. Xuddi shu narsa yashil (# 00FF00) va ko'k (# 0000FF) bilan bog'liq.
- Sariq (# FFFF00) qizil rangni yashil rangga aralashtirib olinadi. Bu rang g'ildiragida aniq ko'rinadi (6.1-rasm), bu erda asosiy ranglar (qizil, yashil, ko'k) va qo'shimcha yoki qo'shimcha ranglar taqdim etiladi. Bularga sariq, moviy va binafsha ranglar kiradi (shuningdek, qizil rang). Umuman olganda, har qanday rangni yaqin atrofdagi ranglarni aralashtirish orqali olish mumkin. Shunday qilib, ko'k (# 00FFFF) ko'k va yashil ranglarni birlashtirib olinadi.
Shakl: 6.1. Rang doirasi
Hexadecimal ranglarni empirik tarzda tanlash kerak emas. Shu maqsadda, grafik muharririturli xil rang modellari bilan ishlashga qodir, masalan, Adobe Photoshop... Shakl. 6.2 ushbu dasturda rang tanlash uchun oynani ko'rsatadi, natijada joriy rangning o'n oltinchi qiymati chiziq bilan belgilanadi. Siz uni nusxalashingiz va o'zingizning kodingizga qo'yishingiz mumkin.
Shakl: 6.2. Rang tanlash uchun oyna fotoshop
Veb ranglari
Agar siz monitorning rang sifatini 8 bitga (256 rang) o'rnatgan bo'lsangiz, unda xuddi shu rang ko'rsatilishi mumkin turli xil brauzerlar o'z yo'lim bilan. Bu brauzer o'z palitrasi bilan ishlaydigan va palitrada bo'lmagan rangni ko'rsatolmaydigan grafikani namoyish qilish usuli bilan bog'liq. Bunday holda, rang belgilangan pikselga taqlid qiladigan boshqa piksellarning kombinatsiyasi bilan almashtiriladi. Rangni har xil brauzerlarda o'zgarishsiz ushlab turish uchun veb-ranglar deb nomlangan palitrasi kiritildi. Veb ranglari - bu har bir komponent uchun qizil, yashil va ko'k ranglarning oltita qiymatidan biri o'rnatilgan 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255) ranglari. (FF). Ushbu komponentning o'n oltinchi qiymati qavs ichida ko'rsatilgan. Barcha mumkin bo'lgan kombinatsiyalardagi ranglarning umumiy soni 6x6x6 - 216 ranglarni beradi. Veb-rangning misoli # 33FF66.
Veb-rangning asosiy xususiyati shundaki, u barcha brauzerlarda bir xil ko'rinadi. Ayni paytda veb-ranglarning dolzarbligi monitorlar sifatining oshishi va ularning imkoniyatlarining kengayishi tufayli juda kam.
Nomlari bo'yicha ranglar
Raqamlar to'plamini yodlamaslik uchun, buning o'rniga siz tez-tez ishlatiladigan ranglarning nomlarini ishlatishingiz mumkin. Jadval 6.3-da mashhur rang nomlarining ro'yxati keltirilgan.
| Rang nomi | Rang | Tavsif | Hexadecimal qiymati |
|---|---|---|---|
| qora | Qora | #000000 | |
| ko'k | Moviy | # 0000FF | |
| fuchsi | Yengil binafsha rang | # FF00FF | |
| kulrang | To'q kulrang | #808080 | |
| yashil | Yashil | #008000 | |
| laym | Ochiq yashil | # 00FF00 | |
| maroon | To'q qizil | #800000 | |
| dengiz floti | havo rang | #000080 | |
| zaytun | Zaytun | #808000 | |
| siyohrang | To'q binafsha rang | #800080 | |
| qizil | Qizil | # FF0000 | |
| kumush | Ochiq kulrang | # C0C0C0 | |
| choyshab | Moviy yashil | #008080 | |
| oq | Oq | #FFFFFF | |
| sariq | Sariq | # FFFF00 |
Rangni qaysi usulda belgilashingiz muhim emas - uning nomi yoki o'n oltinchi raqamlar yordamida. Ushbu usullar o'z harakatlarida tengdir. 6.1-misolda veb-sahifaning fonini va matn rangini qanday belgilash ko'rsatilgan.
6.1-misol. Fon va matn rangi
Namuna matni
IN ushbu misol fon rangi tegning bgcolor atributidan foydalanib o'rnatiladi
va matn atributi orqali matn rangini. O'zgarish uchun matn atributining qiymati o'n oltinchi raqam sifatida, bgcolor uchun esa ajratilgan yordamida o'rnatiladi kalit so'z choyshab.HEX / HTML
HEX rangi - bu RGB o'n oltinchi tasviridan boshqa narsa emas.
Ranglar o'n oltinchi raqamlarning uchta guruhi sifatida ifodalanadi, bu erda har bir guruh o'ziga xos rang uchun javob beradi: # 112233, bu erda 11 qizil, 22 yashil, 33 ko'k. Barcha qiymatlar 00 dan FF gacha bo'lishi kerak.
Ko'pgina ilovalarda o'n oltinchi ranglarning qisqartirilgan shakliga ruxsat beriladi. Agar uchta guruhning har birida bir xil belgilar mavjud bo'lsa, masalan # 112233, ularni # 123 deb yozish mumkin.
- h1 (rang: # ff0000;) / * qizil * /
- h2 (rang: # 00ff00;) / * yashil * /
- h3 (rang: # 0000ff;) / * ko'k * /
- h4 (rang: # 00f;) / * bir xil ko'k, stenografiya * /
RGB
RGB (Qizil, Yashil, Moviy) ranglar maydoni qizil, yashil va ko'k ranglarni aralashtirish orqali olinishi mumkin bo'lgan barcha ranglardan iborat. Ushbu model fotografiya, televizor va kompyuter grafikalarida mashhur.
RGB qiymatlari 0 dan 255 gacha bo'lgan butun son sifatida ko'rsatilgan. Masalan, rgb (0,0,255) ko'k rang sifatida ko'rsatiladi, chunki ko'k parametr eng yuqori qiymatiga (255), qolganlari esa 0 ga o'rnatiladi.
Ba'zi ilovalar (xususan veb-brauzerlar) RGB qiymatlarini foizli yozishni qo'llab-quvvatlaydi (0% dan 100% gacha).
- h1 (rang: rgb (255, 0, 0);) / * qizil * /
- h2 (rang: rgb (0, 255, 0);) / * yashil * /
- h3 (rang: rgb (0, 0, 255);) / * ko'k * /
- h4 (rang: rgb (0%, 0%, 100%);) / * bir xil ko'k, foizli yozuv * /
RGB rang qiymatlari barcha asosiy brauzerlarda qo'llab-quvvatlanadi.
RGBA
Yaqinda zamonaviy brauzerlar RGBA rang modeli bilan ishlashni o'rgandilar - ob'ektning shaffofligini aniqlaydigan alfa kanalni qo'llab-quvvatlaydigan RGB kengaytmasi.
RGBA rang qiymati quyidagicha ko'rsatilgan: rgba (qizil, yashil, ko'k, alfa). Alfa - bu 0,0 (to'liq shaffof) dan 1,0 gacha (to'liq shaffof bo'lmagan) raqam.
- h1 (rang: rgb (0, 0, 255);) / * oddiy RGB-da ko'k * /
- h2 (rang: rgba (0, 0, 255, 1);) / * RGBA-da bir xil ko'k, chunki shaffoflik: 100% * /
- h3 (rang: rgba (0, 0, 255, 0.5);) / * xira: 50% * /
- h4 (rang: rgba (0, 0, 255, .155);) / * xira: 15,5% * /
- h5 (rang: rgba (0, 0, 255, 0);) / * to'liq shaffof * /
RGBA IE9 +, Firefox 3+, Chrome, Safari va Opera 10+ da qo'llab-quvvatlanadi.
Hsl
HSL rang modeli - RGB modelining silindrsimon vakili. HSL ranglarni odatdagi RGB ga qaraganda intuitiv va tushunarli tarzda aks ettiradi. Model ko'pincha ishlatiladi grafik dasturlar, rang tanlashda va tasvirni tahlil qilish uchun.
HSL Hue (rang / rang), Doygunlik (to'yinganlik), Yorug'lik / Yorqinlik (nashrida bilan adashtirmaslik uchun engillik / engillik / yorqinlik) ni anglatadi.
Hue rang g'ildiragidagi rangning o'rnini belgilaydi (0 dan 360 gacha). Doygunlik bu to'yinganlikning foizidir (0% dan 100% gacha). Yengillik - bu yengillikning ulushi (0% dan 100% gacha).
- h1 (rang: hsl (120, 100%, 50%);) / * yashil * /
- h2 (rang: hsl (120, 100%, 75%);) / * och yashil * /
- h3 (rang: hsl (120, 100%, 25%);) / * to'q yashil * /
- h4 (rang: hsl (120, 60%, 70%);) / * pastel yashil * /
HSL IE9 +, Firefox, Chrome, Safari va Opera 10+ da qo'llab-quvvatlanadi.
HSLA
RGB / RGBA-ga o'xshash HSL ob'ektning xiralashganligini aniqlash uchun alfa kanali bo'lgan HSLA rejimiga ega.
HSLA rang qiymati quyidagicha berilgan: hsla (rang, to'yinganlik, yengillik, alfa). Alfa - bu 0,0 (to'liq shaffof) dan 1,0 gacha (to'liq shaffof bo'lmagan) raqam.
- h1 (rang: hsl (120, 100%, 50%);) / * yashil normal HSLda * /
- h2 (rang: hsla (120, 100%, 50%, 1);) / * HSLAda bir xil yashil rang, chunki shaffoflik: 100% * /
- h3 (rang: hsla (120, 100%, 50%, 0.5);) / * xira: 50% * /
- h4 (rang: hsla (120, 100%, 50%, .155);) / * xira: 15,5% * /
- h5 (rang: hsla (120, 100%, 50%, 0);) / * to'liq shaffof * /
CMYK
CMYK rangli modeli ko'pincha rangli bosib chiqarish bilan, bosib chiqarish bilan bog'liq. CMYK (RGB-dan farqli o'laroq) subtractiv modeldir, ya'ni yuqori qiymatlar quyuq ranglar bilan bog'liq.
Ranglar qora (Key / blacK) qo'shilishi bilan Cyan, Magenta, Yellowning nisbati bilan belgilanadi.
CMYK-da rangni aniqlaydigan har bir raqam rang kombinatsiyasini tashkil etuvchi berilgan rang siyohining foizini, aniqrog'i, berilgan rangdagi plyonkada (yoki to'g'ridan-to'g'ri CTP holatida bosma plastinada) fotosetterda ko'rsatilgan raster nuqta hajmini anglatadi.
Masalan, PANTONE 7526 ni olish uchun 9 qism siyan, 83 qism qizil, 100 sariq va 46 qora ranglarni aralashtiring. Buni quyidagicha ko'rsatish mumkin: (9,83,100,46). Ba'zan ular bunday belgilarni ishlatadilar: C9M83Y100K46, yoki (9%, 83%, 100%, 46%) yoki (0.09 / 0.83 / 1.0 / 0.46).
HSB / HSV
HSB (HSV deb ham ataladi) HSLga o'xshaydi, ammo ular ikki xil rang modellari. Ularning ikkalasi ham silindrsimon geometriyaga asoslangan, ammo HSB / HSV "hexcone" modeliga asoslangan, HSL esa "bi-hexcone" modeliga asoslangan. Rassomlar ko'pincha ushbu modeldan foydalanishni afzal ko'rishadi, odatda HSB / HSV moslamasi ranglarning tabiiy idrokiga yaqinroq deb qabul qilinadi. Xususan, Adobe Photoshop-da HSB rangli modeli qo'llaniladi.
HSB / HSV Hue (rang / rang), Saturation (to'yinganlik), Yorqinlik / Qiymat (nashrida / qiymat) degan ma'noni anglatadi.
Hue rang g'ildiragidagi rangning o'rnini belgilaydi (0 dan 360 gacha). Doygunlik bu to'yinganlikning foizidir (0% dan 100% gacha). Yorqinlik - bu nashrida ulushi (0% dan 100% gacha).
XYZ
XYZ rang modeli (CIE 1931 XYZ) bu sof matematik makon. RGB, CMYK va boshqa modellardan farqli o'laroq, XYZ-da asosiy komponentlar "xayoliy" dir, ya'ni siz X, Y va Z ni har qanday ranglar to'plamiga aralashtirish uchun bog'lay olmaysiz. XYZ deyarli hamma boshqalarning asosiy modelidir rangli modellartexnik sohalarda ishlatiladi.
LAB
LAB rang modeli (CIELAB, "CIE 1976 L * a * b *") CIE XYZ maydonidan hisoblanadi. Laboratoriyani ishlab chiqishda, rang o'zgarishini inson idrok etilishi nuqtai nazaridan (XYZ bilan taqqoslaganda) ko'proq chiziqli bo'ladigan, ya'ni rang makonining turli mintaqalarida rang koordinatalari qiymatlarining bir xil o'zgarishi bir xil rang o'zgarishi hissiyotini hosil qiladigan rang oralig'ini yaratish edi.
\u003e\u003e Ranglarni boshqarish
Hexadecimal RGB rang qiymatlari
Rangni tavsiflash va qayta ishlash usullari bir-biridan qaysi yakuniy taqdimot uchun mo'ljallanganligi bilan farq qiladi. Keling, masalan, bosib chiqarish va kompyuter monitorlari uchun ranglarning ko'rinishini taqqoslaylik. Birinchi holda, asos olinadi oq keyinchalik uchta asosiy rang qo'llaniladigan qog'oz rangi: ko'k, siyohrang va sariq... Bir-biriga va turli xil nisbatlarda qog'ozning oq rangiga aralashgan holda, ushbu uchta asosiy rang, sof qora rangdan tashqari, turli xil rang soyalarini beradi yoki ranglarning to'liq yo'qligida qog'ozning oq rangini beradi. Agar biz ularga qora rang qo'shsak, biz olamiz CMYK- etishmayotgan ranglarni oqdan olib tashlash orqali kerakli rangni olishda rang berish usuli.
Ikkinchi holda, asos olinadi qora monitor ekranining rangi, uning har bir katakchasi uchta rangning birida yonib turadi: qizil- qizil, yashil-yashil va ko'k- ko'k. Keyin, hech qanday porlash yo'q bo'lganda, biz sof qora ekran rangini olamiz va kerakli ranglarning har biri uchta rangning har biriga nisbati bilan o'rnatiladi. Bunday holda, biz olamiz RGB- ranglarni uzatish usuli. Asosiy ranglar oralig'ida bo'lishi mumkin 0
oldin 255
, yoki dan 0%
oldin 100%
, yoki o'n oltinchi qiymat sifatida ifodalanishi mumkin. Quyidagi rasmda siz asosiy ranglarni aralashtirish natijalarini ko'rishingiz mumkin.
Onaltılık sanoq tizimi, raqamlar qatoridagi kasr sonidan farqli o'laroq, o'nta raqamga ega emas, balki o'n oltita - shuning uchun nom. Shunga ko'ra, ikki raqamli kombinatsiyalarning takrorlanmaydigan variantlari faqat - bo'lishi mumkin 256 , keyin bir qator raqamlarni davom ettirish uchun 9 dan harflar A oldin Fshuning uchun seriya shunday bo'ladi -
| 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F |
Bunday holda, rang uchta o'n oltinchi raqamlar bilan belgilanadi, ularning har biri ikkita raqamdan iborat. Birinchi raqam intensivlikni aniqlaydi qizil ranglar, o'rtacha yashil, oxirgi narsa- ko'k ranglar. Barcha raqamlar oralig'idagi qiymatlarni qabul qilishi mumkin 00 oldin FF (0 dan 255 gacha). Masalan: yashil rang quyidagicha berilgan # 00FF00, qizil o'xshash # FF0000, ko'k - o'xshash # 0000FF, oq kabi #FFFFFF, rang yoki qora rangning to'liq yo'qligi quyidagicha berilgan #000000 .
Quyidagi shaklda siz uchta rangning har biri uchun har qanday o'n oltinchi qiymatlarni o'rnatishingiz va ularni chiqish maydoniga bosish orqali ularni aralashtirish natijasini ko'rishingiz mumkin.
Ba'zilariga misollar o'n oltinchi qiymatlar RGB ranglari: qizil, ko'k va yashil ranglar.
| ko'rinish | kod | ko'rinish | kod | ko'rinish | kod | ko'rinish | kod | ko'rinish | kod | ko'rinish | kod |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | # A00000 | #002000 | # 00A000 | #000020 | # 0000A0 | ||||||
| #300000 | # B00000 | #003000 | # 00B000 | #000030 | # 0000B0 | ||||||
| #400000 | # C00000 | #004000 | # 00C000 | #000040 | # 0000C0 | ||||||
| #500000 | # D00000 | #005000 | # 00D000 | #000050 | # 0000D0 | ||||||
| #600000 | # E00000 | #006000 | # 00E000 | #000060 | # 0000E0 | ||||||
| #700000 | # FF0000 | #007000 | # 00FF00 | #000070 | # 0000FF |
String harflari yordamida rangni belgilash
Foydalanish qulayligi uchun ba'zi ranglar va ularning kombinatsiyalariga barcha brauzerlar tomonidan tanilgan nomlar berildi va ularning ko'plarini nomlar bilan belgilash mumkin bo'ldi. Quyidagi jadvalda ba'zi rang nomlari ko'rsatilgan:
| ko'rinish | ism | ko'rinish | ism | ko'rinish | ism | ko'rinish | ism |
| Oq | Qizil | apelsin | Sariq | ||||
| Yashil | Moviy | Siyohrang | Qora | ||||
| Aliceblue | Antikvar | Akva | Akuamarin | ||||
| Azure | Bej | Bisque | Blanchedalmond | ||||
| Moviy rang | jigarrang | Burlivud | Cadetblue | ||||
| Chartreuse | Shokolad | Marjon | Cornflowerblue | ||||
| Makkajo'xori | Qip-qizil | Moviy | Qora moviy | ||||
| Darkcyan | Darkgoldenrod | Darkgray | To'q yashil | ||||
| Darkxaki | Darkmagenta | Darkolivegreen | Darkorange | ||||
| Darkorxid | Qorong'i | Darksalmon | Qorong'i rang | ||||
| Darkslateblue | Darkslategray | Darkturquoise | Darkviolet | ||||
| Deeppink | Deepskyblue | Dimgray | Dodgerblue | ||||
| Olovli g'isht | Gulli oq | O'rmonzor | Fushiya | ||||
| Gainsboro | Ghostwhite | Oltin | Goldenrod | ||||
| Kulrang | Yashil sariq | Obinavot | Hotpink | ||||
| Indianred | Indigo | Fil suyagi | Xaki | ||||
| Lavanda | Lavanta mavisi | Limonxiffon | Yengil moviy | ||||
| Lightcoral | Lightcyan | Lightcoldenrodyellow | Yashil | ||||
| Lightgray | Lightpink | Lightsalmon | Yorug'lik | ||||
| Yorug'lik ko'k | Lightslategrayray | Yengil moviy | Yengil sariq | ||||
| Laym | Ohak yashil | Zig'ir mato | Magenta | ||||
| Maroon | Mediumaquamarin | O'rta ko'k | Mediumorxid | ||||
| Mediumpurple | O'rta dengiz | O'rta ko'k | O'rta yashil rang | ||||
| O'rta turkuaz | O'rta violetred | Yarim tunda ko'k | Yalpiz krem | ||||
| Mytiroza | Navajovit | Dengiz kuchlari | Oldlace | ||||
| Zaytun | Olivedrab | To'q rangda | Orkide | ||||
| Palegoldenrod | Palegreen | Paleturquoise | Palevioletred | ||||
| Papayaviplik | Shaftoli | Peru | Pushti | ||||
| Olxo'ri | Kukun | Rosybrown | Royalblue | ||||
| Egar | Dengiz ekrani | Dengiz qobig'i | Sienna | ||||
| Kumush | Moviy osmon | Qisqichbaqa | Slategray | ||||
| Qor | Springgreen | Chelik ko'k | Tan | ||||
| Choy | Qushqo'nmas | Pomidor | Turkuaz | ||||
| binafsha | Bug'doy | Whitesmoke | Sariq yashil |
Xavfsiz rang tanlash vositasidan foydalanish
Afsuski turli xil platformalar, turli xil tizim sozlamalari bilan ranglarning to'g'ri ko'payishi muammo hisoblanadi. Gap shundaki, brauzer har doim hujjat rang palitrasini moslashtirishga harakat qiladi tizim sozlamalari va o'z-o'zini aralashtirish va rang almashtirish orqali imkoniyatlarni nazorat qilish. Natijada, ba'zida foydalanuvchi veb-ustaning unga nimani ko'rsatmoqchi bo'lganini aniq ko'rmaydi. Ushbu vaziyatdan chiqish yo'li palitradan foydalanishda topildi, uning har bir rangi har xil platformadagi barcha brauzerlar tomonidan teng ravishda taqdim etilishi kafolatlangan. Bu shunday deb nomlangan kafolatlangan palitrasi, shuningdek, deyiladi xavfsiz palitrasi. Ushbu palitrada rang tarkibiy qismlari quyidagi qiymatlarni o'z ichiga olgan ranglarni o'z ichiga oladi: 00 ,33 ,66 ,99 , CC,FF, iloji boricha 216 ularning kombinatsiyalari.
| ko'rinish | kod | ko'rinish | kod | ko'rinish | kod | ko'rinish | kod | ko'rinish | kod | ko'rinish | 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 |
Chizilgan rasmga diqqat bilan qarang. Ochilgan oynaning orqa fonida yarim shaffof qilingan. Bu juda keng tarqalgan dizayn hiyla-nayrangidir. Keling, buni qanday amalga oshirish mumkinligi haqida o'ylab ko'raylik.
Vazifa
O'zaro faoliyat brauzerni yarim shaffof rangga aylantiring.
Qaror
Ushbu vaziyatda birinchi fikr shaffofligi allaqachon o'rnatilgan fon uchun png24-rasmdan foydalanishdir. Ammo bu rasm mutlaqo ortiqcha. Sizsiz buni mukammal qilishingiz mumkin (va shuning uchun serverga keraksiz so'rovsiz). Keling, eng maqbul echimni topishga harakat qilaylik.
Ikkinchi fikr - foydalanish. Ammo bu holda bu juda qulay emas. Axir, nafaqat fon shaffof bo'lib qoladi, balki yozuvlar ham bo'ladi. Ha, aslida butun oyna birdaniga.
Albatta, siz qo'shimcha idishni qo'shib, shaffoflikni faqat unga tatbiq qilishingiz mumkin, ammo bu HTML element faqat bezak uchun bo'ladi va ortiqcha bo'lishi aniq. Sizsiz buni qila olasizmi?
Albatta mumkin! Agar siz RGBA dan foydalansangiz.
RGBA rang tavsifi formati
CSS3 sizga RGB va RGBA funktsiyalari yordamida rangni belgilashga imkon beradi. Bunday holda, biz bitta bayt ajratilgan har bir rang komponentining qismini (0 dan 255 gacha, to'satdan kim bilmaydi) ko'rsatishimiz kerak.
Ushbu holat uchun sintaksis juda oddiy:
Fon: rgb (0, 255, 0); / * sof yashil * /
RGBA uchun to'rtinchi parametr qo'shiladi - alfa shaffofligi (0 dan 1 gacha).
Fon: rgba (255, 0, 0, 0.5); / * 50% shaffoflik bilan toza qizil rang * /
Mana, bizning muammomizning echimi. Rgba yordamida fon rangini belgilash kifoya va hamma narsa bizga kerakli ko'rinishga ega bo'ladi. Keraksiz rasmlar va elementlar yo'q!
Ushbu raqamlarni qaerdan olsam bo'ladi?
Fotoshopda ko'z tomchilari vositasi yordamida rang tarkibiy qismlarini ko'rishingiz mumkin
O'zaro faoliyat brauzerning muvofiqligi haqida
RGB funktsiyasi RGBA-dan ancha qadimgi va CSS2 standartidan beri mavjud bo'lganligi sababli, siz eng qadimiy brauzerlardan himoya qilish uchun quyidagi takroriy qurilmani ishlatishingiz mumkin:
SomeBlock (fon: rgb (255, 0, 0); fon: rgba (255, 0, 0, 0.5);)
Ushbu yondashuv bilan zamonaviy brauzerlarning bobolari shaffoflikka ega bo'lmaydi, lekin rangning o'zi to'g'ri bo'lib qoladi.
IE haqida alohida-alohida g'amxo'rlik qilishimiz kerak. Eshaklar RGBA-ni 8-versiyaga qadar tushunmaydi.
Har doimgidek: yer dehqonlarga, fabrikalar ishchilarga, eshaklar esa tayoqchaga! Sifatida .
Albatta, jangovar sharoitda biz ushbu qoidani biz ulaydigan alohida CSS-ga joylashtirdik.
SomeBlock (fon: shaffof; filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr \u003d # 80ff0000, endColorstr \u003d # 80ff0000); kattalashtirish: 1;)
Boshlanish va tugatish ranglarini bir xil (ff0000 - qizil) belgilash va bu filtrdagi gradient uchun alfa kanalni o'rnatishingiz mumkinligi misolida (masalan, 80 qiymat).
Malumot uchun: filtr foydalanadi o'n oltinchi tizim va to'liq shaffof bo'lmagan rang FF kodiga mos keladi (o'nlikdagi 255 ga teng). Shunga ko'ra, o'n oltinchi o'nlik o'nlik 128, ya'ni 50% shaffoflik.
Qabul qilingan joy:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Chrome
Rangni aniqlash uchun CSS rang kodlari ishlatiladi. Odatda rang kodlari yoki rang qiymatlari elementning old fonida (masalan, matn rangi, havola rangida) yoki elementning fonida (fon rangi, blok rangida) rangni belgilash uchun ishlatiladi. Ular shuningdek tugma, hoshiya, marker, hover va boshqa dekorativ effektlarning rangini o'zgartirish uchun ishlatilishi mumkin.
Siz o'zingizning rang qiymatlaringizni turli formatlarda o'rnatishingiz mumkin. Quyidagi jadvalda barcha mumkin bo'lgan formatlar keltirilgan:
Ro'yxatda keltirilgan formatlar quyida batafsilroq tavsiflangan.
CSS ranglari - olti burchakli kodlar
Hexadecimal rang kodi oltita raqamli rang tasviridir. Birinchi ikkita raqam (RR) qizil qiymat, keyingi ikkitasi yashil qiymat (GG) va oxirgi ikkitasi ko'k qiymat (BB).
CSS ranglari - qisqa olti burchakli kodlar
Qisqa olti burchakli kod olti raqamli yozuvlarning qisqaroq shakli. Ushbu formatda har bir raqam takrorlanib, ekvivalent olti xonali rang qiymatini hosil qiladi. Masalan: # 0F0 # 00FF00 ga aylanadi.
Hexadecimal qiymati har qanday grafikadan olinishi mumkin dasturiy ta'minotmasalan Adobe Photoshop, Core Draw va boshqalar.
CSS-dagi har bir o'n oltinchi rang kodi oldida "#" xash belgisi qo'yiladi. Quyida o'n oltinchi yozuvlardan foydalanishga misollar keltirilgan.
CSS ranglari - RGB qiymatlari
RGB qiymati rgb () xususiyati yordamida o'rnatiladigan rang kodidir. Ushbu xususiyat uchta qiymatni oladi, ularning har biri qizil, yashil va ko'k uchun. Qiymat 0 dan 255 gacha bo'lgan butun son yoki foiz bo'lishi mumkin.
Eslatma: barcha brauzerlar rgb () rang xususiyatini qo'llab-quvvatlamaydi, shuning uchun uni ishlatish tavsiya etilmaydi.
Quyida RGB qiymatlari yordamida bir nechta ranglarni ko'rsatadigan misol keltirilgan.
Rang kodlari ishlab chiqaruvchisi
Bizning xizmatimizdan foydalanib siz millionlab rang kodlarini yaratishingiz mumkin.
Xavfsiz brauzer ranglari
Quyida 216 rangdan iborat jadval mavjud, ular eng xavfsiz va kompyuterdan mustaqil. Ushbu CSS ranglari 000000 dan FFFFFF o'naligiga qadar o'zgarib turadi. Ulardan foydalanish xavfsizdir, chunki ular 256 rang palitrasi bilan ishlashda barcha kompyuterlarning ranglarini to'g'ri ko'rsatishini ta'minlaydi.
| CSS "xavfsiz" rangli jadval | |||||
| #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 |
