Vlad Merzhevich
Sa HTML, ang kulay ay tinukoy sa isa sa dalawang paraan: gamit ang hexadecimal code at sa pamamagitan ng pangalan ng ilang partikular na kulay. Ang paraan batay sa sistema ng hexadecimal na numero ay higit na ginagamit, dahil ito ang pinaka-unibersal.
Hexadecimal na mga kulay
Gumagamit ang HTML ng mga hexadecimal na numero upang tukuyin ang mga kulay. Ang hexadecimal system, hindi katulad ng decimal system, ay nakabatay, gaya ng ipinahihiwatig ng pangalan nito, sa numerong 16. Ang mga numero ay magiging ganito: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Ang mga numero mula 10 hanggang 15 ay pinapalitan ng mga letrang Latin. Sa mesa Ipinapakita ng 6.1 ang pagsusulatan sa pagitan ng decimal at hexadecimal na mga numero.
Ang mga numerong higit sa 15 sa hexadecimal system ay nabuo sa pamamagitan ng pagsasama-sama ng dalawang numero sa isa (Talahanayan 6.2). Halimbawa, ang numerong 255 sa decimal ay tumutugma sa numerong FF sa hexadecimal.
Upang maiwasan ang pagkalito sa pagtukoy sa sistema ng numero, ang isang hexadecimal na numero ay pinangungunahan ng isang simbolo ng hash #, halimbawa #aa69cc. Sa kasong ito, hindi mahalaga ang kaso, kaya pinahihintulutang isulat ang #F0F0F0 o #f0f0f0.
Ang isang karaniwang kulay na ginagamit sa HTML ay ganito ang hitsura.
Dito nakatakda ang kulay ng background ng web page sa #FA8E47. Ang simbolo ng hash # sa harap ng isang numero ay nangangahulugan na ito ay hexadecimal. Tinutukoy ng unang dalawang digit (FA) ang pulang bahagi ng kulay, ang pangatlo hanggang ikaapat na digit (8E) ay tumutukoy sa berdeng bahagi, at ang huling dalawang digit (47) ay tumutukoy sa asul na bahagi. Ang huling resulta ay magiging kulay na ito.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
Ang bawat isa sa tatlong kulay - pula, berde at asul - ay maaaring tumagal ng mga halaga mula 00 hanggang FF, na nagreresulta sa kabuuang 256 na kulay. Kaya, ang kabuuang bilang ng mga kulay ay maaaring 256x256x256 = 16,777,216 na kumbinasyon. Ang isang modelo ng kulay batay sa pula, berde at asul na mga bahagi ay tinatawag na RGB (pula, berde, asul; pula, berde, asul). Ang modelong ito ay additive (mula sa add - add), kung saan ang pagdaragdag ng lahat ng tatlong bahagi ay bumubuo ng kulay na puti.
Upang gawing mas madali ang pag-navigate sa mga kulay ng hexadecimal, isaalang-alang ang ilang mga panuntunan.
- Kung ang mga halaga ng mga bahagi ng kulay ay pareho (halimbawa: #D6D6D6), ang resulta ay isang kulay-abo na tint. Kung mas mataas ang numero, mas magaan ang kulay, na may mga halaga mula sa #000000 (itim) hanggang #FFFFFF (puti).
- Ang isang maliwanag na pulang kulay ay nabuo kung ang pulang bahagi ay ginawang maximum (FF) at ang natitirang mga bahagi ay nakatakda sa zero. Ang isang kulay na may halagang #FF0000 ay ang pinakamapulang posibleng pulang lilim. Ang parehong ay totoo para sa berde (#00FF00) at asul (#0000FF).
- Ang dilaw (#FFFF00) ay ginawa sa pamamagitan ng paghahalo ng pula at berde. Ito ay malinaw na nakikita sa color wheel (Fig. 6.1), na nagpapakita ng mga pangunahing kulay (pula, berde, asul) at mga pantulong o karagdagang mga kulay. Kabilang dito ang dilaw, cyan at violet (tinatawag ding magenta). Sa pangkalahatan, ang anumang kulay ay maaaring makuha sa pamamagitan ng paghahalo ng mga kulay na malapit dito. Kaya, ang cyan (#00FFFF) ay nakuha sa pamamagitan ng pagsasama ng asul at berde.
kanin. 6.1. Kulay ng bilog
Ang mga kulay batay sa mga halaga ng hexadecimal ay hindi kailangang piliin nang empirikal. Para sa layuning ito, ang isang graphic editor na maaaring gumana sa iba't ibang mga modelo ng kulay, halimbawa, Adobe Photoshop, ay angkop. Sa Fig. Ipinapakita ng Figure 6.2 ang window para sa pagpili ng isang kulay sa program na ito; ang resultang hexadecimal na halaga ng kasalukuyang kulay ay nakabalangkas sa isang linya. Maaari mong kopyahin at i-paste ito sa iyong code.
kanin. 6.2. Window para sa pagpili ng mga kulay sa Photoshop
Mga kulay sa web
Kung itatakda mo ang kalidad ng pag-render ng kulay ng monitor sa 8 bits (256 na kulay), kung gayon ang parehong kulay ay maaaring ipakita sa iba't ibang mga browser. Ito ay dahil sa paraan ng pagpapakita ng mga graphics, kapag ang browser ay gumagana sa sarili nitong palette at hindi maaaring magpakita ng kulay na wala sa palette nito. Sa kasong ito, ang kulay ay pinalitan ng isang kumbinasyon ng mga pixel ng iba, malapit dito, mga kulay na ginagaya ang ibinigay. Upang matiyak na ang kulay ay nananatiling pareho sa iba't ibang mga browser, isang palette ng tinatawag na mga kulay ng web ay ipinakilala. Ang mga kulay sa web ay ang mga kulay kung saan ang bawat bahagi - pula, berde at asul - ay nakatakda sa isa sa anim na halaga - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Ang hexadecimal na halaga ng bahaging ito ay ipinahiwatig sa mga bracket. Ang kabuuang bilang ng mga kulay mula sa lahat ng posibleng kumbinasyon ay nagbibigay ng 6x6x6 - 216 na kulay. Ang isang halimbawa ng kulay ng web ay #33FF66.
Ang pangunahing tampok ng kulay ng web ay ang hitsura nito ay pareho sa lahat ng mga browser. Sa ngayon, ang kaugnayan ng mga kulay ng web ay napakaliit dahil sa pagpapabuti ng kalidad ng mga monitor at pagpapalawak ng kanilang mga kakayahan.
Mga kulay ayon sa pangalan
Upang maiwasang matandaan ang isang hanay ng mga numero, maaari mong gamitin sa halip ang mga pangalan ng mga karaniwang ginagamit na kulay. Sa mesa Ipinapakita ng 6.3 ang mga pangalan ng mga sikat na pangalan ng kulay.
| Pangalan ng kulay | Kulay | Paglalarawan | Halaga ng hexadecimal |
|---|---|---|---|
| itim | Itim | #000000 | |
| asul | Asul | #0000FF | |
| fuchsia | Banayad na lila | #FF00FF | |
| kulay-abo | Madilim na kulay abo | #808080 | |
| berde | Berde | #008000 | |
| kalamansi | Banayad na berde | #00FF00 | |
| maroon | Madilim na pula | #800000 | |
| hukbong-dagat | Madilim na asul | #000080 | |
| olibo | Olive | #808000 | |
| lila | Madilim na lila | #800080 | |
| pula | Pula | #FF0000 | |
| pilak | Banayad na kulay abo | #C0C0C0 | |
| teal | Asul-berde | #008080 | |
| puti | Puti | #FFFFFF | |
| dilaw | Dilaw | #FFFF00 |
Hindi mahalaga kung tumukoy ka ng isang kulay sa pamamagitan ng pangalan nito o sa pamamagitan ng paggamit ng mga numerong hexadecimal. Ang mga pamamaraang ito ay pantay sa kanilang epekto. Ipinapakita ng Halimbawa 6.1 kung paano itakda ang background at mga kulay ng teksto ng isang web page.
Halimbawa 6.1. Kulay ng background at teksto
Halimbawa ng teksto
Sa halimbawang ito, itinakda ang kulay ng background gamit ang attribute na bgcolor ng tag
, at ang kulay ng teksto sa pamamagitan ng katangian ng teksto. Para sa iba't-ibang, ang katangian ng teksto ay nakatakda sa isang hexadecimal na numero, at ang katangian ng bgcolor ay nakatakda sa nakareserbang keyword na teal .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 magagamit 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 kulay. At 216 ligtas na mga kulay ay lumubog sa limot.
Ang mga data na ito ay ganap na nakumpirma ng mga istatistika. Sa paghusga sa pamamagitan nito, noong 2014, 0.5% lang ng mga user ang may mga computer na sumusuporta lamang sa 256 shades.
Mga pangunahing kaalaman sa pagkakatugma ng kulay
Hindi lahat sa atin ay pinagkalooban ng natural na magkatugma na panlasa. Samakatuwid, ang pagpili ng tamang kulay ay maaaring maging isang tunay na hamon. Ngunit, papuri sa agham, nagawa niyang ilarawan ang pagkakatugma ng kulay sa anyo ng ilang mga scheme. Ang lahat ng mga ito ay batay sa paggamit ng isang color wheel. Mga scheme para sa maayos na pagpili ng mga kulay sa html.
Ang pahinang ito ay naglalaman ng isang talahanayan na may mga keyword na maaaring magamit upang tukuyin ang mga kulay sa mga wika ng Web developer tulad ng: HTML, CSS, JavaScript, Flash, atbp.
Sa mga lumang detalye para sa pag-aalala sa WC3, 16 na keyword lamang ang tinukoy, sa tulong ng kung aling mga kulay ang itinakda sa HTML at CSS. Sa karagdagang, mas modernong mga detalye, isa pang 130 mga keyword ay idinagdag upang ipahiwatig ang mga pangalan ng kulay. Ang sumusunod na talahanayan ay naglalaman ng mga pangalan ng kulay at ang hex at RGB na mga code na katumbas ng mga ito.
Ayon sa mga panuntunan ng CSS, ang mga pangalan ng kulay ay hindi case sensitive. Ang mga entry ng kulay na IndianRed at indianred ay katumbas.
Kapansin-pansin din na sa 146 na mga keyword sa talahanayan, mayroon talagang mas kaunting mga kulay dito. Ito ay dahil ang ilang mga keyword ay tumutukoy sa parehong kulay. Kaya, ang mga pangalang Gray at Gray ay kumakatawan sa 50% gray na color code #808080, at ang salitang Magenta ay isang kasingkahulugan para sa HTML na kulay na Fuchsia, na tumutugma sa hexadecimal code #FF00FF. Magkasingkahulugan din ang mga salitang Aqua at Cyan, tumutugma sila sa code #00FFFF.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Ang mga kulay ng HTML ay ipinapahiwatig ng anim na character pagkatapos ng slash character - halimbawa, #000000. Ang anim na simbolo na ito ay kumakatawan sa mga proporsyon ng iba't ibang kulay (Red, Green, Blue) sa huling kulay. Sa monitor ng iyong computer, ang imahe ay nabuo mula sa isang malaking bilang ng mga tuldok na tinatawag na mga pixel. Ang bawat pixel ay isang maliit na pinagmumulan ng liwanag, tawagin natin itong "flashlight", na binubuo naman ng tatlong flashlight - pula, berde at asul. Sa pamamagitan ng pagbaba o pagtaas ng intensity ng glow ng mga indibidwal na kulay na flashlight, nakukuha namin ang ninanais na kulay.
Mga code ng kulay ng HTML
Ang mga kulay sa HTML ay kinakatawan ng isang hexadecimal (HEX) notation ng pula, asul, at berde (RGB).
Ang pinakamaliit na halaga ng kulay ay 0 (hexadecimal 00). Ang pinakamataas na halaga ng kulay ay 255 (hex FF).
Ang halaga ng kulay ng hexadecimal ay tatlong digit na nagsisimula sa # sign.
Mga code ng kulay (mga kahulugan)
| Kulay | HEX code | RGB code |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
16 milyong shade
Ang pagsasama-sama ng pula, asul, at berde na may mga halagang mula 0 hanggang 255 para sa porsyento ng bawat kulay ay nagreresulta sa kabuuang higit sa 16 milyong shade (256 x 256 x 256).
Karamihan sa mga modernong monitor ay may kakayahang magpakita ng hindi bababa sa 16,384 iba't ibang mga kulay (LCD monitor ay karaniwang may kakayahang magpakita ng 262 libo 16 milyon (na-update noong Oktubre 2013) kulay, at ang mga CRT monitor ay maaaring magpakita ng halos walang limitasyong bilang ng mga kulay).
Ang talahanayan ng kulay sa ibaba ay nagpapakita ng pagbabago sa proporsyon ng pula mula 0 hanggang 255 na may mga zero na halaga para sa asul at berde:
| Pula | HEX code | RGB code |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080000 | rgb(8,0,0) | |
| #100000 | rgb(16,0,0) | |
| #180000 | rgb(24,0,0) | |
| #200000 | rgb(32,0,0) | |
| #280000 | rgb(40,0,0) | |
| #300000 | rgb(48,0,0) | |
| #380000 | rgb(56,0,0) | |
| #400000 | rgb(64,0,0) | |
| #480000 | rgb(72,0,0) | |
| #500000 | rgb(80,0,0) | |
| #580000 | rgb(88,0,0) | |
| #600000 | rgb(96,0,0) | |
| #680000 | rgb(104,0,0) | |
| #700000 | rgb(112,0,0) | |
| #780000 | rgb(120,0,0) | |
| #800000 | rgb(128,0,0) | |
| #880000 | rgb(136,0,0) | |
| #900000 | rgb(144,0,0) | |
| #980000 | rgb(152,0,0) | |
| #A00000 | rgb(160,0,0) | |
| #A80000 | rgb(168,0,0) | |
| #B00000 | rgb(176,0,0) | |
| #B80000 | rgb(184,0,0) | |
| #C00000 | rgb(192,0,0) | |
| #C80000 | rgb(200,0,0) | |
| #D00000 | rgb(208,0,0) | |
| #D80000 | rgb(216,0,0) | |
| #E00000 | rgb(224,0,0) | |
| #E80000 | rgb(232,0,0) | |
| #F00000 | rgb(240,0,0) | |
| #F80000 | rgb(248,0,0) | |
| #FF0000 | rgb(255,0,0) |
Shades of Gray
Upang makakuha ng mga kulay ng kulay abo, pantay na bahagi ng lahat ng mga kulay ang ginagamit. Upang gawing mas madali para sa iyo na pumili ng tamang kulay, binibigyan ka namin ng mga gray shade code
| Shades of Gray | HEX code | RGB code |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | |
| #101010 | rgb(16,16,16) | |
| #181818 | rgb(24,24,24) | |
| #202020 | rgb(32,32,32) | |
| #282828 | rgb(40,40,40) | |
| #303030 | rgb(48,48,48) | |
| #383838 | rgb(56,56,56) | |
| #404040 | rgb(64,64,64) | |
| #484848 | rgb(72,72,72) | |
| #505050 | rgb(80,80,80) | |
| #585858 | rgb(88,88,88) | |
| #606060 | rgb(96,96,96) | |
| #686868 | rgb(104,104,104) | |
| #707070 | rgb(112,112,112) | |
| #787878 | rgb(120,120,120) | |
| #808080 | rgb(128,128,128) | |
| #888888 | rgb(136,136,136) | |
| #909090 | rgb(144,144,144) | |
| #989898 | rgb(152,152,152) | |
| #A0A0A0 | rgb(160,160,160) | |
| #A8A8A8 | rgb(168,168,168) | |
| #B0B0B0 | rgb(176,176,176) | |
| #B8B8B8 | rgb(184,184,184) | |
| #C0C0C0 | rgb(192,192,192) | |
| #C8C8C8 | rgb(200,200,200) | |
| #D0D0D0 | rgb(208,208,208) | |
| #D8D8D8 | rgb(216,216,216) | |
| #E0E0E0 | rgb(224,224,224) | |
| #E8E8E8 | rgb(232,232,232) | |
| #F0F0F0 | rgb(240,240,240) | |
| #F8F8F8 | rgb(248,248,248) | |
| #FFFFFF | rgb(255,255,255) |
Cross-browser (lahat ng browser) html na mga pangalan ng kulay
Isang koleksyon ng 150 mga pangalan ng kulay sa html, suportado sa lahat ng mga browser.
Standardized na mga pangalan ng kulay
Inililista ng W3C ang 16 na wastong pangalan ng kulay para sa HTML at CSS: aqua, black, blue, fuchsia, gray, green, lime, maroon (chestnut), navy (ultramarine), olive (olive), purple (purple), red (red) , pilak (pilak), teal (grey), puti (puti) at dilaw (dilaw).
Kapag gumagamit ng mga kulay na hindi kasama sa listahang ito, mas tamang gamitin ang kanilang hexadecimal (HEX) code o RGB code.
Ligtas na mga kulay
Ilang taon na ang nakalilipas, nang masuportahan ng mga computer ang maximum na 256 iba't ibang kulay, isang listahan ng 216 "Web Safe Colors" ang iminungkahi, na may 40 na kulay na nakalaan para sa system.
Ang 216-color na palette na ito ay nilikha upang maayos na magpakita ng mga kulay sa 256-color palette mode.
Ngayon hindi na ito mahalaga dahil karamihan sa mga computer sa buong mundo ay sumusuporta sa milyun-milyong shade ng kulay. Sa anumang kaso, narito ang isang listahan ng mga kulay na ito:
| 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 |
Ginagamit ang mga color code sa CSS upang tukuyin ang mga kulay. Kadalasan, ginagamit ang mga color code o mga 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 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 |
