Өнгөт html кодууд. Загварын өнгийг янз бүрийн аргаар тохируулж болно: арван зургаатын тоогоор, нэрээр, RGB, RGBA, HSL, HSLA форматаар

Влад Мержевич

HTML хэл дээр өнгө нь арван арван арван код ашиглах, зарим өнгөний нэрээр хоёр аргын аль нэгээр тодорхойлогддог. Хамгийн түгээмэл арга болох арван зургаатын тооллын системд суурилсан аргыг голчлон ашигладаг.

Арван арван зургаан тоот өнгө

HTML хэл дээрх өнгийг тодорхойлохын тулд арван зургаатын тоонуудыг ашигладаг. Аравтын бутархайн системээс ялгаатай нь нэрнээс нь харахад 16-ын тоон дээр суурилдаг. Тоонууд нь дараах байдалтай байна: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 , A, B, C , D, E, F. 10-аас 15 хүртэлх тоог латин үсгээр сольсон. Хүснэгт 6.1-д аравтын болон аравтын тоонуудын хоорондын уялдаа холбоог харуулав.

Арван арван таван тоот системд 15-аас дээш тооны тоог хоёр тоог нэг болгон нэгтгэн үүсгэнэ (Хүснэгт 6.2). Жишээлбэл, 255 аравтын бутархай нь FF аравтын тоо юм.

Тооны системийн тодорхойлолтод төөрөгдөл гаргахгүйн тулд # хэш тэмдэгтийг 16-тын тооны урд байрлуулна, жишээ нь # aa69cc. Энэ тохиолдолд регистр хамаагүй тул # F0F0F0 эсвэл # f0f0f0 гэж бичихийг зөвшөөрнө.

HTML-д хэрэглэгддэг ердийн өнгө нь иймэрхүү харагдаж байна.

Энд вэб хуудасны дэвсгэр өнгийг # FA8E47 гэж тохируулсан байна. Тооны урд байгаа хэш тэмдэг # нь арван арван тоот гэсэн үг. Эхний хоёр орон (FA) нь өнгөний улаан бүрэлдэхүүнийг тодорхойлдог, гурав, дөрөв дэх орон (8E) нь ногоон, сүүлийн хоёр орон (47) нь цэнхэр өнгөтэй байна. Үүний үр дүнд та ийм өнгө авах болно.

FA + 8E + 47 = FA8E47

Улаан, ногоон, цэнхэр гэсэн гурван өнгө тус бүр нь 00-оос FF хүртэлх утгыг авч, 256 сүүдэртэй болно. Тиймээс өнгөний нийт тоо нь 256x256x256 = 16.777.216 хослол байж болно. Улаан, ногоон, цэнхэр бүрэлдэхүүн хэсгүүдэд суурилсан өнгөт загварыг RGB (улаан, ногоон, цэнхэр; улаан, ногоон, цэнхэр) гэж нэрлэдэг. Энэ загвар нь нэмэлт (нэмэхээс - нэмэх) бөгөөд бүх гурван бүрэлдэхүүн хэсэг нь цагаан өнгөтэй болдог.

Арван арван зургаатын өнгөөр ​​шилжихэд хялбар болгохын тулд зарим дүрмийг анхаарч үзээрэй.

  • Хэрэв өнгөт бүрэлдэхүүн хэсгүүдийн утга ижил байвал (жишээлбэл: # D6D6D6) саарал өнгөтэй болно. Тоо их байх тусам өнгө нь цайвар байх тусам утга нь # 000000 (хар) -аас # FFFFFF (цагаан) хооронд хэлбэлздэг.
  • Хэрэв улаан бүрэлдэхүүнийг дээд тал нь (FF), бусад бүрэлдэхүүн хэсгүүдийг тэг болгож тохируулсан бол тод улаан өнгө үүсдэг. # FF0000 өнгө нь хамгийн улаан байж болох улаан өнгө юм. Ногоон (# 00FF00) болон цэнхэр (# 0000FF) нь мөн адил юм.
  • Шар (#FFFF00) улааныг ногоонтой хольж гаргаж авдаг. Энэ нь үндсэн өнгө (улаан, ногоон, цэнхэр) болон нэмэлт эсвэл нэмэлт өнгийг харуулсан өнгөт дугуй (Зураг 6.1) дээр тодорхой харагдаж байна. Үүнд шар, хөх, нил ягаан (мөн улаан гэж нэрлэдэг) орно. Ер нь ойр орчмын өнгийг холиод ямар ч өнгийг гаргаж авдаг. Тиймээс хөх, ногоон өнгийн хослолоор хөх өнгөтэй (# 00FFFF) гарч ирдэг.

Цагаан будаа. 6.1. Өнгөт тойрог

Арван арван зургаатын өнгийг эмпирик байдлаар сонгох шаардлагагүй. Энэ зорилгоор янз бүрийн өнгөт загвартай ажиллах боломжтой график засварлагч тохиромжтой, жишээлбэл Adobe Photoshop. Зураг дээр. 6.2 нь энэ програмын өнгө сонгох цонхыг харуулж байгаа бөгөөд одоогийн өнгөний үр дүнгийн арван зургаатын утгыг шугамаар дүрсэлсэн болно. Та код руугаа хуулж буулгаж болно.

Цагаан будаа. 6.2. Photoshop дахь өнгө сонгох цонх

Вэб өнгө

Хэрэв та дэлгэцийн өнгөний чанарыг 8 бит (256 өнгө) гэж тохируулсан бол өөр өөр хөтөч дээр ижил өнгийг өөр өөрөөр харуулах боломжтой. Энэ нь хөтөч нь өөрийн палитртай ажилладаг бөгөөд палитрт байхгүй өнгийг харуулах боломжгүй графикийг харуулах аргатай холбоотой юм. Энэ тохиолдолд өнгө нь өөр өөр, ойролцоох, заасан нэгийг дуурайсан өнгөний пикселүүдийн хослолоор солигдоно. Янз бүрийн хөтөч дээр өнгийг өөрчлөхгүйн тулд бид вэб өнгө гэж нэрлэгддэг палитрыг танилцуулсан. Вэб өнгө нь улаан, ногоон, цэнхэр гэсэн зургаан утгын аль нэгийг нь 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) гэж тохируулсан өнгө юм. ), 255 (FF). Хаалт нь энэ бүрэлдэхүүн хэсгийн 16-тын утгыг заана. Бүх боломжит хослолуудын өнгөний нийт тоо нь 6x6x6 - 216 өнгө өгдөг. Вэб өнгөний жишээ бол # 33FF66 юм.

Вэб өнгөний гол онцлог нь бүх хөтөч дээр адилхан харагддаг. Одоогийн байдлаар мониторуудын чанар нэмэгдэж, чадавхи нь өргөжиж байгаатай холбоотойгоор вэб өнгөний хамаарал маш бага байна.

Нэрээр нь өнгө

Тоонуудын багцыг цээжлэхгүйн тулд оронд нь түгээмэл хэрэглэгддэг өнгөний нэрийг ашиглаж болно. Хүснэгт 6.3 алдартай өнгөний нэрсийн жагсаалтыг жагсаав.

Таб. 6.3. Зарим өнгөний нэрс
Өнгөний нэр Өнгө Тодорхойлолт Арван арвантын утга
хар Хар #000000
цэнхэр Цэнхэр # 0000FF
фуксиа Цайвар ягаан # FF00FF
саарал Хар саарал #808080
ногоон Ногоон #008000
шохой Цайвар ногоон # 00FF00
хүрэн улаан Гүн улаан #800000
тэнгисийн цэргийн хар хөх #000080
чидун Олив #808000
нил ягаан Хар ягаан #800080
улаан Улаан # FF0000
мөнгө Цайвар саарал # C0C0C0
цайвар Цэнхэр ногоон #008080
цагаан Цагаан #FFFFFF
шар Шар # FFFF00

Та өнгийг нэрээр нь эсвэл арван зургаатын тоо ашиглан ямар аргаар зааж өгөх нь хамаагүй. Эдгээр аргууд нь үйл ажиллагааны хувьд ижил байдаг. Жишээ 6.1 нь вэб хуудасны дэвсгэр болон текстийн өнгийг хэрхэн тохируулахыг харуулж байна.

Жишээ 6.1. Арын дэвсгэр ба текстийн өнгө

Өнгө

Жишиг Текст

Энэ жишээнд дэвсгэр өнгийг тагны bgcolor шинж чанарыг ашиглан тохируулсан , мөн текстийн шинж чанараар дамжуулан текстийн өнгө. Өөрчлөлт хийхийн тулд текстийн атрибутыг 16-тын тоогоор, bgcolor-ыг teal reserved түлхүүр үгэнд тохируулсан.

Minecraft-ын хууран мэхлэлт цэцэг, эсвэл Minecraft кодуудформатлах, ямар ч тоглогч Minecraft дээр цэцэг нэмж, текстийг бүх талаар форматлах боломжийг олгоно. Өнгөний кодууд& 0-9 - & a-f. Тэдгээрийг текстийнхээ өмнө нэмнэ үү. Тоглогчийн мессежүүд нь танд санал болгож буй будаг нэмэх боломжийг олгодог өнгөт кодыг агуулж болно.

Өнгө ба форматын кодууд

Мессеж дэх аравтын тоонуудын араас тэмдэглэгдсэн тэмдэг (&) нь текстийг харуулах үед өнгө солихыг үйлчлүүлэгчид дохио өгдөг. Эсвэл текстийг & тэмдэгтийн дараагаар үсгээр форматлаж болно. Та ном, тушаалын блок, серверийн нэр, серверийн тайлбар (motd), дэлхийн нэр, таблет, тэр ч байтугай тоглогчийн нэрэнд өөр өөр өнгө нэмж болно.

Доорх өнгөний хүснэгтийг ашиглан тохиргоонд эсвэл тоглоомонд текстээ форматлахад маш хялбар байдаг. & r нь бүх кодыг арилгахад хэрэглэгддэг, i.e. & mAAA & rBBB нь AAA BBB хэлбэрээр харагдана.

Бид танд тав тухтай байлгах үүднээс Minecraft дахь одоо байгаа өнгөт кодуудын хүснэгтийг толилуулж байна.

КодНэрТехникийн нэрТэмдгийн өнгөСүүдрийн өнгөний тэмдэг
РГБHexРГБHex
&0 Хархар0 0 0 000000 0 0 0 000000
&1 хар хөххар хөх0 0 170 0000AA0 0 42 00002A
&2 Хар ногоонхар ногоон0 170 0 00AA000 42 0 002A00
&3 Хар хөх ногоонхаранхуй усан0 170 170 00AAAA0 42 42 002A2A
&4 Гүн улаангүн улаан170 0 0 AA000042 0 0 2A0000
&5 Хар ягаанхар ягаан170 0 170 AA00AA42 0 42 2A002A
&6 алталт255 170 0 FFAA0042 42 0 2A2A00
&7 Сааралсаарал170 170 170 АААААА42 42 42 2A2A2A
&8 Хар сааралхар саарал85 85 85 555555 21 21 21 151515
&9 Цэнхэрцэнхэр85 85 255 5555FF21 21 63 15153F
& aНогоонногоон85 255 85 55FF5521 63 21 153F15
& bЦэнхэр ногоонусан85 255 255 55FFFF21 63 63 153F3F
& вУлаанулаан255 85 85 FF555563 21 21 3F1515
& гЦайвар ягаанцайвар_ягаан255 85 255 FF55FF63 21 63 3F153F
& eШаршар255 255 85 FFFF5563 63 21 3F3F15
& fЦагаанцагаан255 255 255 Офффф63 63 63 3F3F3F

Заримдаа танд хэрэгтэй доогуур зурах, хасах, онцлохямар ч текст... Үүний тулд текст форматыг ашигладаг. Энэ нь өнгөний нэгэн адил хэрэглэгддэг (бидний тавьсан текстийн өмнө коджишээ нь & lMinecraft = Minecraft.

Таны тав тухтай байдлыг хангах үүднээс форматлах кодуудын хүснэгтийг доор харуулав.

КодНэр
& кШидэт текст
& лӨнгөц зураг
& мЗураас зурсан бичвэр
& nДоогуур зураастай текст
& oНалуу текст
& rФорматлагдаагүй текст

CSS өнгөний кодыг өнгө тодорхойлоход ашигладаг. Дүрмээр бол өнгөний код эсвэл өнгөний утгыг элементийн нүүрэн талд (жишээ нь, текстийн өнгө, холбоосын өнгө) эсвэл элементийн арын дэвсгэр дээр (арын өнгө, блокны өнгө) өнгө тохируулахад ашигладаг. Тэдгээрийг мөн товчлуур, хүрээ, тэмдэглэгээ, хулганыг чиглүүлэх болон бусад гоёл чимэглэлийн эффектүүдийн өнгийг өөрчлөхөд ашиглаж болно.

Та өөрийн өнгөний утгыг янз бүрийн форматаар тохируулах боломжтой. Дараах хүснэгтэд бүх боломжит форматуудыг жагсаав.

Жагсаалтад орсон форматуудыг доор дэлгэрэнгүй тайлбарласан болно.

CSS өнгө - арван зургаатын кодууд

Зургадугаар талт өнгөт кодөнгөний зургаан оронтой дүрслэл юм. Эхний хоёр цифр (RR) улаан утгыг, дараагийн хоёр нь ногоон утгыг (GG), сүүлийн хоёр нь цэнхэр утгыг (BB) илэрхийлнэ.

CSS Өнгө - Богино Hex кодууд

Богино зургаан өнцөгт өнгөний кодзургаан оронтой тэмдэглэгээний богино хэлбэр юм. Энэ форматаар цифр бүр давтагдаж, зургаан оронтой тэнцэх өнгөний утгыг гаргадаг. Жишээ нь: # 0F0 нь # 00FF00 болно.

Арван арвантын утгыг Adobe Photoshop, Core Draw гэх мэт ямар ч график програмаас авч болно.

CSS дахь арван зургаатын өнгөт код бүрийн өмнө "#" хэш тэмдэг байх болно. Доорх нь арван зургаан тоот тэмдэглэгээг ашиглах жишээ юм.

CSS өнгө - RGB утгууд

RGB утгань rgb () шинж чанарыг ашиглан тохируулсан өнгөний код юм. Энэ өмч нь улаан, ногоон, цэнхэр гэсэн гурван утгыг авдаг. Утга нь 0-ээс 255 хүртэлх бүхэл тоо эсвэл хувь байж болно.

Жич:Бүх хөтөч rgb () өнгөт шинж чанарыг дэмждэггүй тул үүнийг ашиглахыг зөвлөдөггүй.

RGB утгыг ашиглан олон өнгийг харуулсан жишээг доор харуулав.

Өнгөний код үүсгэгч

Та манай үйлчилгээг ашиглан сая сая өнгөт код үүсгэх боломжтой.

Аюулгүй хөтчийн өнгө

Хамгийн аюулгүй бөгөөд компьютерээс хамааралгүй 216 өнгөний хүснэгтийг доор харуулав. Эдгээр CSS өнгө нь 000000-аас FFFFFF арван зургаатын тоо хүртэл хэлбэлздэг. Эдгээр нь 256 өнгөт палитртай ажиллахдаа бүх компьютер өнгийг зөв харуулдаг тул хэрэглэхэд аюулгүй.

CSS "аюулгүй" өнгөт хүснэгт
#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

Таны мэдэж байгаагаар өнгө нь хүний ​​нөхцөл байдалд нөлөөлдөг: оюун санааны болон бие махбодийн аль алинд нь. Өдөр бүр интернетийн сайтуудыг хараад нүд нь сая сая өнгө, сүүдэрийг үнэлдэг. Өнгөний сэтгэл зүйг мэддэг вэб дизайнер нь аливаа зорилгодоо хүрэхийн тулд зочдын сэтгэл санааг удирдаж чаддаг.

Энэ нь зарим сүүдэр нь тайвшруулж байхад зарим нь эсрэгээрээ сэтгэл хөдөлгөм байдагтай холбоотой юм. Дараа нь бид компьютерийн технологийг ашиглан өнгийг хэрхэн нэгтгэж, харуулах талаар ярих болно.

RGB нь гурван үндсэн бүрэлдэхүүн хэсгийг янз бүрийн харьцаагаар холих замаар бүх өнгө, тэдгээрийн сүүдрийг олж авах аргыг төлөөлдөг өнгөт загвар юм.

  • улаан өнгө ( Улаан);
  • ногоон өнгө ( Ногоон);
  • цэнхэр өнгө ( Цэнхэр).

RGB товчилсон нэр эндээс гаралтай. Эдгээр өнгийг үндсэн өнгө болгон сонгосон нь хүний ​​​​нүдний торлог бүрхэвчийн физиологи, тэдгээрийг хэрхэн хүлээн авдаг вэ.

RGB загвар нь өнөөдөр хамгийн алдартай хэвээр байгаа бөгөөд зурагтын дэлгэц, компьютерийн дэлгэц дээр өнгийг хуулбарлахад ашигладаг. Үйлдвэрлэгчид бүтээгдэхүүндээ өөр өөр шинж чанартай байдаг тул 1996 онд sRGB нэртэй нэгдмэл RGB-д суурилсан өнгөний синтезийн системийг бүтээж, Microsoft болон HP нар хамтран ажилласан.

Тоон өнгөт дүрслэл

Өмнө дурьдсанчлан RGB өнгө нь үндсэн өнгийг холих замаар үүсдэг. Тэдгээрийн тус бүрийн эрчмийг тодорхойлохын тулд өнгө нь 0-255 (8 бит) мужид дүрслэгдсэн схемийг баталсан бөгөөд энэ нь арван зургаатын системд 00-FF-тэй тохирч байна.

Өөрөөр хэлбэл, үндсэн өнгө нь иймэрхүү харагдах болно.

  • Улаан - RGB (255,0,0);
  • Ногоон - RGB (0.255.0);
  • Цэнхэр - RGB (0,0,255);

Хэрэв өнгөний эрч хүч 255-аас бага байвал улаан, ногоон, цэнхэр өнгийн янз бүрийн сүүдэртэй болно. Доорх нь тэдгээрийн зэрэглэлийн хүснэгт, түүнчлэн сүүдэр тус бүрийн арван зургаатын утгыг харуулав.


RGB өнгөт хүснэгтүүд

Мэдээжийн хэрэг, үндсэн өнгөний зэрэглэлээс гадна холимог өнгөнүүд байдаг бөгөөд тэдгээрийн тоо нэлээд том байдаг. Тиймээс одоо байгаа бүх сүүдэр, тэдгээрийн нэр, тоон дүрслэлийг харуулсан RGB өнгөний хүснэгтийг бүтээсэн болно ( аравтын болон аравтын тоо).

Та эндээс үүнтэй танилцаж болно. Энэ хүснэгт нь вэб дизайнеруудын амьдралыг ихээхэн хөнгөвчлөх болно, учир нь хэдхэн секундын дотор та хүссэн сүүдэрээ олж, тоон дүрслэлийг олж мэдэх боломжтой.

Аюулгүй RGB өнгөт палитр

Гэсэн хэдий ч зарим үед янз бүрийн хөтчүүдэд өнгийг харуулах асуудал гарч ирсэн бөгөөд үүнийг шийдвэрлэхийн тулд математикийн тооцооллоор гаргасан RGB өнгөний "аюулгүй" палитрыг эмхэтгэсэн.

Хөтөч нь өнгийг зөв харуулж чадахгүй бол зэргэлдээх өнгийг холих замаар хүссэн рүүгээ ойртохыг оролддог бөгөөд үр дүн нь хүлээн зөвшөөрөгдөхгүй байх магадлалтай.



Энэхүү палитраас RGB өнгөний кодыг ашигласнаар вэб хөгжүүлэгч өөр өөр хөтөч, платформ, дэлгэцээр үзэхдээ сайтынхаа хуудсан дээр өнгө харуулахаас айхгүй байх болно. Хэдийгээр одоогоор аюулгүй өнгөний хүснэгт нь ач холбогдлоо алдаж байна ( техникийн дэвшил одоо болтол зогсохгүй байна), үүнийг ашиглахдаа та тэдний хэлснээр сайн унтаж чадна.

RGB загварт алтан өнгө

Анх удаа "алт" гэдэг үгийг XIV зууны эхээр Aurum хэмээх химийн элементийн өнгийг тодорхойлоход ашигласан - алт. RGB хэл дээр алтыг дараах тоон утгуудаар илэрхийлнэ.

  • RGB (255, 215, 0) - аравтын систем;
  • HEX # FFD700 - арван зургаатын систем.


RGB загварт шаргал өнгө

Шаргал өнгө нь хамгийн тод биш байсан ч түүхэнд нэлээд чухал байр суурийг эзэлдэг. Соёлын олон дурсгалт газрууд, ялангуяа эртний барималууд нь шаргал өнгөтэй саван, савангийн чулуугаар хийгдсэн байв. RGB дээр шаргал нь дараах тоон дүрслэлийг агуулна.

  • RGB (245, 245, 220) - аравтын систем;
  • HEX # F5F5DC - арван зургаатын систем.


Өнөө үед, ялангуяа World Wide Web дээр ийм "уйтгартай" өнгө ховор байдаг. Хөгжүүлэгчид тод өнгө ашиглан сэтгэл татам дизайныг илүүд үздэг. Технологийн дэвшил нь дэлгэц дээр асар олон тооны өнгийг харуулах боломжийг олгодог бөгөөд энэ нь зургийг илүү бодитой болгодог.

Сайн муу