Tingnang mabuti ang guhit. Ang background ng drop-down na window ay ginawang translucent. Ito ay isang medyo pangkaraniwang diskarte sa disenyo. Pag-isipan natin kung paano ito maipapatupad.
Gawain
Gawing translucent ang kulay na cross-browser.
Solusyon
Ang unang naisip sa sitwasyong ito ay gumamit ng png24 na imahe para sa background na may nakatakda nang translucency. Ngunit ang larawang ito ay ganap na hindi kailangan. Magagawa mo nang maayos nang wala ito (at samakatuwid ay walang karagdagang kahilingan sa server). Subukan pa rin nating hanapin ang pinakamainam na solusyon.
Ang pangalawang pag-iisip ay ang paggamit. Ngunit sa sa kasong ito hindi ito masyadong maginhawa. Pagkatapos ng lahat, hindi lamang ang background, kundi pati na rin ang mga inskripsiyon ay magiging translucent. Oo, sa totoo lang, ang buong window nang sabay-sabay.
Siyempre, maaari mong subukang magdagdag ng karagdagang lalagyan at ilapat lamang ang opacity dito, ngunit ang elementong HTML na ito ay ilalayon lamang para sa dekorasyon at malinaw na magiging kalabisan. Posible bang gawin nang wala ito?
Syempre kaya mo! Kung gumagamit ka ng RGBA.
Format ng paglalarawan ng kulay ng RGBA
Pinapayagan ka ng CSS3 na tukuyin ang kulay gamit ang RGB at RGBA function. Sa kasong ito, dapat nating ipahiwatig ang proporsyon ng bawat bahagi ng kulay kung saan ang isang byte ay inilalaan (mula 0 hanggang 255, kung sakaling hindi alam ng sinuman).
Ang syntax para sa kasong ito ay napaka-simple:
Background: rgb(0, 255, 0); /* purong berde */
Para sa RGBA, idinagdag ang ikaapat na parameter - alpha transparency (mula 0 hanggang 1).
Background: rgba(255, 0, 0, 0.5); /* purong pula na may 50% transparency */
Eto na, ang solusyon sa problema natin. Itakda lamang ang kulay ng background gamit ang gamit ang rgba at lahat ay magmumukhang kailangan natin. Kung wala dagdag na larawan at mga elemento!
Saan ko makukuha ang mga numerong ito?
Maaari mong tingnan ang mga bahagi ng kulay gamit ang tool ng eyedropper ng Photoshop.
Tungkol sa cross-browser compatibility
Dahil ang RGB function ay mas matanda kaysa sa RGBA at naroroon na mula pa noong panahon ng CSS2 standard, upang maprotektahan laban sa mga pinakasinaunang browser, maaari mong gamitin ang sumusunod na duplicate na konstruksyon:
SomeBlock ( background: rgb(255, 0, 0); background: rgba(255, 0, 0, 0.5); )
Sa diskarteng ito, ang mga lolo sa tuhod ng mga modernong browser ay hindi magkakaroon ng translucency, ngunit ang kulay mismo ay mananatiling tama.
Kakailanganin mong hiwalay na pangalagaan ang IE. Hindi naiintindihan ng mga asno ang RGBA hanggang sa bersyon 8 kasama.
Gaya ng dati: lupa para sa mga magsasaka, mga pabrika para sa mga manggagawa, at mga asno isang saklay! Sa anyo ng .
Siyempre, sa mga kondisyon ng labanan ay inilalapat namin ang panuntunang ito hiwalay na CSS na ating ikinonekta.
SomeBlock ( background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ff0000,endColorstr=#80ff0000); zoom: 1; )
Ang lansihin ay tukuyin ang panimulang at pangwakas na mga kulay bilang pareho (ff0000 - pula) at samantalahin ang katotohanan na maaari mong itakda ang alpha channel para sa gradient sa filter na ito (sa halimbawa, ang halaga ay 80).
Para sa sanggunian: ginagamit ng filter ang hexadecimal system at ang code para sa ganap na opaque na kulay ay FF (sa decimal ito ay 255). Alinsunod dito, ang hexadecimal 80 ay decimal 128, ibig sabihin, 50% transparency.
Sinubok sa:
- IE 6-9
- Firefox 3+
- Opera 10+
- Safari 4
- Chrome
Kulay sa wika ng CSS maaaring itakda sa iba't ibang paraan:
- sa pangalan,
- sa pamamagitan ng hexadecimal na halaga,
- sa RGB at RGBA na mga format,
- sa mga format ng HSL at HSLA.
Itakda ang kulay ayon sa pangalan
Sinusuportahan ng mga browser ang pagtukoy ng ilang mga kulay para sa mga elemento ayon sa pangalan. Naglalaman ang talahanayang ito ng ilang mga keyword (mga pangalan ng kulay sa Ingles) na ginamit upang tukuyin ang mga katangian ng kulay, RGB code, hexadecimal code (HEX) at HSL code.
| Pangalan | Kulay | RGB | HEX | HSL | Paglalarawan |
|---|---|---|---|---|---|
| puti | rgb(255, 255, 255) | #ffffff o #fff | hsl(0, 0%, 100%) | Puti | |
| pilak | rgb(192, 192, 192) | #c0c0c0 | hsl(0, 0%, 75%) | Gray | |
| kulay abo | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50%) | Madilim na kulay abo | |
| itim | rgb(0, 0, 0) | #000000 o #000 | hsl(0, 0%, 0%) | Itim | |
| maroon | rgb(128, 0, 0) | #800000 | hsl(0, 100%, 25%) | Madilim na pula | |
| pula | rgb(255, 0, 0) | #ff0000 o #f00 | hsl(0, 100%, 50%) | Pula | |
| kahel | rgb(255, 165, 0) | #ffa500 | hsl(38.8, 100%, 50%) | Kahel | |
| dilaw | rgb(255, 255, 0) | #ffff00 o #ff0 | hsl(60, 100%, 50%) | Dilaw | |
| olibo | rgb(128, 128, 0) | #808000 | hsl(60, 100%, 25%) | Olive | |
| kalamansi | rgb(0, 255, 0) | #00ff00 o #0f0 | hsl(120, 100%, 50%) | Banayad na berde | |
| berde | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25%) | Berde | |
| aqua | rgb(0, 255, 255) | #00ffff o #0ff | hsl(180, 100%, 50%) | Asul | |
| asul | rgb(0, 0, 255) | #0000ff o #00f | hsl(240, 100%, 50%) | Asul | |
| hukbong-dagat | rgb(0,0,128) | #000080 | hsl(240, 100%, 25%) | Madilim na asul | |
| teal | rgb(0, 128, 128) | #008080 | hsl(180, 100%, 25%) | Asul-berde | |
| fuchsia | rgb(255, 0, 255) | #ff00ff o #f0f | hsl(300, 100%, 50%) | Rosas | |
| lila | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25%) | Violet |
Ito ay isang halimbawa ng paggamit ng mga pangalan ng kulay, ang mga pangalan ng kulay ay kinuha mula sa pinalawig na talahanayan.
Narito kung paano gumagana ang code na ito:
Pagtatakda ng kulay gamit ang RGB
Ang RGB ay isang additive color model. Naka-on Ingles karagdagan- karagdagan. Ang RGB ay isang pagdadaglat ng mga salitang Ingles: Pula, Berde, Asul - pula, berde, asul). Mula dito ay malinaw na sa RGB modelo kulay ay synthesize sa pamamagitan ng pagdaragdag ng tatlo mga kulay (pula, berde, asul) sa iba't ibang dami.
Paghahalo ng pula, berde at kulay asul maaari kang makakuha ng ilang milyong shade. Ang lahat ng posibleng kumbinasyon ay nakaimbak sa memorya ng computer.
Umabot sa punto.
Upang magtakda ng mga katangian sa format na ito, gamitin ang notation rgb(r, g, b) , kung saan ang r, g, b ay ang tatlong channel para sa bawat kulay (pula, berde, asul). Ang mga halaga para sa bawat channel ay nakatakda sa hanay mula 0 hanggang 255.
Halimbawang code.
Upang gawing malinaw ang lahat, narito ang isang halimbawa ng code:
Ganito dapat gumana ang halimbawang ito:
Fig.1. Mga kulay sa RGB. Mga paliwanag halimbawa.
Sa simula ng page na ginagawa namin ang div.rgb class, kailangan ito para sa mga block na ginawa ng tag
Susunod, sa code na itinakda namin kulay ng background harangan
Subukang i-edit ang halimbawang ito at tukuyin ang iyong sariling mga halaga, halimbawa rgb(100, 100, 100) .
Pagtatakda ng kulay gamit ang RGBA
Lumitaw sa CSS3 bagong kasangkapan para sa pagtatrabaho sa kulay - RGBA format. Maaari itong tawaging isang ebolusyon ng modelo ng RGB, ngunit sa pagdaragdag ng isang bagong channel - ang A o alpha channel. Itinatakda ng channel na ito ang transparency ng kulay. Ang mga halaga nito ay nakatakda sa hanay mula 0 hanggang 1. Ang isang halaga ng 0 ay tumutugma sa ganap na transparency, 1 - buong opacity (ang kulay ay magiging katulad ng itinakda sa una tatlong channel RGB), at mga intermediate na halaga tulad ng 0.4 o 0.6 - translucency sa iba't ibang antas.
Halimbawang code.
Narito kung paano ito gagana:
Ang code na ito sa sarili nitong paraan visual na representasyon ay katulad ng sumusunod, gamit ang modelong RGB upang itakda ang halaga ng kulay:
Narito ang kanyang resulta:
Ang halaga ng alpha channel na katumbas ng zero ay ginagawang hindi nakikita ang anumang kulay - ganap na transparent ang isang halaga na katumbas ng isa ang nagsasalin ng kulay sa RGB code nang walang pagbabago. Ang rgba(255,0,0,1.0) property ay nagpapakita ng kulay na red rgb(255, 0, 0) .
Sa pamamagitan ng hexadecimal na halaga (HEX code)
Sa pang-araw-araw na buhay, ginagamit namin ang sistema ng pagbibilang ng decimal. Ang mga pinagmulan nito ay napaka-simple - mayroon tayong sampung daliri sa ating mga kamay, at ang pagbibilang sa ating mga daliri ay naging maginhawa sa buhay. Kung nasa sistemang desimal sampung digit: mula 0 hanggang 9, at ang numero 10 ay ang susunod na digit, pagkatapos ay ang hexadecimal number system ay may 16 na numero, at ang susunod na digit ay ang numero 16.
Upang tukuyin ang mga color code bilang hexadecimal digit, gamitin ang karaniwan mga decimal na digit mula 0 hanggang 9 at para tukuyin ang mga numero mula 10 hanggang 15 ay gumamit ng mga letrang Latin mula A hanggang F, iyon ay (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D , E, F). Para sa kalinawan, ilagay natin ito sa isang talahanayan:
Upang magsulat ng mga numerong hexadecimal na mas malaki kaysa sa F (15 sa sistema ng decimal), tulad ng sa sistema ng decimal, ginagamit din nila ang kumbinasyon ng dalawang digit, ngunit hexadecimal na, na halata. Oo, para sa rekord decimal na numero 255 V hexadecimal system FF notation ang ginagamit.
Ang hexadecimal system ay mas naiintindihan ng computer, at mas mabilis itong nagpoproseso ng mga value na itinakda ng hexadecimal value.
Upang tukuyin ang isang kulay sa hexadecimal, bago numerical value kailangan mong maglagay ng “#” sign, halimbawa: #FFC0CB. Ang value na #FFC0CB mismo ay binubuo ng tatlong hexadecimal digit na FF, C0 at CB. Ang kahulugan ng entry na ito ay kapareho ng pagtatakda ng kulay RGB na format(rgb(r, g, b)) - ang bawat hexadecimal digit sa HEX code ay nagpapahiwatig ng saturation ng kulay sa channel nito ng RGB model.
Ipapakita ng code na ito ang mga sumusunod na elemento:
At narito ang isang larawan na may resulta mula sa seksyong "Pagtatakda ng kulay sa gamit ang RGB"sa pahinang ito sa itaas.
Fig.1. Mga kulay sa RGB. Nakikita namin na ang mga kulay ay magkapareho.
Ang pinaikling notasyon ng HEX color code ay pinapayagan: ang isang 6 na digit na numero ay maaaring isulat bilang isang 3-digit na numero. Valid lang ito kapag naulit ang dalawang digit sa value ng kulay ng isang channel.
Iyon ay, ang sumusunod na pagdadaglat ay katanggap-tanggap:
Halimbawa, ang kulay na #ff22aa ay maaaring isulat bilang #f2a, o ang kulay #44aa22 ay maaaring isulat bilang #4a2.
Pagtatakda ng Kulay Gamit ang HSL
Lumitaw sa CSS3 bagong format upang ipahiwatig ang kulay.
Ang HSL format ay isang pagdadaglat para sa mga salitang Ingles: Hue (kulay), Saturate (saturation) at Lightness (lightness).
Ang kulay sa HSL ay ang halaga ng isang kulay sa isang espesyal na color wheel (Figure 2) at tinukoy sa mga degree. Kung gumuhit tayo ng mga pagkakatulad sa modelo ng RGB, kung gayon ang 0° ay tumutugma sa pula, 120° ay tumutugma sa berde, at 240° ay tumutugma sa asul.
Magbabago ang value ng hue sa hanay mula 0 hanggang 359.
Larawan 2. HSL color wheel. Ang pangalawang halaga - saturation (Saturate) ay nakatakda bilang isang porsyento. Sa 100% saturation, ang kulay ay bilang "makatas" hangga't maaari; habang ang saturation indicator ay gumagalaw patungo sa 0%, ang kulay ay nagiging duller at kumukupas sa kulay abo.
Ang pangatlong halaga, ang Lightness, ay nakatakda rin bilang isang porsyento. Kung mas mataas ang porsyento, magiging mas maliwanag ang kulay. Ang matinding halaga ng 0% at 100% ay magsasaad ng itim (walang liwanag) at puti (overexposed) na mga kulay, ayon sa pagkakabanggit, at hindi mahalaga kung aling kulay mula sa color wheel ang napili sa unang channel. Ang pinakamainam na halaga ng liwanag ng kulay ay 50%.
Pagtatakda ng Kulay Gamit ang HSLA
Ang format ng HSLA ay nauugnay sa HSL, tulad ng RGB sa RGBA. SA HSL format A, tulad ng sa RGBA, nagdagdag ng alpha channel, na responsable para sa transparency ng kulay.
Ang kulay na tinukoy sa HSL na format ay mas madaling basahin. Masasabi nating ito ay intuitive. Halimbawa, ang code na hsl(120,60%,50%) ay maaaring kumatawan sa huling kulay kung mayroong larawan ng HSL color wheel sa memorya. Ang parehong ay hindi masasabi tungkol sa mga format ng RGB at HEX; ang code ng kulay na tinukoy sa mga format na ito ay magiging malinaw lamang pagkatapos itong makita sa monitor.
Ang mga bagong format sa CSS3 (HSL, HSLA at RGBA) ay gumagana sa mga browser simula sa mga bersyon: IE 9.0, Opera 10.0 Firefox 3.0. Paano ko mapapagana ang mga istilo sa mga mas lumang browser?
Somebloсk (kulay ng background: rgb(255,50,50); kulay ng background: rgba(255,50,50,0.85) )
Kapag ginagamit ang code na ito sa mas lumang mga browser, ang kulay ng background para sa .somebloсk class, bagama't hindi ito gagamit ng alpha channel, ay ipapakita sa RGB na format.
Ang mga code ng kulay sa CSS ay ginagamit upang tukuyin ang mga kulay. Karaniwan, ginagamit ang mga color code o value ng kulay para itakda ang kulay para sa alinman sa kulay ng foreground ng isang elemento (hal. kulay ng text, kulay ng link) o kulay ng background ng isang elemento (kulay ng background, kulay ng block). Magagamit din ang mga ito upang baguhin ang kulay ng isang button, border, marker, hover, at iba pang mga pandekorasyon na epekto.
Maaari mong itakda ang iyong mga halaga ng kulay iba't ibang mga format. Inililista ng sumusunod na talahanayan ang lahat ng posibleng mga format:
Ang mga nakalistang format ay inilalarawan nang mas detalyado sa ibaba.
Mga Kulay ng CSS - Mga Hex Code
Hexadecimal na code ng kulay ay isang anim na digit na representasyon ng kulay. Ang unang dalawang digit (RR) ay kumakatawan sa pulang halaga, ang susunod na dalawa ay berdeng halaga(GG), at ang huli ay ang asul na halaga (BB).
Mga Kulay ng CSS - Maikling Hex Code
Maikling hex na code ng kulay ay isang mas maikling anyo ng anim na karakter na notasyon. Sa format na ito, inuulit ang bawat digit upang makagawa ng katumbas na anim na digit na halaga ng kulay. Halimbawa: ang #0F0 ay nagiging #00FF00.
Maaaring kunin ang hexadecimal value mula sa anumang graphic software, tulad ng Adobe Photoshop, Core Draw, atbp.
Ang bawat hexadecimal color code sa CSS ay mauunahan ng hash sign na "#". Nasa ibaba ang mga halimbawa ng paggamit ng hexadecimal notation.
Mga Kulay ng CSS - Mga Halaga ng RGB
Halaga ng RGB ay isang color code na nakatakda gamit ang rgb() property. Ang property na ito ay tumatagal ng tatlong value: isa bawat isa para sa pula, berde, at asul. Ang halaga ay maaaring isang integer, mula 0 hanggang 255, o isang porsyento.
Tandaan: Hindi lahat ng browser ay sumusuporta sa rgb() color property, kaya hindi inirerekomenda na gamitin ito.
Nasa ibaba ang isang halimbawa na nagpapakita ng maraming kulay gamit ang mga halaga ng RGB.
Generator ng color code
Maaari kang lumikha ng milyon-milyong mga code ng kulay gamit ang aming serbisyo.
Mga Kulay na Ligtas sa Browser
Nasa ibaba ang isang talahanayan ng 216 na kulay na pinakaligtas at pinaka-computer-independent. Ang mga kulay na ito sa CSS ay mula 000000 hanggang FFFFFF hexadecimal code. Ligtas silang gamitin dahil tinitiyak nilang lahat ng mga computer ay nagpapakita ng kulay nang tama kapag nagtatrabaho sa 256 color palette.
| Talaan ng "ligtas" na mga kulay sa 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 |
Vlad Merzhevich
Sa HTML, ang kulay ay tinukoy sa isa sa dalawang paraan: gamit ang hexadecimal code at sa pamamagitan ng pangalan ng ilang partikular na kulay. Ang paraan batay sa sistema ng hexadecimal na numero ay higit na ginagamit, dahil ito ang pinaka-unibersal.
Hexadecimal na mga kulay
Upang magtakda ng mga kulay sa HTML, ginagamit ang mga numero hexadecimal code. Ang hexadecimal system, hindi katulad ng decimal system, ay nakabatay, gaya ng ipinahihiwatig ng pangalan nito, sa numerong 16. Ang mga numero ay magiging ganito: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Ang mga numero 10 hanggang 15 ay pinalitan sa mga letrang Latin. Sa mesa Ipinapakita ng 6.1 ang pagsusulatan sa pagitan ng decimal at hexadecimal na mga numero.
Ang mga numerong higit sa 15 sa hexadecimal system ay nabuo sa pamamagitan ng pagsasama-sama ng dalawang numero sa isa (Talahanayan 6.2). Halimbawa, ang numerong 255 sa decimal ay tumutugma sa numerong FF sa hexadecimal.
Upang maiwasan ang pagkalito sa pagtukoy sa sistema ng numero, ang isang hexadecimal na numero ay pinangungunahan ng isang simbolo ng hash #, halimbawa #aa69cc. Sa kasong ito, hindi mahalaga ang kaso, kaya pinahihintulutang isulat ang #F0F0F0 o #f0f0f0.
Ang isang karaniwang kulay na ginagamit sa HTML ay ganito ang hitsura.
Dito nakatakda ang kulay ng background ng web page sa #FA8E47. Ang simbolo ng hash # sa harap ng isang numero ay nangangahulugan na ito ay hexadecimal. Tinutukoy ng unang dalawang digit (FA) ang pulang bahagi ng kulay, ang ikatlo hanggang ikaapat na digit (8E) ay tumutukoy sa berdeng bahagi, at ang huling dalawang digit (47) ay tumutukoy sa asul na bahagi. Ang huling resulta ay magiging kulay na ito.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
Ang bawat isa sa tatlong kulay - pula, berde at asul - ay maaaring tumagal ng mga halaga mula 00 hanggang FF, na nagreresulta sa kabuuang 256 na kulay. Kaya, ang kabuuang bilang ng mga kulay ay maaaring 256x256x256 = 16,777,216 na kumbinasyon. Ang isang modelo ng kulay batay sa pula, berde at asul na mga bahagi ay tinatawag na RGB (pula, berde, asul). Ang modelong ito ay additive (mula sa add - add), kung saan ang pagdaragdag ng lahat ng tatlong bahagi ay bumubuo ng kulay na puti.
Upang gawing mas madali ang pag-navigate sa mga kulay ng hexadecimal, isaalang-alang ang ilang mga panuntunan.
- Kung ang mga halaga ng mga bahagi ng kulay ay pareho (halimbawa: #D6D6D6), ang resulta ay isang kulay-abo na tint. Paano mas malaking bilang, mga mas matingkad na kulay, ang mga halaga ay nagbabago mula #000000 (itim) patungong #FFFFFF (puti).
- Ang isang maliwanag na pulang kulay ay nabuo kung ang pulang bahagi ay ginawang maximum (FF) at ang natitirang mga bahagi ay nakatakda sa zero. Ang isang kulay na may halagang #FF0000 ay ang pinakamapulang posibleng lilim ng pula. Ang parehong ay totoo para sa berde (#00FF00) at asul (#0000FF).
- Ang dilaw (#FFFF00) ay ginawa sa pamamagitan ng paghahalo ng pula at berde. Ito ay malinaw na nakikita sa color wheel (Larawan 6.1), na nagpapakita ng mga pangunahing kulay (pula, berde, asul) at mga pantulong o karagdagang. Kabilang dito ang dilaw, cyan at violet (tinatawag ding magenta). Sa pangkalahatan, ang anumang kulay ay maaaring makuha sa pamamagitan ng paghahalo ng mga kulay na malapit dito. Kaya, ang cyan (#00FFFF) ay nakuha sa pamamagitan ng pagsasama ng asul at berde.
kanin. 6.1. Color wheel
Ang mga kulay batay sa mga halaga ng hexadecimal ay hindi kailangang piliin nang empirikal. Angkop para sa layuning ito graphic editor, magagawang magtrabaho sa iba't ibang mga modelo ng kulay, halimbawa, Adobe Photoshop. Sa Fig. Ipinapakita ng Figure 6.2 ang window para sa pagpili ng isang kulay sa program na ito ang resultang hexadecimal na halaga ng kasalukuyang kulay ay nakabalangkas sa isang linya. Maaari mong kopyahin at i-paste ito sa iyong code.
kanin. 6.2. Window para sa pagpili ng kulay sa Programa ng Photoshop
Mga kulay sa web
Kung itatakda mo ang kalidad ng pag-render ng kulay ng monitor sa 8 bits (256 na kulay), kung gayon ang parehong kulay ay maaaring ipakita sa iba't ibang mga browser sa sarili kong paraan. Ito ay dahil sa paraan ng pagpapakita ng mga graphics, kapag ang browser ay gumagana sa sarili nitong palette at hindi maaaring magpakita ng kulay na wala sa palette nito. Sa kasong ito, ang kulay ay pinalitan ng isang kumbinasyon ng mga pixel ng iba, malapit dito, mga kulay na ginagaya ang ibinigay. Upang matiyak na ang kulay ay nananatiling pareho sa iba't ibang mga browser, isang palette ng tinatawag na mga kulay ng web ay ipinakilala. Ang mga kulay sa web ay ang mga kulay kung saan ang bawat bahagi - pula, berde at asul - ay nakatakda sa isa sa anim na halaga - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Ang hexadecimal na halaga ng bahaging ito ay ipinahiwatig sa mga bracket. Ang kabuuang bilang ng mga kulay mula sa lahat ng posibleng kumbinasyon ay nagbibigay ng 6x6x6 - 216 na kulay. Ang isang halimbawa ng kulay ng web ay #33FF66.
Ang pangunahing tampok ng kulay ng web ay ang hitsura nito ay pareho sa lahat ng mga browser. SA sa ngayon Ang kaugnayan ng mga kulay ng web ay napakaliit dahil sa pagpapabuti sa kalidad ng mga monitor at pagpapalawak ng kanilang mga kakayahan.
Mga kulay ayon sa pangalan
Upang maiwasang matandaan ang isang hanay ng mga numero, maaari mong gamitin sa halip ang mga pangalan ng mga karaniwang ginagamit na kulay. Sa mesa Ipinapakita ng 6.3 ang mga pangalan ng mga sikat na pangalan ng kulay.
| Pangalan ng kulay | Kulay | Paglalarawan | Halaga ng hexadecimal |
|---|---|---|---|
| itim | Itim | #000000 | |
| asul | Asul | #0000FF | |
| fuchsia | Banayad na lila | #FF00FF | |
| kulay abo | Madilim na kulay abo | #808080 | |
| berde | Berde | #008000 | |
| kalamansi | Banayad na berde | #00FF00 | |
| maroon | Madilim na pula | #800000 | |
| hukbong-dagat | Madilim na asul | #000080 | |
| olibo | Olive | #808000 | |
| lila | Madilim na lila | #800080 | |
| pula | Pula | #FF0000 | |
| pilak | Banayad na kulay abo | #C0C0C0 | |
| teal | Asul-berde | #008080 | |
| puti | Puti | #FFFFFF | |
| dilaw | Dilaw | #FFFF00 |
Hindi mahalaga kung tumukoy ka ng isang kulay sa pamamagitan ng pangalan nito o sa pamamagitan ng paggamit ng mga numerong hexadecimal. Ang mga pamamaraan na ito ay pantay sa kanilang epekto. Ipinapakita ng Halimbawa 6.1 kung paano itakda ang background at mga kulay ng teksto ng isang web page.
Halimbawa 6.1. Kulay ng background at teksto
Halimbawa ng teksto
SA sa halimbawang ito Ang kulay ng background ay itinakda gamit ang katangian ng bgcolor ng tag
, at ang kulay ng teksto sa pamamagitan ng katangian ng teksto. Para sa iba't-ibang, ang halaga ng katangian ng teksto ay nakatakda sa: hexadecimal na numero, at bgcolor gamit ang reserved keyword teal.HEX/HTML
Ang kulay ng HEX ay walang iba kundi isang hexadecimal na representasyon ng RGB.
Ang mga kulay ay ipinakita sa ang anyo ng tatlo mga pangkat ng hexadecimal digit, kung saan ang bawat pangkat ay may pananagutan para sa sarili nitong kulay: #112233, kung saan 11 ay pula, 22 ay berde, 33 ay asul. Ang lahat ng mga halaga ay dapat nasa pagitan ng 00 at FF.
Maraming application ang nagbibigay-daan sa pinaikling anyo ng hexadecimal color notation. Kung ang bawat isa sa tatlong pangkat naglalaman ng parehong mga character, halimbawa #112233, pagkatapos ay maaari silang isulat bilang #123.
- h1 (kulay: #ff0000; ) /* pula */
- h2 (kulay: #00ff00; ) /* berde */
- h3 ( kulay: #0000ff; ) /* asul */
- h4 ( kulay: #00f; ) /* parehong asul, shorthand */
RGB
Ang puwang ng kulay ng RGB (Red, Green, Blue) ay binubuo ng lahat ng posibleng kulay na maaaring gawin sa pamamagitan ng paghahalo ng pula, berde, at asul. Ang modelong ito ay sikat sa photography, telebisyon, at computer graphics.
Ang mga halaga ng RGB ay tinukoy bilang isang integer mula 0 hanggang 255. Halimbawa, ang rgb(0,0,255) ay ipinapakita bilang asul dahil ang asul na parameter ay nakatakda sa pinakamataas na halaga nito (255) at ang iba ay nakatakda sa 0.
Ang ilang mga application (lalo na ang mga web browser) ay sumusuporta sa porsyento ng pag-record ng mga halaga ng RGB (mula 0% hanggang 100%).
- h1 ( kulay: rgb(255, 0, 0); ) /* pula */
- h2 ( kulay: rgb(0, 255, 0); ) /* berde */
- h3 ( kulay: rgb(0, 0, 255); ) /* asul */
- h4 ( kulay: rgb(0%, 0%, 100%); ) /* parehong asul, porsyento ng entry */
Ang mga halaga ng kulay ng RGB ay sinusuportahan sa lahat ng mga pangunahing browser.
RGBA
Kamakailan lang mga modernong browser natutong magtrabaho kasama ang modelo ng kulay ng RGBA - isang extension ng RGB na may suporta para sa isang alpha channel, na tumutukoy sa opacity ng isang bagay.
Ibig sabihin Mga kulay ng RGBA ay tinukoy sa anyo: rgba(pula, berde, asul, alpha). Ang alpha parameter ay isang numero mula 0.0 (ganap na transparent) hanggang 1.0 (ganap na opaque).
- h1 ( kulay: rgb(0, 0, 255); ) /* asul sa regular na RGB */
- h2 ( kulay: rgba(0, 0, 255, 1); ) /* ang parehong asul sa RGBA, dahil opacity: 100% */
- h3 ( kulay: rgba(0, 0, 255, 0.5); ) /* opacity: 50% */
- h4 ( kulay: rgba(0, 0, 255, .155); ) /* opacity: 15.5% */
- h5 ( kulay: rgba(0, 0, 255, 0); ) /* ganap na transparent */
Ang RGBA ay suportado sa IE9+, Firefox 3+, Chrome, Safari, at Opera 10+.
HSL
Ang modelo ng kulay ng HSL ay isang representasyon ng modelo ng RGB sa isang cylindrical coordinate system. Ang HSL ay kumakatawan sa mga kulay sa isang mas madaling maunawaan at nababasa ng tao na paraan kaysa sa karaniwang RGB. Ang modelo ay kadalasang ginagamit sa mga application ng graphics, sa mga color palette, at para sa pagsusuri ng imahe.
Ang HSL ay nangangahulugang Hue (kulay/kulay), Saturation (saturation), Lightness/Luminance (lightness/lightness/luminosity, hindi dapat ipagkamali sa liwanag).
Tinutukoy ng Hue ang posisyon ng kulay sa color wheel (mula 0 hanggang 360). Ang saturation ay ang porsyento na halaga ng saturation (mula 0% hanggang 100%). Ang liwanag ay isang porsyento ng liwanag (mula 0% hanggang 100%).
- h1 ( kulay: hsl(120, 100%, 50%); ) /* berde */
- h2 ( kulay: hsl(120, 100%, 75%); ) /* light green */
- h3 ( kulay: hsl(120, 100%, 25%); ) /* dark green */
- h4 ( kulay: hsl(120, 60%, 70%); ) /* pastel green */
Ang HSL ay suportado sa IE9+, Firefox, Chrome, Safari, at Opera 10+.
HSLA
Katulad ng RGB/RGBA, ang HSL ay may HSLA mode na may alpha channel support para ipahiwatig ang opacity ng isang bagay.
Ang halaga ng kulay ng HSLA ay tinukoy bilang: hsla(kulay, saturation, liwanag, alpha). Ang alpha parameter ay isang numero mula 0.0 (ganap na transparent) hanggang 1.0 (ganap na opaque).
- h1 ( kulay: hsl(120, 100%, 50%); ) /* berde sa normal na HSL */
- h2 ( kulay: hsla(120, 100%, 50%, 1); ) /* ang parehong berde sa HSLA, dahil opacity: 100% */
- h3 ( kulay: hsla(120, 100%, 50%, 0.5); ) /* opacity: 50% */
- h4 ( kulay: hsla(120, 100%, 50%, .155); ) /* opacity: 15.5% */
- h5 ( kulay: hsla(120, 100%, 50%, 0); ) /* ganap na transparent */
CMYK
Ang modelo ng kulay ng CMYK ay madalas na nauugnay sa pag-print at pag-print ng kulay. Ang CMYK (hindi tulad ng RGB) ay isang subtractive na modelo, ibig sabihin na ang mas mataas na mga halaga ay nauugnay sa mas madidilim na kulay.
Ang mga kulay ay tinutukoy ng ratio ng cyan (Cyan), magenta (Magenta), dilaw (Dilaw), kasama ang pagdaragdag ng itim (Key/blackK).
Ang bawat isa sa mga numerong tumutukoy sa isang kulay sa CMYK ay kumakatawan sa porsyento ng tinta ng kulay na iyon na bumubuo kumbinasyon ng kulay, o sa halip, ang laki ng raster dot na ipinapakita sa isang phototypesetting machine sa isang pelikula ng isang partikular na kulay (o direkta sa isang printing form sa kaso ng CTP).
Halimbawa, para makakuha ng kulay ng PANTONE 7526, paghaluin mo ang 9 na bahaging cyan, 83 bahaging magenta, 100 bahaging dilaw, at 46 na bahaging itim. Ito ay maaaring tukuyin bilang mga sumusunod: (9,83,100,46). Minsan ang mga sumusunod na pagtatalaga ay ginagamit: C9M83Y100K46, o (9%, 83%, 100%, 46%), o (0.09/0.83/1.0/0.46).
HSB/HSV
Ang HSB (kilala rin bilang HSV) ay katulad ng HSL, ngunit ang mga ito ay dalawang magkaibang mga modelo ng kulay. Pareho silang nakabatay sa cylindrical geometry, ngunit ang HSB/HSV ay nakabatay sa "hexcone" na modelo, habang ang HSL ay nakabatay sa "bi-hexcone" na modelo. Madalas na ginusto ng mga artista na gamitin ang modelong ito, karaniwang tinatanggap na ang HSB/HSV device ay mas malapit sa natural na pang-unawa ng mga kulay. Sa partikular, kulay modelo ng HSB ginamit sa Adobe Photoshop.
Ang HSB/HSV ay kumakatawan sa Hue (kulay/kulay), Saturation (saturation), Brightness/Value (liwanag/halaga).
Tinutukoy ng Hue ang posisyon ng kulay sa color wheel (mula 0 hanggang 360). Ang saturation ay ang porsyento na halaga ng saturation (mula 0% hanggang 100%). Ang liwanag ay isang porsyento ng liwanag (mula 0% hanggang 100%).
XYZ
Ang modelo ng kulay ng XYZ (CIE 1931 XYZ) ay isang puwang sa matematika. Hindi tulad ng RGB, CMYK, at iba pang mga modelo, sa XYZ ang mga pangunahing bahagi ay "haka-haka," ibig sabihin ay hindi mo maaaring iugnay ang X, Y, at Z sa anumang hanay ng mga kulay na ihahalo. Ang XYZ ay ang master model ng halos lahat ng iba pa mga modelo ng kulay, ginagamit sa mga teknikal na larangan.
LAB
Ang modelo ng kulay ng LAB (CIELAB, “CIE 1976 L*a*b*”) ay kinakalkula mula sa espasyo ng CIE XYZ. Sa pagbuo ng Lab, ang layunin ay lumikha espasyo ng kulay, ang pagbabago ng kulay kung saan magiging mas linear mula sa punto ng view ng pang-unawa ng tao (kumpara sa XYZ), iyon ay, upang ang parehong pagbabago sa mga halaga ng coordinate ng kulay sa iba't ibang lugar ang espasyo ng kulay ay gumawa ng parehong sensasyon ng pagbabago ng kulay.
