Sa kasamaang palad, hindi pa posible na magpakita ng mga panlasa sa website. Ngunit ito ay maaaring ganap na mabayaran sa tulong ng mga kulay. Pagkatapos ng lahat, pinapayagan ka ng mga kulay ng html na ipakita ang alinman sa milyun-milyong shade. kaya" mga lapis na may kulay Marami pang mahigit pito sa set niya.
Color scheme sa html
Sa html, maaaring tukuyin ang kulay sa ilang mga format:
1. Bilang isang hexadecimal value – ginagamit ang code na tinukoy sa hexadecimal number system. Ang ganitong mga color code sa html ay binubuo ng tatlong pares ng hexadecimal na numero. Ang bawat pares ay may pananagutan para sa saturation ng lilim na may pangunahing kulay nito:
- Ang unang pares ng numero ay responsable para sa kulay pula;
- Ang pangalawang pares ay para sa berdeng kulay na nilalaman;
- Ang huli ay para sa asul na nilalaman nito.
Ang isang hash mark ay inilalagay sa simula ng code (bago ang mga numero). Ito ang hexadecimal color code. Bilang karagdagan sa mga numero mula 1 hanggang 9, ang sistema ng numero na ito ay gumagamit ng mga titik ng alpabetong Latin (A, B, C, D, E, F).
Halimbawa, ang puting color code sa html ay magmumukhang #FFFFFF:
2. Keyword - Kasalukuyang sinusuportahan ng HTML ang tungkol sa 147 mga keyword. Ngunit hindi lahat ng mga salitang ito ay natatangi. Ang ilan sa kanila ay tumutukoy sa parehong lilim ng kulay.
Ang kulay grey ay kinakatawan ng dalawang keyword: grey at grey . Ang kanilang hexadecimal code (HEX) ay ibinibigay ng parehong halaga #808080.
Halimbawa:
#808080
3. Sa format na RGB - ang pag-encode ng kulay na ito sa html ay batay sa paggamit ng tatlong halaga, na itinakda sa hanay mula 0 hanggang 255. Tinutukoy ng bawat isa sa kanila ang saturation ng kulay na may isa sa mga pangunahing kulay:
- R – pula (pula);
- G - berde (berde);
- B – asul (asul).
Ang numero ng kulay sa format na RGB ay nakasulat sa sumusunod na anyo: rgb(0, 210, 100).
kulay ng background:rgb(100,186,43)
4. Sa format na RGBA - ito ay isang pinahusay na format ng RGB, kung saan ang ikaapat na halaga ay tumutukoy sa transparency ng kulay bilang isang decimal fraction mula 0 hanggang 1.
Halimbawa ng paggamit:
kulay ng background:rgba(100,86,143,0.2)
kulay ng background:rgba(100,86,143,0.5)
kulay ng background:rgba(100,86,143,0.8)
kulay ng background:rgba(100,86,143,1)
Mga talahanayan ng kulay ng HTML at mga generator ng kulay
Sa napakalawak na hanay ng mga format ng setting ng kulay, madaling malito. Samakatuwid, ang isang espesyal na talahanayan ng kulay ay naimbento. Nagbibigay ito ng 147 pangunahing pangalan ng mga kulay na may mga code ng pagsunod sa lahat ng pangunahing pamantayan ng kulay. Bukod pa rito, ang bawat field ay nilagyan ng bar para sa pagpili ng visual na kulay. Ang isa sa mga talahanayan na ito ay ipinakita sa website na colorscheme.ru:
Ngunit kahit na may ganitong structuring ng pagtutugma, ang pagpili ng tamang lilim ay maaaring maging mahirap. At hindi isang katotohanan na ang talahanayan ng mga code ng kulay ay maglalaman ng kailangan mo.
Upang malampasan ang balakid na ito at gawing pinakamadali hangga't maaari ang pagpili ng tamang shade, binuo ang mga interactive na serbisyo sa web. Ang kanilang user interface ay maaaring bahagyang naiiba sa bawat isa.
Sa website na html-color-codes.info ang color generator ay ganito ang hitsura:
At sa loob ng serbisyo ng color-picker.appsmaster.co, ang tool na ito ay ipinapatupad nang medyo naiiba:
Ang saturation ng bawat kulay sa generator ay nakatakda gamit ang mga espesyal na slider. Biswal, ang lilim ay ipinapakita ng kulay ng frame at parihaba sa kaliwang bahagi. Sa ibaba, ipinapakita ng 3 field ang color code sa mga pangunahing format.
Ngunit ang generator ng kulay ay magagamit hindi lamang sa mga dalubhasang site. Halos lahat ng mga graphic editor ay nilagyan ng katulad na tool. Halimbawa, Photoshop:
Mga pag-iingat sa kaligtasan kapag nagtatrabaho sa kulay
At ito ay matagal na ang nakalipas, noong panahon ng mga video card na sumuporta lamang sa 256 na kulay. Sa mga panahong iyon, ang mga operating system ay maaari lamang magpakita ng isang tiyak na bilang ng walong-bit na mga kulay nang walang pagbaluktot.
Pagkatapos ay binuo ang isang mahusay na talahanayan ng mga ligtas na kulay. Tinukoy nito ang 216 shade na maaaring ipakita nang walang pagbaluktot sa alinman sa mga browser noong panahong iyon. At hanggang ngayon ito" dakilang manuskrito» ay available pa rin sa ilang mapagkukunan:
Sa panahon ngayon lahat ay nagbago. Samakatuwid, ang lahat ng mga panuntunan sa kaligtasan kapag nagtatrabaho sa kulay sa html ay ganap na nakansela. Pagkatapos ng lahat, ang modernong computer hardware ay sumusuporta sa higit sa 16 milyong iba't ibang mga shade. At 216 na ligtas na mga kulay ay nalubog sa limot.
Sa HTML, maaaring tukuyin ang kulay sa tatlong paraan:
Pagtatakda ng kulay sa HTML ayon sa pangalan nito
Maaaring tukuyin ang ilang mga kulay sa pamamagitan ng kanilang pangalan, gamit ang pangalan ng kulay sa English bilang halaga. Ang pinakakaraniwang mga keyword: itim, puti, pula, berde, asul, atbp.:
Kulay ng teksto – pula
Ang pinakasikat na mga kulay ng pamantayan ng World Wide Web Consortium (W3C):
| Kulay | Pangalan | Kulay | Pangalan | Kulay | Pangalan | Kulay | Pangalan |
|---|---|---|---|---|---|---|---|
| Itim | Gray | pilak | Puti | ||||
| Dilaw | kalamansi | Aqua | Fuchsia | ||||
| Pula | Berde | Asul | Lila | ||||
| Maroon | Olive | Navy | Teal |
Halimbawa ng paggamit ng iba't ibang pangalan ng kulay:
Halimbawa: pagtukoy ng kulay sa pamamagitan ng pangalan nito
- Subukan ito sa iyong sarili »
Header sa pulang background
Header sa orange na background
Heading sa lime background
Puting teksto sa asul na background
Header sa pulang background
Header sa orange na background
Heading sa lime background
Puting teksto sa asul na background
Pagtukoy ng Kulay Gamit ang RGB
Kapag nagpapakita ng iba't ibang kulay sa isang monitor, ginagamit ang RGB palette bilang batayan. Ang anumang kulay ay nakuha sa pamamagitan ng paghahalo ng tatlong pangunahing mga: R - pula, G - berde, B - asul. Ang liwanag ng bawat kulay ay binibigyan ng isang byte at samakatuwid ay maaaring tumagal ng mga halaga mula 0 hanggang 255. Halimbawa, ang RGB(255,0,0) ay ipinapakita bilang pula dahil ang pula ay nakatakda sa pinakamataas na halaga nito (255) at ang ang iba ay nakatakda sa 0 Maaari mo ring itakda ang kulay bilang porsyento. Ang bawat parameter ay nagpapahiwatig ng antas ng liwanag ng kaukulang kulay. Halimbawa: ang mga halaga rgb(127, 255, 127) at rgb(50%, 100%, 50%) ay magtatakda ng parehong katamtamang berdeng kulay:
Halimbawa: Pagtukoy ng Kulay Gamit ang RGB
- Subukan ito sa iyong sarili »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Itakda ang kulay sa pamamagitan ng hexadecimal na halaga
Mga halaga R G B maaari ding tukuyin gamit ang mga halaga ng kulay ng hexadecimal (HEX) sa anyo: #RRGGBB kung saan ang RR (pula), GG (berde) at BB (asul) ay mga hexadecimal na halaga mula 00 hanggang FF (kapareho ng decimal 0-255 ). Ang hexadecimal system, hindi katulad ng decimal system, ay nakabatay, gaya ng ipinahihiwatig ng pangalan nito, sa numerong 16. Ang hexadecimal system ay gumagamit ng mga sumusunod na palatandaan: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Dito ang mga numero mula 10 hanggang 15 ay pinapalitan ng mga letrang Latin. Ang mga numerong higit sa 15 sa hexadecimal system ay kinakatawan sa pamamagitan ng pagsasama-sama ng dalawang character sa isang halaga. Halimbawa, ang pinakamataas na bilang na 255 sa decimal ay tumutugma sa pinakamataas na halaga ng FF sa hexadecimal. Hindi tulad ng decimal system, ang isang hexadecimal na numero ay nauuna sa isang simbolo ng hash. # , halimbawa, ang #FF0000 ay ipinapakita bilang pula dahil ang pula ay nakatakda sa pinakamataas na halaga nito (FF) at ang iba pang mga kulay ay nakatakda sa kanilang pinakamababang halaga (00). Mga palatandaan pagkatapos ng simbolo ng hash # Maaari kang mag-type sa parehong uppercase at lowercase. Binibigyang-daan ka ng hexadecimal system na gamitin ang pinaikling anyo na #rgb, kung saan ang bawat karakter ay katumbas ng doble. Kaya, ang entry na #f7O ay dapat ituring bilang #ff7700.
Halimbawa: Kulay ng HEX
- Subukan ito sa iyong sarili »
pula: #FF0000
berde: #00FF00
asul: #0000FF
pula: #FF0000
berde: #00FF00
asul: #0000FF
pula+berde=dilaw: #FFFF00
pula+asul=purple: #FF00FF
berde+asul=cyan: #00FFFF
Listahan ng mga karaniwang ginagamit na kulay (pangalan, HEX at RGB):
| Ingles na pangalan | pangalang Ruso | Sample | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amaranto | Amaranto | #E52B50 | 229 | 43 | 80 | |
| Amber | Amber | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Asul-berde | #00FFFF | 0 | 255 | 255 | |
| Azure | Azure | #007FFF | 0 | 127 | 255 | |
| Itim | Itim | #000000 | 0 | 0 | 0 | |
| Asul | Asul | #0000FF | 0 | 0 | 255 | |
| Bondi Blue | Bondi beach water | #0095B6 | 0 | 149 | 182 | |
| tanso | tanso | #B5A642 | 181 | 166 | 66 | |
| kayumanggi | kayumanggi | #964B00 | 150 | 75 | 0 | |
| Cerulean | Azure | #007BA7 | 0 | 123 | 167 | |
| Madilim na berdeng tagsibol | Madilim na berdeng tagsibol | #177245 | 23 | 114 | 69 | |
| Emerald | Emerald | #50C878 | 80 | 200 | 120 | |
| Talong | Talong | #990066 | 153 | 0 | 102 | |
| Fuchsia | Fuchsia | #FF00FF | 255 | 0 | 255 | |
| ginto | ginto | #FFD700 | 250 | 215 | 0 | |
| Gray | Gray | #808080 | 128 | 128 | 128 | |
| Berde | Berde | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| kalamansi | kalamansi | #CCFF00 | 204 | 255 | 0 | |
| Malachite | Malachite | #0BDA51 | 11 | 218 | 81 | |
| Navy | Madilim na asul | #000080 | 0 | 0 | 128 | |
| okre | okre | #CC7722 | 204 | 119 | 34 | |
| Olive | Olive | #808000 | 128 | 128 | 0 | |
| Kahel | Kahel | #FFA500 | 255 | 165 | 0 | |
| Peach | Peach | #FFE5B4 | 255 | 229 | 180 | |
| Kalabasa | Kalabasa | #FF7518 | 255 | 117 | 24 | |
| Lila | Violet | #800080 | 128 | 0 | 128 | |
| Pula | Pula | #FF0000 | 255 | 0 | 0 | |
| Safron | Safron | #F4C430 | 244 | 196 | 48 | |
| Berde ng Dagat | berdeng dagat | #2E8B57 | 46 | 139 | 87 | |
| Latian berde | Bolotny | #ACB78E | 172 | 183 | 142 | |
| Teal | Asul-berde | #008080 | 0 | 128 | 128 | |
| Ultramarine | Ultramarine | #120A8F | 18 | 10 | 143 | |
| Violet | Violet | #8B00FF | 139 | 0 | 255 | |
| Dilaw | Dilaw | #FFFF00 | 255 | 255 | 0 | |
Mga code ng kulay (background) ayon sa saturation at hue.
Ginagamit ang mga color code sa CSS 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 tukuyin ang iyong mga halaga ng kulay sa 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 kumakatawan sa berdeng halaga (GG), at ang huling dalawa ay kumakatawan sa 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 graphics 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 milyun-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 ng 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.
| 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 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 isang halaga mula 0 hanggang 255. Pinapayagan din na tukuyin ang kulay bilang isang porsyento, na may 100% na katumbas sa numerong 255. Una, tukuyin ang rgb na keyword, at pagkatapos ay tukuyin ang mga bahagi ng kulay sa 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 pag-unlad at ang ilang mga tampok ay maaaring magbago. Halimbawa, ang isang kulay sa RGB na format na idinagdag sa background-color property ay napatunayan, ngunit ang isang idinagdag sa background na katangian ay hindi na wasto. Kasabay nito, naiintindihan 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% ay ang maximum na halaga para sa 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
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!
Ang resulta ng halimbawang ito ay ipinapakita sa Fig. 2.
kanin. 2. Mga kulay sa web page
>>Pamamahala ng kulay
Mga halaga ng kulay ng Hexadecimal RGB
Ang mga paraan ng paglalarawan at pagproseso ng kulay ay naiiba sa isa't isa sa kung anong huling representasyon ang nilalayon ng mga ito. Ihambing natin, halimbawa, ang representasyon ng mga kulay para sa pag-print at para sa mga monitor ng computer. Sa unang kaso, ang batayan ay kinuha puti ang kulay ng papel kung saan ang tatlong pangunahing kulay ay kasunod na inilapat: asul, lila At dilaw. Ang paghahalo sa isa't isa at sa puting kulay ng papel sa iba't ibang sukat, ang tatlong pangunahing kulay na ito ay nagbibigay ng iba't ibang kulay, maliban sa purong itim, o sa kumpletong kawalan ng mga pintura ay nagbibigay sila ng puting papel. Kung magdagdag tayo ng itim na kulay sa kanila, makukuha natin CMYK-isang paraan ng pagpapadala ng kulay kapag nakuha ang kinakailangang kulay sa pamamagitan ng pagbabawas ng mga nawawalang kulay sa puti.
Sa pangalawang kaso, ang batayan ay kinuha itim ang kulay ng monitor screen, ang bawat cell nito ay kumikinang sa isa sa tatlong kulay: pula-pula, berde-berde at asul-asul. Pagkatapos, sa kumpletong kawalan ng anumang glow, nakakakuha kami ng purong itim na kulay ng screen, at alinman sa mga kinakailangang kulay ay ibinibigay ng ratio ng bawat isa sa tatlong kulay. Sa kasong ito makakakuha tayo RGB-paraan ng paghahatid ng kulay. Ang mga pangunahing kulay ay maaaring magkaroon ng mga halaga mula sa 0
sa 255
, o mula sa 0%
sa 100%
, o maaaring katawanin bilang isang hexadecimal na halaga. Sa figure sa ibaba makikita mo ang mga resulta ng paghahalo ng mga pangunahing kulay.
Ang sistema ng hexadecimal na numero, hindi katulad ng sistema ng decimal na numero, ay walang sampung digit, ngunit labing-anim - kaya ang pangalan. Alinsunod dito, maaari lamang magkaroon ng mga hindi umuulit na variant ng mga kumbinasyon ng dalawang digit - 256 , upang ipagpatuloy ang serye ng mga numero pagkatapos 9 mga sulat mula sa A sa F, samakatuwid, ang serye ay magiging ganito -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
Sa kasong ito, ang kulay ay tinukoy ng tatlong hexadecimal na numero, bawat isa ay binubuo ng dalawang digit. Tinutukoy ng unang numero ang intensity pula kulay, medium- berde, huling- asul mga kulay. Ang lahat ng mga numero ay maaaring kumuha ng mga halaga sa hanay mula sa 00 sa FF(mula 0 hanggang 255). Halimbawa: ang berdeng kulay ay ibinibigay bilang #00FF00, parang pula #FF0000, parang asul #0000FF, parang puti #FFFFFF, ang kumpletong kawalan ng kulay o itim ay ibinibigay bilang #000000 .
Sa form sa ibaba maaari mong tukuyin ang anumang mga halaga ng hexadecimal para sa bawat isa sa tatlong kulay at makita ang resulta ng paghahalo ng mga ito sa pamamagitan ng pag-click sa field ng output.
Mga halimbawa ng ilang halaga ng kulay ng hexadecimal RGB: mga gradasyon ng pula, asul at berde.
| tingnan | code | tingnan | code | tingnan | code | tingnan | code | tingnan | code | tingnan | code |
| #010000 | #800000 | #000100 | #008000 | #000001 | #000080 | ||||||
| #100000 | #900000 | #001000 | #009000 | #000010 | #000090 | ||||||
| #200000 | #A00000 | #002000 | #00A000 | #000020 | #0000A0 | ||||||
| #300000 | #B00000 | #003000 | #00B000 | #000030 | #0000B0 | ||||||
| #400000 | #C00000 | #004000 | #00C000 | #000040 | #0000C0 | ||||||
| #500000 | #D00000 | #005000 | #00D000 | #000050 | #0000D0 | ||||||
| #600000 | #E00000 | #006000 | #00E000 | #000060 | #0000E0 | ||||||
| #700000 | #FF0000 | #007000 | #00FF00 | #000070 | #0000FF |
Pagtukoy ng Kulay Gamit ang String Literal
Para sa kadalian ng paggamit, ang ilang mga kulay at ang kanilang mga kumbinasyon ay itinalaga ng mga pangalan na kinikilala ng lahat ng mga browser, at naging posible na tukuyin ang marami sa kanila sa pamamagitan ng pangalan. Ipinapakita ng talahanayan sa ibaba ang ilan sa mga pangalan ng kulay:
| tingnan | Pangalan | tingnan | Pangalan | tingnan | Pangalan | tingnan | Pangalan |
| Puti | Pula | Kahel | Dilaw | ||||
| Berde | Asul | Lila | Itim | ||||
| Aliceblue | Antique na puti | Aqua | Aquamarine | ||||
| Azure | Beige | Bisque | Blanchedalmond | ||||
| Blueviolet | kayumanggi | Burlywood | Cadetblue | ||||
| Chartreuse | tsokolate | Coral | cornflower blue | ||||
| Cornsilk | Crimson | Cyan | Madilim na asul | ||||
| Darkcyan | Darkgoldenrod | Darkgray | Madilim na berde | ||||
| Darkkhaki | Darkmagenta | darkolivegreen | Madilim na kahel | ||||
| Darkorchid | Madilim | Darksalmon | Darkseagreen | ||||
| Darkslateblue | Darkslategray | Darkturquoise | Darkviolet | ||||
| Deeppink | Deepskyblue | Dimgray | Dodgeblue | ||||
| Firebrick | Floralwhite | Forestgreen | Fuschia | ||||
| Gainsboro | Ghostwhite | ginto | Goldenrod | ||||
| Gray | Berde dilaw | Honeydew | Hotpink | ||||
| Indianred | Indigo | Ivory | Khaki | ||||
| Lavender | Lavenderblush | Lemonchiffon | Lightblue | ||||
| Lightcoral | Lightcyan | Lightcoldenrodyellow | Lightgreen | ||||
| Maliwanag na kulay abo | Lightpink | Lightsalmon | Lightseagreen | ||||
| Lightskyblue | Lightslategray | Lightsteelblue | Banayad na dilaw | ||||
| kalamansi | Limegreen | Linen | Magenta | ||||
| Maroon | Meumaquamarine | Katamtamang asul | Mediumorchid | ||||
| Meumpurple | Mediumseagreen | Mediumslateblue | Mediumspringgreen | ||||
| Katamtamang turquoise | Mediumvioletred | Midnightblue | Mintcream | ||||
| Mistyrose | Navajowhite | Navy | Oldlace | ||||
| Olive | Oliverab | Kulay kahel | Orchid | ||||
| Palegoldenrod | Palegreen | Paletteurquoise | Palevioletred | ||||
| Papayawhip | Peachpuff | Peru | Rosas | ||||
| Plum | Powderblue | Rosybrown | Royalblue | ||||
| Saddlebrown | Seagreen | Kabibi | Sienna | ||||
| pilak | Skyblue | Slateblue | Slategray | ||||
| niyebe | Springgreen | Steelblue | Tan | ||||
| Teal | Thistle | Kamatis | Turkesa | ||||
| Violet | trigo | Whitesmoke | Yellowgreen |
Paggamit ng isang ligtas na paleta ng kulay
Sa kasamaang palad, sa iba't ibang mga platform, na may iba't ibang mga setting ng system, ang tamang pagpaparami ng kulay ay isang problema. Ang bagay ay palaging sinusubukan ng browser na ayusin ang paleta ng kulay ng dokumento sa mga setting ng system at mga kakayahan sa pagsubaybay, sa pamamagitan ng malayang paghahalo ng mga kulay at pagpapalit sa kanila. Bilang resulta, minsan hindi nakikita ng user kung ano mismo ang gustong ipakita sa kanya ng webmaster. Ang isang paraan sa labas ng sitwasyong ito ay natagpuan sa paggamit ng isang palette, ang bawat kulay nito ay garantisadong mai-render nang pantay-pantay ng lahat ng mga browser sa iba't ibang mga platform. Ito ang tinatawag na garantisadong palette, tinatawag din ligtas palette. Kasama sa palette na ito ang mga kulay na ang mga bahagi ng kulay ay kumukuha ng mga sumusunod na halaga: 00 ,33 ,66 ,99 , CC,FF, sa lahat ng posibleng paraan 216 kanilang mga kumbinasyon.
| tingnan | code | tingnan | code | tingnan | code | tingnan | code | tingnan | code | tingnan | code |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66FF00 | 66FF33 | 33FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33FF99 | 00FF99 | 33CC66 | 00CC66 | 009933 | ||||||
| 66CC99 | 33CC99 | 00CC99 | 339966 | 009966 | 006633 | ||||||
| 99FFCC | 66FFCC | 33FFCC | 00FFCC | 33CCCC | 009999 | ||||||
| CCFFFF | 99FFFF | 66FFFF | 33FFFF | 00FFFF | 00CCCC | ||||||
| 99CCCC | 66CCCC | 339999 | 669999 | 006666 | 336666 | ||||||
| 66CCFF | 33CCFF | 00CCFF | 3399CC | 0099CC | 003333 | ||||||
| 99CCFF | 3399FF | 0099FF | 6699CC | 336699 | 006699 | ||||||
| 0066FF | 3366CC | 0066CC | 0033FF | 003399 | 003366 | ||||||
| 6699FF | 3366FF | 0000FF | 0000CC | 0033CC | 000033 | ||||||
| 3333FF | 3300FF | 3300CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900FF | 660099 | 663366 | ||||||
| CC66FF | CC33FF | CC00FF | 9900CC | 996699 | 660066 | ||||||
| CC99CC | CC66CC | CC33CC | CC00CC | 990099 | 993399 | ||||||
| FFCCFF | FF99FF | FF66FF | FF33FF | FF00FF | CC3399 | ||||||
| FF66CC | FF00CC | FF33CC | CC6699 | CC0099 | 990066 | ||||||
| FF99CC | FF3399 | FF0099 | CC0066 | 993366 | 660033 | ||||||
| FF6699 | FF3399 | FF0066 | CC3366 | 996666 | 663333 | ||||||
| CC9999 | CC6666 | CC3333 | CC0000 | 990033 | 330000 | ||||||
| FFCCCC | FF9999 | FF6666 | FF3333 | FF0000 | CC0033 | ||||||
| FF6633 | CC3300 | FF3300 | FF0000 | CC0000 | 990000 | ||||||
| FFCC99 | FFCC66 | FF6600 | CC6633 | 993300 | 660000 | ||||||
| FF9900 | FF9933 | CC9966 | CC6600 | 996633 | 663300 | ||||||
| FFCC66 | FFCC00 | FFCC33 | CC9900 | CC9933 | 996600 | ||||||
| FFFFCC | FFFF99 | FFFF66 | FFFF33 | FFFF00 | CCCC00 |
