Sa unang bahagi ng aklat, ipinakita na namin sa ilang mga halimbawa kung paano itakda ang kulay ng teksto sa CSS. Walang kumplikado dito: kakailanganin mo ang pag-aari ng kulay at ang halaga ng kulay na gusto mong kulayan ang teksto.

P (kulay: #211C18; )

Sa aming halimbawa, ang value #211C18 ay kumakatawan sa hexadecimal color code. Kung pamilyar ka na sa hexadecimal number system, maaari mong laktawan ang pagbabasa sa susunod na talata. Tatalakayin din namin ang higit pa tungkol sa iba pang mga paraan upang kumatawan sa mga kulay sa web - gamit mga modelo ng kulay(RGB, HSL) at mga keyword. Ang impormasyong ito ay magiging kapaki-pakinabang para sa mga nagsisimula at inirerekomendang basahin.

Hexadecimal na kulay (hex)

Hexadecimal number system ( hexadecimal, hex) ay batay sa numerong 16. Upang magsulat ng hexadecimal na halaga, 16 na character ang ginagamit: Arabic numerals mula 0 hanggang 9 at ang mga unang titik alpabetong Latin(A, B, C, D, E, F). Ang kulay sa hexadecimal na format ay isinusulat bilang tatlong dalawang-digit na numero mula 00 hanggang FF (dapat silang unahan ng simbolo ng hash #), na tumutugma sa tatlong bahagi: Pula, Berde, Asul (modelo ng kulay ng RGB). Sa madaling salita, ang isang entry ng kulay ay maaaring katawanin bilang #RRGGBB, kung saan tinutukoy ng unang pares ng mga character ang pulang antas, ang pangalawa - ang berdeng antas, at ang pangatlo - ang asul na antas. Ang resultang kulay ay kumbinasyon ng tatlong kulay na ito.

Shorthand notation para sa hex na kulay

Ang ilang mga halaga ng hexadecimal na kulay ay maaaring isulat sa mga pagdadaglat. Para magawa ito, gawing #RGB ang entry tulad ng #RRGGBB. Magagawa ito kapag ang hex na numero ay naglalaman ng tatlong pares ng magkaparehong mga character.

Ang pinaikling anyo ng notasyon ay medyo karaniwan, at para sa iyong sanggunian ay magbibigay kami ng ilang halimbawa ng mga pagdadaglat. Sa pamamagitan ng paraan, ang mga halaga ng hex ng kulay ay hindi case sensitive - maaari mong gamitin ang parehong uppercase at maliliit na titik, ang lahat ay depende sa iyong pagnanais at panlasa.

Mga halimbawa ng pinaikling notasyon para sa mga kulay ng hex:

Modelo ng kulay ng RGB

Ang pangalawang paraan upang tukuyin ang mga kulay sa CSS ay ang paggamit ng mga decimal na halaga ng RGB (Pula, Asul, Berde). Upang gawin ito, kailangan mong isulat ang keyword rgb pagkatapos ng pag-aari ng kulay, at pagkatapos ay sa mga panaklong at pinaghihiwalay ng mga kuwit - tatlong numero sa hanay mula 0 hanggang 255, bawat isa ay nangangahulugan ng intensity ng pula, berde at kulay asul(r, g, b). Paano mas malaking bilang, mas matindi ang kulay. Halimbawa, upang makakuha ng maliwanag na berdeng kulay, kailangan mong isulat:

P (kulay: rgb(0, 255, 0); )

Ngunit ang madilaw-dilaw na mustasa na kulay ay may sumusunod na kahulugan:

Kulay: rgb(94, 81, 3); /* sa ibaba ay ang parehong kulay, nakasulat sa hexadecimal: */ kulay: #5E5103;

Ang halaga para sa itim ay isinusulat bilang (0, 0, 0) at para sa puti bilang (255, 255, 255) . Posible ring ipahiwatig ang mga halagang ito bilang mga porsyento. Kaya, ang bilang 255 ay tumutugma sa 100%, samakatuwid, ang puting kulay ay maaaring itakda tulad ng sumusunod:

Kulay: rgb(100%, 100%, 100%);

Kung saan hahanapin ang mga kahulugan ng kulay

Marahil mayroon kang tanong: saan mo nakukuha ang lahat ng mga kahulugan ng kulay na ito? marami naman mga graphic editor at mga online na serbisyo kung saan maaari kang pumili ng mga kulay at bumuo ng mga scheme ng kulay. Isa sa pinaka mga sikat na programa, kung saan maaari mong piliin ang naaangkop na kulay at makuha ang RGB, hex na halaga at higit pa - Adobe Photoshop. Bilang kahalili, may mga espesyal na site kung saan madali mong mapipili hindi lamang ang kulay, kundi pati na rin ang kabuuan scheme ng kulay. Mahusay na halimbawa– Serbisyo ng Adobe Color CC.

Modelo ng kulay ng RGBA

Maaari kang magtakda ng kulay sa format na RGBA sa parehong paraan tulad ng sa RGB. Ang pagkakaiba sa pagitan ng RGBA at RGB ay ang pagkakaroon ng alpha channel, na responsable para sa transparency ng kulay. Itinakda ang transparency gamit ang isang numero sa hanay mula 0 hanggang 1, kung saan ang 0 ay nangangahulugang ganap na transparency, at ang 1, sa kabaligtaran, ay nangangahulugang ganap na opaque. Ang mga intermediate na halaga tulad ng 0.5 ay nagbibigay-daan sa iyo na magtakda ng isang translucent na hitsura (pinahihintulutan ang shorthand notation, nang walang zero, ngunit may tuldok – .5). Halimbawa, para gawing kulay at bahagyang transparent ang text, kailangan mong isulat ang rgba keyword at ang value ng kulay pagkatapos ng color property:

P ( kulay: rgba(94, 81, 3, .9); )

Ang kawalan ng RGBA ay hindi ito sinusuportahan ng browser Internet Explorer bersyon 8 at mas nauna. Lalo na para sa IE8, maaari mong ilapat ang sumusunod na solusyon:

P ( kulay: rgb(94, 81, 3); kulay: rgba(94, 81, 3, .9); )

Ang unang property sa halimbawa ay para sa IE8 browser, na magpapakita ng text sa tamang kulay, ngunit walang transparency. At ilalapat ng mga browser na iyon na nakakaunawa sa RGBA ang pangalawang property sa elemento, nang may transparency.

Mga modelo ng kulay ng HSL (HSLA).

Maaari ka ring magtakda ng kulay sa CSS gamit ang mga coordinate ng HSL color model (Hue, Saturation, Lightness). Ito ay nakasulat tulad nito:

P (kulay: hsl(165, 100%, 50%); )

Ang unang numero sa mga bracket ay nangangahulugang kulay at ibinibigay sa mga degree (hanay ng numero mula 0 hanggang 359). Magiging madaling maunawaan kung bakit ginagamit ang mga degree kung naaalala mo kung ano ang hitsura ng color wheel:

Ang pangalawa at pangatlong numero sa mga bracket ay nangangahulugang saturation at lightness, ayon sa pagkakabanggit. Ang kanilang mga halaga ay nakatakda sa mga porsyento mula 0 hanggang 100. Kung mas mababa ang halaga ng saturation, mas nagiging naka-mute ang kulay. halaga ng saturation, katumbas ng zero, ay hahantong sa kulay abo, hindi mahalaga kung ano ang halaga ng kulay. Ang halaga ng liwanag ay nagbibigay-daan sa iyo upang tukuyin ang liwanag ng kulay. Ang mga mababang halaga ay nagreresulta sa madilim na lilim ng kulay, ang mataas na halaga ay nagreresulta sa mga light shade. Ang halaga ng 100% para sa liwanag ay nangangahulugang puti, 0% ay nangangahulugang itim.

Ang modelo ng kulay ng HSLA ay gumagana halos kapareho ng HSL, ngunit, katulad ng RGBA, mayroon itong alpha channel kung saan maaari mong itakda ang transparency ng kulay sa pamamagitan ng pagtukoy ng nais na halaga sa hanay mula 0 hanggang 1:

P (kulay: hsla(165, 100%, 50%, .6); )

Ang HSL at HSLA ay sinusuportahan ng lahat ng browser maliban sa Internet Mga bersyon ng Explorer 8 at mas maaga.

Mga Karaniwang Kulay ng HTML

Ang isa pang paraan upang kumatawan sa mga kulay sa web ay mga keyword, kung saan maaari mong tukuyin ang kulay para sa elemento. Halimbawa:

P(kulay:itim;)

Mayroong 16 na karaniwang kulay na maaaring isulat sa halaga ng katangian ng kulay:

Ang mga kulay na ito ay sinusuportahan ng lahat ng mga browser. Bilang karagdagan sa mga ito, mayroong humigit-kumulang 130 karagdagang mga keyword para sa iba't ibang kulay ng mga kulay. Buong mesa ang mga kulay na ito ay makikita sa W3C reference book.

Ang paggamit ng naturang mga keyword ay katanggap-tanggap, ngunit may panganib na ang ilang salita ay hindi tatanggapin ng browser. Samakatuwid, inirerekomendang isulat ang hexadecimal color code sa halip na mga keyword.

Mga resulta

SA Kulay ng CSS ang teksto ay tinukoy gamit ang katangian ng kulay, at ang halaga nito ay maaaring isulat sa maraming paraan - sa hexadecimal (hex) na format, sa RGB o HSL na format, o sa pamamagitan ng pagtukoy ng isang keyword. Para makaiwas maling display kulay na tinukoy gamit ang isang keyword, mas mainam na tukuyin ang halaga ng hex nito.

Posible ring itakda ang transparency ng elemento gamit ang alpha channel (mga format ng RGBA at HSLA). Ito ay nagkakahalaga ng pagsasaalang-alang na ang IE8 browser at ang mga naunang bersyon nito ay hindi sumusuporta sa mga format ng RGBA, HSL at HSLA.

Mga monitor ng computer, pati na rin ang mga screen mga mobile phone, mga smartphone at tablet, ay binubuo ng libu-libong maliliit na parisukat na tinatawag na mga pixel (kung titingnan mong mabuti ang monitor, makikita mo ang mga ito). Kapag naka-off ang screen, ito ay itim dahil hindi ito naglalabas ng liwanag kapag ito ay naka-on, ang bawat pixel ay kumukuha ng ibang kulay, na lumilikha ng larawang nakikita natin kapag tumitingin sa screen.

Kapag nagtakda kami ng kulay para sa frame ng isang elemento, background o text, itinakda namin ang kulay na partikular para sa mga pixel kung saan binubuo ang mga ito. Mayroong dalawang pangkalahatang diskarte para sa pagtukoy ng mga kulay sa CSS: sa pamamagitan ng pangalan o sa pamamagitan ng halaga. Ang pinakasimple ay ang pagtukoy ng pangalan: pula ay pula, asul ay asul, at iba pa, ngunit ang CSS ay hindi nagbibigay ng maraming mga pangalan ng kulay kung saan pipiliin. Sa kabilang banda, ang pagtukoy ng halaga ng kulay ay nagpapahiwatig ng mas malaking pagpili ng mga shade. Mayroong ilang mga paraan upang tukuyin ang isang halaga ng kulay, ang dalawang pinakakaraniwan ay ang mga halaga ng RGB at hexadecimal. Naging bahagi sila ng CSS mula pa noong unang bersyon at sinusuportahan sila ng bawat web browser. Ipinakilala ng CSS3 ang ilang higit pang mga opsyon para sa pagtukoy ng kulay: RGBA, HSL at HSLA, hindi gaanong cross-browser friendly ang mga ito, ngunit ang pinaka pinakabagong bersyon sinusuportahan na sila ng mga browser.

Mga pangalan ng bulaklak

Ang pinakasimple at pinaka malinaw na paraan ang pagtukoy ng kulay sa CSS ay nangangahulugang pagpili ng pangalan ng isang paunang natukoy na kulay mula sa isang hanay ng mga keyword. May kabuuang 147 keyword na may mga pangalan ng kulay ang magagamit: 17 mga pangalan ay karaniwang mga kulay na ipinakilala sa unang bahagi Mga bersyon ng HTML(puti, itim, pula, dilaw, asul, berde, orange, purple, grey, silver, aqua, fuchsia, lime, maroon, navy, olive at teal), at 130 karagdagang mga idinagdag sa CSS2. Makikita mo ang buong listahan ng mga available na pangalan ng kulay sa seksyong HTML ng aming talahanayan ng kulay.

RGB at RGBA

Gumagamit ang RGB system ng tatlong numero na naglalarawan sa mga relatibong halaga ng pula, berde, at asul na pinagsama-sama upang makagawa ng anumang kulay. Ang mga numero ay maaaring mula 0 hanggang 255. Isaalang-alang ang RGB code para sa kulay dark purple: rgb(204, 51, 255), na maaaring halimbawa ay ilapat sa CSS property responsable para sa kulay ng font:

Kulay: rgb(205, 51, 255);

Ang RGBA system ay nagdaragdag ng isa pang numero na naglalarawan sa transparency ng kulay, ang halaga ay maaaring mula sa 0 (ganap na transparent) hanggang 1 (ganap na opaque). Ang halagang 0.5 ay ginagawang semi-transparent ang kulay, isaalang-alang ang isang semi-transparent na bersyon ng dark purple na hanay ng kulay na may gamit ang RGB Isang sistema:

Kulay: rgba(204, 51, 255, 0.5);

Maaari mong makita na ang pula, berde at asul na mga halaga ng kulay ay magkatulad RGB system. Ang ikaapat na numero - 0.5 ay ang antas ng transparency. Ang titik na "A" sa RGBA ay kumakatawan sa alpha channel, na isang termino mula sa graphic na disenyo ibig sabihin transparency.

Ang mga kulay ng RGBA ay maginhawang gamitin upang lumikha mga translucent na elemento, na nagbibigay ng visibility ng mga elementong matatagpuan sa ilalim ng mga ito.

HSL at HSLA

Ang HSL (kulay, saturation, lightness) system ay naglalarawan ng mga kulay batay sa kulay, saturation at liwanag. Narito ang parehong dark purple na kulay na ipinapakita sa HSL format:

Kulay: hsl(285, 100%, 60%);

Ang unang numero ay ang kulay, na ipinahayag sa mga degree mula 0 hanggang 360, na tumutukoy sa posisyon ng kulay sa color wheel. Ang pangalawang numero, saturation, na tinukoy bilang isang porsyento mula 0% hanggang 100%, ay nagpapahiwatig kung gaano puspos (maliwanag) ang kulay. Ang ikatlong numero ay liwanag, ito ay tinukoy bilang isang porsyento tulad ng saturation, ang liwanag ay nagpapahiwatig kung gaano kaliwanag o madilim ang kulay.

Ang sistema ng HSLA, tulad ng RGBA, ay nagdaragdag ng ikaapat na numero mula 0 hanggang 1 na tumutukoy kung gaano dapat kaaninag ang kulay. Ang halaga na 0.5 ay ginagawang semi-transparent ang kulay, isaalang-alang ang semi-transparent na bersyon ng dark purple, na tinukoy gamit ang HSLA system:

Kulay: hsla(285, 100%, 60%, 0.5);

Mga halaga ng kulay ng hexadecimal

Ang hexadecimal color code ay ang anim na character na sumusunod sa # na simbolo:

Ang bawat set ng dalawang character ay kumakatawan sa isang numero mula 0 hanggang 255. Kaya ang unang dalawang character ay kumakatawan sa kulay pula, ang susunod na dalawa ay kumakatawan sa kulay berde, at ang huling dalawa ay kumakatawan sa kulay na asul. Sa hexadecimal code na ito ay halos kapareho sa RGB na may pagkakaiba na dito tinukoy ang bawat kulay hexadecimal system notasyon sa halip na decimal.

Kung ang bawat pares ng mga digit ay binubuo ng parehong mga simbolo, kung gayon ang halaga ng kulay ay maaaring paikliin. Gayunpaman, kung ganito ang hitsura ng hexadecimal code, halimbawa, #bbff10, hindi maaaring paikliin ang naturang entry.

Kulay: #f00; kulay: #ff0000;

Tandaan: Ang mga browser na hindi sumusuporta sa mga halaga ng kulay na ito (rgba, hsl at hsla) ay hindi nag-uugnay ng anumang kulay sa background o font, na binabalewala ang deklarasyon nang buo. Sa kasong ito, ang background ng elemento ay gumagamit ng default na halaga (ito ay nagiging ganap na transparent), at ang teksto ay gumagamit ng alinman sa default na halaga (itim na kulay) o isang kulay na minana mula sa pangunahing elemento.

Para sa mga mas lumang bersyon ng mga browser dapat mong idagdag karagdagang tuntunin Isang kulay na tumutukoy sa isang kulay sa RGB na format, isang hexadecimal na halaga, o isang pangalan. Dapat lumabas ang panuntunang ito bago ang isang panuntunang tumutukoy ng kulay sa RGBA, HSL, o HSLA na format. Magbibigay ito ng safety net para sa kulay dahil sa CSS, kung mayroong dalawang panuntunan na nagtatakda ng value para sa parehong property, palaging inuuna ang panuntunang itinakda sa ibaba sa code. Nangangahulugan ito na kung sinusuportahan ng browser ang mga format ng RGBA, HSL o HSLA, gagamitin nito ang pangalawang panuntunan, at kung hindi, gagamitin nito ang una.

Kulay sa wika ng CSS maaaring tukuyin 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.

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:

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 patayong gitna. 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 background property, at magtalaga ng mga halaga 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 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 hanggang sa 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 value (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:

Para sa pagre-record mga numerong hexadecimal higit sa F (15 sa decimal system), tulad ng sa decimal system, ginagamit din ang unyon ng dalawang digit, ngunit sa hexadecimal, na halata. Oo, para sa rekord decimal na numero 255 sa hexadecimal notation ay FF.

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 sa 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.

#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 mga kulay 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 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 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 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 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 color code 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, gaya 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 pinaka-secure at 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

HEX/HTML

Ang kulay ng HEX ay walang iba kundi isang hexadecimal na representasyon ng RGB.

Ang mga kulay ay kinakatawan bilang tatlong pangkat 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 mga application ang nagbibigay-daan sa isang pinaikling anyo ng hexadecimal color notation. Kung ang bawat isa sa tatlong pangkat ay naglalaman ng parehong mga character, halimbawa #112233, maaari silang isulat bilang #123.

1. h1 (kulay: #ff0000; ) /* pula */
2. h2 (kulay: #00ff00; ) /* berde */
3. h3 ( kulay: #0000ff; ) /* asul */
4. h4 ( kulay: #00f; ) /* parehong asul, shorthand */

RGB

Kulay RGB space(Red, Green, Blue) ay binubuo ng lahat ng posibleng kulay na maaaring makuha 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%).

1. h1 ( kulay: rgb(255, 0, 0); ) /* pula */
2. h2 ( kulay: rgb(0, 255, 0); ) /* berde */
3. h3 ( kulay: rgb(0, 0, 255); ) /* asul */
4. 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.

Ang halaga ng kulay ng RGBA ay tinukoy bilang: rgba(pula, berde, asul, alpha). Ang alpha parameter ay isang numero mula 0.0 (ganap na transparent) hanggang 1.0 (ganap na opaque).

1. h1 ( kulay: rgb(0, 0, 255); ) /* asul sa regular na RGB */
2. h2 ( kulay: rgba(0, 0, 255, 1); ) /* ang parehong asul sa RGBA, dahil opacity: 100% */
3. h3 ( kulay: rgba(0, 0, 255, 0.5); ) /* opacity: 50% */
4. h4 ( kulay: rgba(0, 0, 255, .155); ) /* opacity: 15.5% */
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%).

1. h1 ( kulay: hsl(120, 100%, 50%); ) /* berde */
2. h2 ( kulay: hsl(120, 100%, 75%); ) /* light green */
3. h3 ( kulay: hsl(120, 100%, 25%); ) /* dark green */
4. 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.

Ibig sabihin Mga kulay ng HSLA ay ibinigay sa anyo: hsla(kulay, saturation, liwanag, alpha). Ang alpha parameter ay isang numero mula 0.0 (ganap na transparent) hanggang 1.0 (ganap na opaque).

1. h1 ( kulay: hsl(120, 100%, 50%); ) /* berde sa normal na HSL */
2. h2 ( kulay: hsla(120, 100%, 50%, 1); ) /* ang parehong berde sa HSLA, dahil opacity: 100% */
3. h3 ( kulay: hsla(120, 100%, 50%, 0.5); ) /* opacity: 50% */
4. h4 ( kulay: hsla(120, 100%, 50%, .155); ) /* opacity: 15.5% */
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. Mas gusto ng mga artist na gamitin ang modelong ito, karaniwang tinatanggap na ang HSB/HSV device ay mas malapit sa natural na perception 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 na modelo para sa halos lahat ng iba pang mga modelo ng kulay na 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 ng isang puwang ng kulay kung saan ang pagbabago ng kulay ay magiging mas linear mula sa punto ng view ng pandama 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.