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 application ang nagbibigay-daan sa 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.
- 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, natutunan ng mga modernong browser na gumana sa kulay modelo ng RGB Ang A ay isang RGB extension 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).
- 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.
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).
- 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
Kulay modelo ng CMYK kadalasang nauugnay sa color printing at printing. 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, modelo ng kulay Ginagamit ang HSB 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 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.
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 preset na 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 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 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
Kulay sa wika ng CSS maaaring itakda sa iba't ibang paraan:
- sa pangalan,
- Sa pamamagitan ng halaga ng hexadecimal,
- sa mga format na RGB at RGBA,
- 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 na Ingles) na ginagamit upang itakda 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 | |
| kulay 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 itakda ang 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 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 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 pula 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 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 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.
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 isang 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 gumulong sa kulay abo.
Ang ikatlong 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 HSLA format, 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 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 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 |
Ang mga hexadecimal na numero ay ginagamit 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 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, bago hexadecimal na numero ilagay ang simbolo ng hash #, 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.
| 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 | |
| kulay 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 mga terminong desimal. Ang bawat isa sa tatlong bahagi ng kulay ay tumatagal ng halaga mula 0 hanggang 255. Posible ring itakda ang kulay bilang porsyento, na may 100% na katumbas ng bilang na 255. Una, ipahiwatig keyword rgb , at pagkatapos ay ang mga bahagi ng kulay ay ipinahiwatig 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+ |
Ang pangalan ng format na HSL ay hinango 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 isang halaga ng 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.
Mga halaga ng kulay sa Mga format ng RGBA, HSL at HSLA ay naidagdag sa CSS3, kaya kapag ginagamit ang mga format na ito, tingnan ang iyong code para sa bisa ng bersyon.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Babala
Ang lahat ng mga paraan ng 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!
Resulta halimbawang ito ipinapakita sa Fig. 2.
kanin. 2. Mga kulay sa web page
