RGB puti. Maaaring tukuyin ang kulay sa mga istilo sa iba't ibang paraan: ayon sa hexadecimal na halaga, ayon sa pangalan, sa RGB, RGBA, HSL, HSLA na format

Kulay sa wika ng CSS maaaring itakda sa iba't ibang paraan:

  • sa pangalan,
  • Sa pamamagitan ng halaga ng hexadecimal,
  • 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 Ingles) na ginamit upang tukuyin ang mga katangian ng kulay, RGB code, hexadecimal code (HEX) at HSL code.

mesa 1. Mga pangalan ng mga kulay, ang kanilang RGB, 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.

RGB sa CSS

Katamtamang Turquoise
kayumanggi
pulang-pula
blueviolet
rolivedrab


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 modelo Mga kulay ng RGB synthesized 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:

RGB sa CSS

rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)


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

ay ipinakita tamang sukat: 240px by 40px. Itinalaga namin ang line-height property ng value na 40px, ibig sabihin katumbas ng taas block, ito ay magpapahintulot sa teksto na maipakita sa block
sa vertical center. Igitna namin ang teksto nang pahalang gamit ang panuntunan ( text-align: center ;).

Susunod, sa code na itinakda namin kulay ng background harangan

gamit ang style attribute, gamit ang background property, at pagtatalaga ng mga value sa rgb(255, 0, 0) , rgb(0, 255, 0) , at rgb(0, 0, 255) . Iyon ay, halili naming ginagawa ang isang channel bilang puspos hangga't maaari, at ang natitirang mga channel ay hindi ginagamit para sa synthesis, dahil ang kanilang halaga ay zero.

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 na 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 kapareho ng ito ay tinukoy sa unang tatlo Mga RGB channel), at mga intermediate na halaga tulad ng 0.4 o 0.6 - translucency sa iba't ibang antas.

Halimbawang code.

RGBA sa CSS3



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:

RGBA sa CSS3



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 ang decimal system ay may sampung digit: mula 0 hanggang 9, at ang numero 10 ay ang susunod na digit, kung gayon 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 magtalaga ng 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)) - bawat hexadecimal digit sa HEX code ay nagpapahiwatig ng saturation ng kulay sa channel nito ng RGB model.

HEX code sa CSS

#FF0000
#00FF00
#0000FF


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, pagkatapos ay 0° tumutugma sa pula, 120° tumutugma sa berde, at 240° tumutugma sa asul.

Magbabago ang value ng hue mula 0 hanggang 359.


Larawan 2. Color wheel HSL.

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 gumulong 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 format na HSLA, tulad ng sa RGBA, idinagdag ang isang 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 na makita ito 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.

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 na may nakatakda nang translucency para sa background. 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 maglapat lamang ng opacity dito, ngunit ang HTML na elementong 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 ganitong paraan, mga lolo sa tuhod mga modernong browser walang magiging 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

Ang mga numero ay ginagamit upang magtakda ng mga kulay 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 mula 10 hanggang 15 ay pinapalitan sa mga letrang Latin. Ang mga numerong higit sa 15 sa hexadecimal system ay nabuo sa pamamagitan ng pagsasama-sama ng dalawang numero sa isa. Halimbawa, ang numerong 255 sa decimal ay tumutugma sa numerong FF sa hexadecimal. Upang maiwasan ang pagkalito sa pagtukoy ng sistema ng numero, isang simbolo ng hash na # ang inilalagay bago ang hexadecimal na numero, halimbawa #666999. Ang bawat isa sa tatlong kulay - pula, berde at asul - ay maaaring tumagal ng mga halaga mula 00 hanggang FF. Kaya, ang simbolo ng kulay ay nahahati sa tatlong bahagi #rrggbb, kung saan ang unang dalawang simbolo ay nagpapahiwatig ng pulang bahagi ng kulay, ang gitnang dalawa - berde, at ang huling dalawa - asul. Pinapayagan na gamitin ang pinaikling anyo na #rgb, kung saan dapat doblehin ang bawat karakter. Kaya, ang entry na #fe0 ay dapat ituring bilang #ffee00.

Sa pangalan

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Sinusuportahan ng mga browser ang ilang mga kulay sa pamamagitan ng kanilang pangalan. Sa mesa Ipinapakita ng 1 ang mga pangalan, hexadecimal code, RGB, HSL na mga halaga at paglalarawan.

mesa 1. Pangalan ng mga kulay
Pangalan Kulay Code RGB HSL Paglalarawan
puti #ffffff o #fff rgb(255,255,255) hsl(0.0%,100%) Puti
pilak #c0c0c0 rgb(192,192,192) hsl(0.0%,75%) Gray
kulay abo #808080 rgb(128,128,128) hsl(0.0%,50%) Madilim na kulay abo
itim #000000 o #000 rgb(0,0,0) hsl(0.0%,0%) Itim
maroon #800000 rgb(128,0,0) hsl(0.100%,25%) Madilim na pula
pula #ff0000 o #f00 rgb(255,0,0) hsl(0,100%,50%) Pula
kahel #ffa500 rgb(255,165,0) hsl(38.8,100%,50%) Kahel
dilaw #ffff00 o #ff0 rgb(255,255,0) hsl(60,100%,50%) Dilaw
olibo #808000 rgb(128,128,0) hsl(60,100%,25%) Olive
kalamansi #00ff00 o #0f0 rgb(0,255,0) hsl(120,100%,50%) Banayad na berde
berde #008000 rgb(0,128,0) hsl(120,100%,25%) Berde
aqua #00ffff o #0ff rgb(0,255,255) hsl(180,100%,50%) Asul
asul #0000ff o #00f rgb(0,0,255) hsl(240,100%,50%) Asul
hukbong-dagat #000080 rgb(0,0,128) hsl(240,100%,25%) Madilim na asul
teal #008080 rgb(0,128,128) hsl(180,100%,25%) Asul-berde
fuchsia #ff00ff o #f0f rgb(255,0,255) hsl(300,100%,50%) Rosas
lila #800080 rgb(128,0,128) hsl(300,100%,25%) Violet

Gamit ang RGB

Internet Explorer Chrome Opera Safari Firefox Android iOS
5.0+ 1.0+ 3.5+ 1.3+ 1.0+ 1.0+ 1.0+

Maaari mong tukuyin ang isang kulay gamit ang pula, berde, at asul na mga halaga sa decimal. Ang bawat isa sa tatlong bahagi ng kulay ay tumatagal ng isang halaga mula 0 hanggang 255. Pinapayagan din na tukuyin ang kulay bilang isang porsyento, na may 100% na katumbas sa bilang na 255. Una, tukuyin ang rgb na keyword, at pagkatapos ay tukuyin ang mga bahagi ng kulay sa mga panaklong , na pinaghihiwalay ng mga kuwit, halimbawa rgb(255 , 128, 128) o rgb(100%, 50%, 50%).

RGBA

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

Ang format ng RGBA ay katulad sa syntax sa RGB, ngunit may kasamang alpha channel na tumutukoy sa transparency ng elemento. Ang isang halaga ng 0 ay ganap na transparent, 1 ay opaque, at isang intermediate na halaga tulad ng 0.5 ay semi-transparent.

Ang RGBA ay idinagdag sa CSS3, kaya dapat na patunayan ang CSS code laban sa bersyong ito. Dapat tandaan na ang pamantayan ng CSS3 ay nasa ilalim pa rin ng pagbuo at maaaring magbago ang ilang mga tampok. Halimbawa, may idinagdag na kulay ng RGB sa background property-na-validate ang kulay, ngunit hindi na valid ang background na idinagdag sa property. Kasabay nito, lubos na nauunawaan ng mga browser ang kulay para sa parehong mga katangian.

HSL

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.0+ 2.1+ 2.0+

Pangalan HSL format nabuo mula sa kumbinasyon ng mga unang titik Hue (kulay), Saturate (saturation) at Lightness (lightness). Ang kulay ay ang halaga ng kulay sa color wheel (Fig. 1) at ibinibigay sa mga degree. Ang 0° ay tumutugma sa pula, 120° sa berde, at 240° sa asul. Maaaring mag-iba ang value ng hue mula 0 hanggang 359.

kanin. 1. Color wheel

Ang saturation ay ang intensity ng isang kulay at sinusukat bilang porsyento mula 0% hanggang 100%. Ang halaga na 0% ay nagpapahiwatig ng walang kulay at isang lilim ng kulay abo, 100% pinakamataas na halaga saturation.

Tinutukoy ng liwanag kung gaano kaliwanag ang kulay at tinukoy bilang isang porsyento mula 0% hanggang 100%. Ang mga mababang halaga ay nagpapadilim ng kulay, at ang mga matataas na halaga ay ginagawang mas magaan ang kulay;

HSLA

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 3.1+ 3.0+ 2.1+ 2.0+

Ang format ng HSLA ay katulad sa syntax sa HSL, ngunit may kasamang alpha channel upang tukuyin ang transparency ng elemento. Ang isang halaga ng 0 ay ganap na transparent, 1 ay opaque, at isang intermediate na halaga tulad ng 0.5 ay semi-transparent.

Ang mga halaga ng kulay ng RGBA, HSL, at HSLA ay naidagdag sa CSS3, kaya pakisuri ang iyong code para sa validity ng bersyon kapag ginagamit ang mga format na ito.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Mga kulay

Babala

Ang lahat ng mga pamamaraan sa paghuli ng leon na nakalista sa site ay teoretikal at batay sa mga pamamaraan ng pagkalkula. Hindi ginagarantiyahan ng mga may-akda ang iyong kaligtasan kapag ginagamit ang mga ito at tinatanggihan ang anumang responsibilidad para sa mga resulta. Tandaan, ang isang leon ay isang mandaragit at isang mapanganib na hayop!

Arrrgh!


Ang resulta ng halimbawang ito ay ipinapakita sa Fig. 2.

kanin. 2. Mga kulay sa web page

Vlad Merzhevich

SA Kulay ng HTML ay tinukoy sa isa sa dalawang paraan: gamit ang isang hexadecimal code at sa pamamagitan ng pangalan ng ilang mga kulay. Ang paraan batay sa sistema ng hexadecimal na numero ay higit na ginagamit, dahil ito ang pinaka-unibersal.

Hexadecimal na mga kulay

Gumagamit ang HTML ng mga hexadecimal na numero upang tukuyin ang mga kulay. 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 mula 10 hanggang 15 ay pinapalitan ng 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 hash na simbolo #, halimbawa #aa69cc. Sa kasong ito, hindi mahalaga ang kaso, kaya pinahihintulutan na 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 pangatlo 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 ang 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; 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 pulang lilim. Ang sitwasyon ay katulad 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.

mesa 6.3. Mga pangalan ng ilang 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 pamamaraang 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

Mga kulay

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.