RGB kul rang. HTML darslik. RGB ranglari. Xavfsiz ranglar palitrasi. String Literals yordamida rangni belgilash

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 va ingliz tilidagi rang nomlari bilan ifodalanadi.

Rangli tasvirni yaratishda asosiy muammo har xil turdagi kompyuterlar, monitorlar va brauzerlarda ranglarni to'g'ri ko'paytirishdir. 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

Jadval siyohrang ranglar va uning soyalari

Jadval kulrang ranglar va uning soyalari

CSS-dagi rang kodlari ranglarni belgilash uchun ishlatiladi. Odatda, rang kodlari yoki rang qiymatlari elementning oldingi rangi (masalan, matn rangi, havola rangi) yoki elementning fon rangi (fon rangi, blok rangi) uchun rangni o'rnatish uchun ishlatiladi. Ular tugma, chegara, marker, kursor va boshqa dekorativ effektlarning rangini o'zgartirish uchun ham ishlatilishi mumkin.

Rang qiymatlaringizni turli formatlarda belgilashingiz mumkin. Quyidagi jadvalda barcha mumkin bo'lgan formatlar ro'yxati keltirilgan:

Ro'yxatda keltirilgan formatlar quyida batafsilroq tavsiflanadi.

CSS ranglari - olti burchakli kodlar

O'n oltilik rang kodi rangning olti xonali ifodasidir. Birinchi ikkita raqam (RR) qizil qiymatni, keyingi ikkitasi yashil qiymatni (GG) va oxirgi ikkitasi ko'k qiymatni (BB) ifodalaydi.

CSS ranglari - qisqa olti burchakli kodlar

Qisqa olti burchakli rang kodi olti belgili yozuvning qisqaroq shaklidir. Ushbu formatda har bir raqam ekvivalent olti xonali rang qiymatini hosil qilish uchun takrorlanadi. Masalan: #0F0 #00FF00 bo'ladi.

O'n oltilik qiymat Adobe Photoshop, Core Draw va boshqalar kabi har qanday grafik dasturlardan olinishi mumkin.

CSS-dagi har bir o'n oltilik rang kodidan oldin "#" xesh belgisi bo'ladi. Quyida o'n oltilik yozuvlardan foydalanish misollari keltirilgan.

CSS ranglari - RGB qiymatlari

RGB qiymati rgb() xususiyati yordamida oʻrnatiladigan rang kodi. Bu xususiyat uchta qiymatni oladi: qizil, yashil va ko'k uchun bittadan. 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 qiymatlaridan foydalangan holda bir nechta ranglarni ko'rsatadigan misol keltirilgan.

Rang kodlari generatori

Bizning xizmatimizdan foydalanib, millionlab rang kodlarini yaratishingiz mumkin.

Brauzer uchun xavfsiz ranglar

Quyida eng xavfsiz va kompyuterdan mustaqil bo'lgan 216 ta rangning jadvali keltirilgan. CSS-dagi bu ranglar 000000 dan FFFFFF o'n oltilik kodlari oralig'ida. Ulardan foydalanish xavfsiz, chunki ular 256 rang palitrasi bilan ishlashda barcha kompyuterlar rangni to'g'ri ko'rsatishini ta'minlaydi.

HTML ranglari
HTML ranglari va ularni belgilash usullari

HTMLda rangni belgilashning ikki yo'li mavjud:

1. Rang nomidan foydalanib,
2. Ranglar o'n oltilik formatda ko'rsatilgan RGB tizimidan foydalanish.

Rang nomi

Ism HTMLdagi ranglar qizil yoki yashil kabi inglizcha so'zlar bilan ko'rsatilgan. Rang nomi HTML teg atributining qiymati sifatida ishlaydi. Gul nomlari juda ko'p, ushbu maqolada biz faqat asosiylarini ko'rib chiqamiz.

Odatda HTMLda rang o'rnatish uchun ikkita atribut ishlatiladi:

1. Atribut rang = "rang_nomi" - matn rangi,
2. Atribut bgcolor="rang_nomi" - fon rangi.

Rang atributlaridan foydalanishga misollar:
color="red" - matnga qizil rang berish,
bgcolor="yashil" - fonga yashil rang berish.

Asosiy HTML rang nomlari jadvali:

O‘n oltilik sanoq sistemasi

Kundalik hayotda biz 0 dan 9 gacha bo'lgan o'nlik sanoq tizimidan foydalanamiz. Dasturchilar va dizaynerlar ko'pincha 0 dan 15 gacha bo'lgan o'n oltilik sanoq tizimidan foydalanadilar, bu erda:

10 = A
11 = B
12 = C
13 = D
14 = E
15 = F

Bizning ko'rishimizga ko'rinadigan deyarli har bir rang va soya o'n oltilik tizimda yozilishi mumkin, masalan, o'n oltilik tizimdagi qizil rang ff0000 ga teng bo'ladi.

color="red" - qizil rang, nomi bo'yicha,
color="#ff0000" — qizil rang, o'n oltilik sanoq sistemasida.

HTMLda o'n oltilik raqamdan oldin atribut qiymatida # xesh belgisi qo'yiladi.

RGB

O'n oltilik sanoq tizimidan foydalangan holda HTMLda ranglarni belgilashni boshlashdan oldin, avval R G B kabi narsalarni bilib olishingiz kerak.

RGB R ed G reen B lue (Red Green Blue) so'zlarining qisqartmasi.

O'n oltilik tizimda yozilgan HTML tilidagi rang 00 00 00 raqamlarining uchta blokidan iborat bo'lib, bu erda har bir blok RGB ranglaridan biri uchun javobgar bo'ladi, birinchi blok qizil uchun, ikkinchisi yashil va uchinchisi ko'k uchun. Raqamlar 00 dan ff gacha bo'lishi mumkin.

Bu yerda, o'nlik kasrlarda ff 255 ga teng.

RGB sxemasi:
Qizil - 00 dan ff gacha
Yashil - 00 dan ff gacha
Moviy - 00 dan ff gacha

Natijada, biz olti xonali 000000 raqamini olamiz, bu erda birinchi ikkita raqam qizil rang uchun, ikkinchi ikkita raqam yashil rang uchun, uchinchi ikkita raqam ko'k rang uchun javobgardir.

Agar qizil rang olishni istasak, u holda ff0000, yashil rang 00ff00, ko'k rang 0000ff yozamiz. Misol uchun, agar biz quyuq qizil rangga ega bo'lishni istasak, unda biz birinchi raqamlar blokini va ff o'rniga kamaytirishimiz kerak. (o'nlik sanoq sistemasida 255 ga teng), masalan, 96 ni yozing (o'nlik kasrlarda 150 ga teng).

Aniqlik uchun biz ranglar va ularning o'n oltilik kodiga misollar keltiramiz:

HTMLda ranglarni aralashtirish

Agar siz maktabda rasm chizish darslarini o'tkazib yubormagan bo'lsangiz, qizil va yashil ranglarni teng ravishda aralashtirish orqali siz sariq rangga ega bo'lishingiz mumkinligini eslaysiz,
qizil rangga bir oz yashil qo'shsangiz, to'q sariq rangga ega bo'lishingiz mumkin va hokazo.

O'n oltilik va RGB ranglarini ham aralashtirish mumkin:

O'n oltilik sanoq tizimi va RGB bilan tajriba o'tkazish orqali siz oxir-oqibat uni o'rganasiz va o'zingizga kerakli rangni tanlay olasiz.

Afsuski, veb-saytda ta'm sezgilarini ko'rsatish hali mumkin emas. Lekin bu ranglar yordamida to'liq qoplanishi mumkin. Axir, html ranglari millionlab soyalarning istalganini ko'rsatishga imkon beradi. Shunday qilib " rangli qalamlar Uning to'plamida ettitadan ko'proq.

Html ichida rang sxemasi

Htmlda rang bir necha formatda ko'rsatilishi mumkin:

1. O'n oltilik qiymat sifatida - o'n oltilik sanoq tizimida ko'rsatilgan kod ishlatiladi. Htmldagi bunday rang kodlari uch juft o'n oltilik raqamlardan iborat. Har bir juft soyaning asosiy rangi bilan to'yinganligi uchun javobgardir:

• Birinchi raqamli juftlik qizil rang uchun javobgardir;
• Ikkinchi juftlik yashil rang tarkibi uchun;
• Ikkinchisi ko'k rangli tarkibga ega.

Kodning boshida (raqamlardan oldin) xesh belgisi qo'yiladi. Bu o'n oltilik rang kodi. Bu sanoq tizimida 1 dan 9 gacha raqamlardan tashqari lotin alifbosi (A, B, C, D, E, F) harflaridan ham foydalaniladi.

Misol uchun, html-dagi oq rang kodi #FFFFFF kabi ko'rinadi:

2. Kalit so'z - HTML hozirda taxminan 147 ta kalit so'zni qo'llab-quvvatlaydi. Ammo bu so'zlarning hammasi ham o'ziga xos emas. Ulardan ba'zilari bir xil rang soyasiga ishora qiladi.

Kul rang ikkita kalit so'z bilan ifodalanadi: kulrang va kulrang . Ularning o'n oltilik kodi (HEX) bir xil #808080 qiymati bilan berilgan.

Misol:

#808080

3. RGB formatida - html-dagi bu rang kodlash 0 dan 255 gacha bo'lgan oraliqda o'rnatilgan uchta qiymatdan foydalanishga asoslangan. Ularning har biri asosiy ranglardan biri bilan rangning to'yinganligini aniqlaydi:

• R - qizil (qizil);
• G - yashil (yashil);
• B - ko'k (ko'k).

RGB formatidagi rang raqami quyidagi shaklda yoziladi: rgb(0, 210, 100).

fon rangi: rgb (100,186,43)

4. RGBA formatida - bu takomillashtirilgan RGB formati bo'lib, to'rtinchi qiymat rangning shaffofligini 0 dan 1 gacha o'nlik kasr sifatida belgilaydi.

Foydalanish misoli:

fon rangi: rgba (100,86,143,0,2)

fon rangi: rgba (100,86,143,0,5)

fon rangi: rgba (100,86,143,0,8)

fon rangi: rgba (100,86,143,1)

HTML rang jadvallari va rang generatorlari

Rangni sozlash formatlarining bunday keng assortimenti bilan chalkashib ketish oson. Shuning uchun maxsus rangli jadval ixtiro qilindi. U barcha asosiy rang standartlarida muvofiqlik kodlari bilan rang soyalarining 147 ta asosiy nomlarini taqdim etadi. Bundan tashqari, har bir maydon vizual rang tanlash uchun bar bilan jihozlangan. Ushbu jadvallardan biri colorscheme.ru veb-saytida keltirilgan:

Ammo mos keladigan bunday tuzilma bilan ham, to'g'ri soyani tanlash qiyin bo'lishi mumkin. Rang kodlari jadvali sizga kerak bo'lgan kodni o'z ichiga olishi haqiqat emas.

Ushbu to'siqni engib o'tish va to'g'ri soyani tanlashni iloji boricha osonlashtirish uchun interaktiv veb-xizmatlar ishlab chiqilgan. Ularning foydalanuvchi interfeysi bir-biridan biroz farq qilishi mumkin.

Html-color-codes.info veb-saytida rang generatori quyidagicha ko'rinadi:

Va color-picker.appsmaster.co xizmatida ushbu vosita biroz boshqacha tarzda amalga oshiriladi:

Jeneratördagi har bir rangning to'yinganligi maxsus slayderlar yordamida o'rnatiladi. Vizual ravishda, soya chap tomonda ramka va to'rtburchakning rangi bilan ko'rsatiladi. Pastki qismida 3 ta maydon rang kodini asosiy formatlarda aks ettiradi.

Lekin rang generatori nafaqat ixtisoslashgan saytlarda mavjud. Deyarli barcha grafik muharrirlar shunga o'xshash vosita bilan jihozlangan. Masalan, Photoshop:

Rang bilan ishlashda xavfsizlik choralari

Va bu uzoq vaqt oldin, faqat 256 rangni qo'llab-quvvatlovchi video kartalar davrida edi. O'sha uzoq vaqtlarda operatsion tizimlar ma'lum miqdordagi sakkiz bitli soyalarni buzilishsiz ko'rsatishi mumkin edi.

Keyin xavfsiz ranglarning ajoyib jadvali ishlab chiqildi. U o'sha davrdagi brauzerlarning birortasida buzilmasdan ko'rsatilishi mumkin bo'lgan 216 ta soyani ko'rsatdi. Va shu kungacha " ajoyib qo'lyozma» hali ham ba'zi manbalarda mavjud:

Hozirgi kunda hamma narsa o'zgardi. Shuning uchun html-da rang bilan ishlashda barcha xavfsizlik qoidalari butunlay bekor qilinadi. Axir, zamonaviy kompyuter uskunalari 16 milliondan ortiq turli xil soyalarni qo'llab-quvvatlaydi. Va 216 ta xavfsiz rang unutilib ketdi.

Ushbu ma'lumotlar statistik ma'lumotlar bilan to'liq tasdiqlangan. Unga ko'ra, 2014 yilda foydalanuvchilarning atigi 0,5 foizi atigi 256 ta rangni qo'llab-quvvatlaydigan kompyuterlarga ega.

Ranglar uyg'unligi asoslari

Hammamiz ham tabiiy uyg'un ta'm hissi bilan ta'minlanmagan. Shuning uchun, to'g'ri rangni tanlash haqiqiy muammo bo'lishi mumkin. Ammo, ilm-fanga maqtovlar bo'lsin, u hatto ranglar uyg'unligini bir nechta sxemalar shaklida tasvirlashga muvaffaq bo'ldi. Ularning barchasi rang g'ildiragidan foydalanishga asoslangan. Html ichida ranglarni uyg'un tanlash uchun sxemalar.

Vlad Merzhevich

HTMLda rang ikki usuldan biri bilan belgilanadi: o'n oltilik kod yordamida va ma'lum ranglar nomi bilan. O'n oltilik sanoq tizimiga asoslangan usul asosan qo'llaniladi, chunki u eng universal hisoblanadi.

O'n oltilik ranglar

HTML ranglarni belgilash uchun o'n oltilik raqamlardan foydalanadi. O‘nlik sanoq sistemasidan farqli o‘laroq, o‘nlik sanoq sistemasi, 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 lotin harflari bilan almashtiriladi. Jadvalda 6.1 o'nlik va o'n oltilik sonlar o'rtasidagi muvofiqlikni ko'rsatadi.

O‘n oltilik sistemada 15 dan katta sonlar ikkita sonni birlashtirish orqali hosil qilinadi (6.2-jadval). Masalan, o'nlik sanoqdagi 255 soni o'n oltilik sanoqdagi FF soniga mos keladi.

Sanoq tizimini aniqlashda chalkashliklarga yo'l qo'ymaslik uchun o'n oltilik sondan oldin # xesh belgisi qo'yiladi, masalan #aa69cc. Bunday holda, ish muhim emas, shuning uchun #F0F0F0 yoki #f0f0f0 yozish joiz.

HTMLda ishlatiladigan odatiy rang shunday ko'rinadi.

Bu yerda veb-sahifaning fon rangi #FA8E47 ga o'rnatiladi. Raqam oldida # xesh belgisi uning o'n oltilik ekanligini bildiradi. Birinchi ikki raqam (FA) rangning qizil komponentini, uchinchidan to'rtinchi raqamlari (8E) yashil komponentni va oxirgi ikki raqam (47) ko'k komponentni belgilaydi. Yakuniy natija bu rang bo'ladi.

Uch rangning har biri - qizil, yashil va ko'k - 00 dan FF gacha qiymatlarni qabul qilishi mumkin, natijada jami 256 ta rang hosil bo'ladi. Shunday qilib, ranglarning umumiy soni 256x256x256 = 16 777 216 kombinatsiya bo'lishi mumkin. Qizil, yashil va ko'k komponentlarga asoslangan rang modeli RGB (qizil, yashil, ko'k; qizil, yashil, ko'k) deb ataladi. Ushbu model qo'shimcha hisoblanadi (qo'shish - qo'shishdan), unda barcha uchta komponentning qo'shilishi oq rangni hosil qiladi.

O'n oltilik ranglarda harakat qilishni osonlashtirish uchun ba'zi qoidalarni hisobga oling.

• Agar rang komponentlarining qiymatlari bir xil bo'lsa (masalan: # D6D6D6), natijada kul rang bo'ladi. Raqam qanchalik baland bo'lsa, rang shunchalik ochiq bo'ladi, qiymatlar #000000 (qora) dan #FFFFFF (oq) gacha.
• Qizil komponent maksimal (FF) qilinsa va qolgan komponentlar nolga o'rnatilsa, yorqin qizil rang hosil bo'ladi. Qiymati #FF0000 bo'lgan rang eng qizil qizil rangdir. Xuddi shu narsa yashil (# 00FF00) va ko'k (# 0000FF) uchun ham amal qiladi.
• Sariq (#FFFF00) qizil va yashil ranglarni aralashtirish orqali hosil bo'ladi. Bu asosiy ranglar (qizil, yashil, ko'k) va qo'shimcha yoki qo'shimcha ranglarni taqdim etadigan rang g'ildiragida aniq ko'rinadi (6.1-rasm). Bularga sariq, zangori va binafsha (shuningdek, magenta deb ataladi) kiradi. Umuman olganda, har qanday rangni unga yaqin ranglarni aralashtirish orqali olish mumkin. Shunday qilib, ko'k (# 00FFFF) ko'k va yashil ranglarni birlashtirish orqali olinadi.

Guruch. 6.1. Rangli doira

O'n oltilik qiymatlarga asoslangan ranglar empirik tarzda tanlanishi shart emas. Shu maqsadda turli rangdagi modellar bilan ishlay oladigan grafik muharrir, masalan, Adobe Photoshop mos keladi. Shaklda. 6.2-rasmda ushbu dasturda rang tanlash oynasi ko'rsatilgan, natijada joriy rangning o'n oltilik qiymati chiziq bilan ko'rsatilgan. Siz uni nusxalashingiz va kodingizga joylashtirishingiz mumkin.

Guruch. 6.2. Photoshop-da ranglarni tanlash oynasi

Veb ranglari

Agar siz monitorning rang berish sifatini 8 bitga (256 rang) o'rnatgan bo'lsangiz, u holda bir xil rang turli brauzerlarda turlicha ko'rsatilishi mumkin. Buning sababi, brauzer o'z palitrasi bilan ishlaganda va uning palitrasida bo'lmagan rangni ko'rsatolmaganda, grafiklarni ko'rsatish usuli. Bunday holda, rang boshqa, unga yaqin bo'lgan piksellar kombinatsiyasi bilan almashtiriladi, unga taqlid qiladi. Rang turli xil brauzerlarda bir xil bo'lishini ta'minlash uchun veb-ranglar palitrasi taqdim etildi. Veb ranglari - har bir komponent - qizil, yashil va ko'k - oltita qiymatdan biriga o'rnatilgan ranglar - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Ushbu komponentning o'n oltilik qiymati qavs ichida ko'rsatilgan. Barcha mumkin bo'lgan kombinatsiyalardan ranglarning umumiy soni 6x6x6 - 216 rangni beradi. Misol veb rangi #33FF66.

Veb rangining asosiy xususiyati shundaki, u barcha brauzerlarda bir xil ko'rinadi. Hozirgi vaqtda monitorlar sifatining yaxshilanishi va ularning imkoniyatlarining kengayishi tufayli veb-ranglarning dolzarbligi juda kichik.

Nomi bo'yicha ranglar

Raqamlar to'plamini eslab qolishning oldini olish uchun uning o'rniga tez-tez ishlatiladigan ranglarning nomlaridan foydalanishingiz mumkin. Jadvalda 6.3 mashhur rang nomlarining nomlarini ko'rsatadi.

Rangni uning nomi bilan yoki o'n oltilik raqamlar yordamida belgilashingiz muhim emas. Ushbu usullar o'z ta'sirida tengdir. 6.1-misol veb-sahifaning fon va matn ranglarini qanday o'rnatishni ko'rsatadi.

6.1-misol. Fon va matn rangi

Misol matn

Bu misolda fon rangi tegning bgcolor atributi yordamida o'rnatiladi , va matn rangi matn atributi orqali. Turli xillik uchun matn atributi o'n oltilik raqamga o'rnatiladi va bgcolor atributi ajratilgan teal kalit so'ziga o'rnatiladi.