Krāsas un to numuri. HTML apmācība
HTML valodā krāsu var norādīt trīs veidos:
Krāsas iestatīšana HTML pēc nosaukuma
Dažas krāsas var norādīt pēc to nosaukuma, kā vērtību izmantojot krāsas nosaukumu angļu valodā. Visizplatītākie atslēgvārdi: melns, balts, sarkans, zaļš, zils utt.:
Teksta krāsa – sarkana
Vispopulārākās World Wide Web Consortium (W3C) standarta krāsas:
| Krāsa | Vārds | Krāsa | Vārds | Krāsa | Vārds | Krāsa | Vārds |
|---|---|---|---|---|---|---|---|
| Melns | Pelēks | Sudrabs | Balts | ||||
| Dzeltens | Laima | Aqua | Fuksija | ||||
| Sarkans | Zaļš | Zils | Violeta | ||||
| Maroon | Olīva | Navy | Teal |
Dažādu krāsu nosaukumu izmantošanas piemērs:
Piemērs: krāsas norādīšana pēc tās nosaukuma
- Izmēģiniet to pats »
Galvene uz sarkana fona
Virsraksts uz oranža fona
Virziens uz laima fona
Balts teksts uz zila fona
Galvene uz sarkana fona
Virsraksts uz oranža fona
Virziens uz laima fona
Balts teksts uz zila fona
Krāsu norādīšana, izmantojot RGB
Monitorā attēlojot dažādas krāsas, par pamatu tiek izmantota RGB palete. Jebkura krāsa tiek iegūta, sajaucot trīs pamata krāsas: R - sarkans, G - zaļš, B - zils. Katras krāsas spilgtums tiek norādīts ar vienu baitu, un tāpēc tas var būt no 0 līdz 255. Piemēram, RGB(255,0,0) tiek parādīts kā sarkans, jo sarkanā ir iestatīta tā augstākā vērtība (255) un pārējais ir iestatīts uz 0 Varat arī iestatīt krāsu kā procentus. Katrs parametrs norāda atbilstošās krāsas spilgtuma līmeni. Piemēram: vērtības rgb(127, 255, 127) un rgb(50%, 100%, 50%) iestatīs tādu pašu vidēji zaļu krāsu:
Piemērs: krāsas norādīšana, izmantojot RGB
- Izmēģiniet to pats »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Iestatiet krāsu pēc heksadecimālās vērtības
Vērtības R G B var norādīt arī, izmantojot heksadecimālās (HEX) krāsu vērtības šādā formā: #RRGGBB kur RR (sarkans), GG (zaļš) un BB (zils) ir heksadecimālās vērtības no 00 līdz FF (tas pats kā decimālais 0-255 ) . Heksadecimālā sistēma, atšķirībā no decimālās sistēmas, balstās, kā norāda tās nosaukums, uz skaitli 16. Heksadecimālajā sistēmā tiek izmantotas šādas zīmes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Šeit ciparus no 10 līdz 15 aizstāj ar latīņu burtiem. Skaitļi, kas ir lielāki par 15 heksadecimālajā sistēmā, tiek attēloti, apvienojot divas rakstzīmes vienā vērtībā. Piemēram, lielākais skaitlis 255 decimāldaļā atbilst lielākajai FF vērtībai heksadecimāldaļā. Atšķirībā no decimālās sistēmas, heksadecimālā skaitļa priekšā ir jaucējzīmes simbols. # , piemēram, #FF0000 tiek parādīts kā sarkans, jo sarkanajam ir iestatīta tā augstākā vērtība (FF), bet pārējām krāsām ir iestatīta minimālā vērtība (00). Zīmes aiz hash simbola # Varat rakstīt gan lielos, gan mazos burtus. Heksadecimālā sistēma ļauj izmantot saīsinātu formu #rgb, kur katra rakstzīme ir līdzvērtīga dubultā. Tādējādi ieraksts #f7O jāuzskata par #ff7700.
Piemērs: HEX krāsa
- Izmēģiniet to pats »
sarkans: #FF0000
zaļš: #00FF00
zils: #0000FF
sarkans: #FF0000
zaļš: #00FF00
zils: #0000FF
sarkans+zaļš=dzeltens: #FFFF00
sarkans+zils=violeta: #FF00FF
zaļš+zils=ciāna: #00FFFF
Parasto krāsu saraksts (nosaukums, HEX un RGB):
| nosaukums angļu valodā | Krievu nosaukums | Paraugs | HEX | RGB | ||
|---|---|---|---|---|---|---|
| Amarants | Amarants | #E52B50 | 229 | 43 | 80 | |
| Dzintars | Dzintars | #FFBF00 | 255 | 191 | 0 | |
| Aqua | Zili zaļš | #00FFFF | 0 | 255 | 255 | |
| debeszils | debeszils | #007FFF | 0 | 127 | 255 | |
| Melns | Melns | #000000 | 0 | 0 | 0 | |
| Zils | Zils | #0000FF | 0 | 0 | 255 | |
| Bondi Blue | Bondi pludmales ūdens | #0095B6 | 0 | 149 | 182 | |
| Misiņš | Misiņš | #B5A642 | 181 | 166 | 66 | |
| Brūns | Brūns | #964B00 | 150 | 75 | 0 | |
| Cerulean | debeszils | #007BA7 | 0 | 123 | 167 | |
| Tumši pavasara zaļš | Tumši pavasara zaļš | #177245 | 23 | 114 | 69 | |
| Smaragds | Smaragds | #50C878 | 80 | 200 | 120 | |
| Baklažāni | Baklažāni | #990066 | 153 | 0 | 102 | |
| Fuksija | Fuksija | #FF00FF | 255 | 0 | 255 | |
| Zelts | Zelts | #FFD700 | 250 | 215 | 0 | |
| Pelēks | Pelēks | #808080 | 128 | 128 | 128 | |
| Zaļš | Zaļš | #00FF00 | 0 | 255 | 0 | |
| Indigo | Indigo | #4B0082 | 75 | 0 | 130 | |
| Jade | Jade | #00A86B | 0 | 168 | 107 | |
| Laima | Laima | #CCFF00 | 204 | 255 | 0 | |
| Malahīts | Malahīts | #0BDA51 | 11 | 218 | 81 | |
| Navy | Tumši zils | #000080 | 0 | 0 | 128 | |
| Ohre | Ocher | #CC7722 | 204 | 119 | 34 | |
| Olīva | Olīva | #808000 | 128 | 128 | 0 | |
| Oranžs | Oranžs | #FFA500 | 255 | 165 | 0 | |
| Persiku | Persiku | #FFE5B4 | 255 | 229 | 180 | |
| Ķirbis | Ķirbis | #FF7518 | 255 | 117 | 24 | |
| Violeta | Violeta | #800080 | 128 | 0 | 128 | |
| Sarkans | Sarkans | #FF0000 | 255 | 0 | 0 | |
| Safrāns | Safrāns | #F4C430 | 244 | 196 | 48 | |
| Jūras zaļa | Zaļā jūra | #2E8B57 | 46 | 139 | 87 | |
| Purva zaļa | Bolotnijs | #ACB78E | 172 | 183 | 142 | |
| Teal | Zili zaļš | #008080 | 0 | 128 | 128 | |
| Ultramarīns | Ultramarīns | #120A8F | 18 | 10 | 143 | |
| Violeta | Violeta | #8B00FF | 139 | 0 | 255 | |
| Dzeltens | Dzeltens | #FFFF00 | 255 | 255 | 0 | |
Krāsu kodi (fons) pēc piesātinājuma un nokrāsas.
Heksadecimālos skaitļus izmanto, lai norādītu krāsas. Heksadecimālā sistēma atšķirībā no decimālās sistēmas, kā norāda tās nosaukums, ir balstīta uz skaitli 16. Skaitļi būs šādi: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Cipari no 10 līdz 15 tiek aizstāti ar latīņu burtiem. Skaitļi, kas ir lielāki par 15 heksadecimālajā sistēmā, tiek veidoti, apvienojot divus skaitļus vienā. Piemēram, skaitlis 255 decimāldaļās atbilst skaitlim FF heksadecimāldaļā. Lai izvairītos no neskaidrībām skaitļu sistēmas noteikšanā, pirms heksadecimālā skaitļa tiek ievietots jaucējsimbols #, piemēram, #666999. Katrai no trim krāsām - sarkanai, zaļai un zilai - var būt vērtības no 00 līdz FF. Tādējādi krāsas simbols ir sadalīts trīs komponentos #rrggbb, kur pirmie divi simboli norāda krāsas sarkano komponentu, divi vidējie - zaļo, bet pēdējie divi - zilo. Atļauts izmantot saīsināto formu #rgb, kur katra rakstzīme jādubulto. Tādējādi ieraksts #fe0 jāuzskata par #ffee00.
Pēc vārda
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Pārlūkprogrammas atbalsta dažas krāsas pēc to nosaukuma. Tabulā 1 parāda nosaukumus, heksadecimālo kodu, RGB, HSL vērtības un aprakstu.
| Vārds | Krāsa | Kods | RGB | HSL | Apraksts |
|---|---|---|---|---|---|
| balts | #ffffff vai #ffff | rgb (255 255 255) | hsl (0,0%, 100%) | Balts | |
| sudrabs | #c0c0c0 | rgb(192,192,192) | hsl (0,0%, 75%) | Pelēks | |
| pelēks | #808080 | rgb(128,128,128) | hsl (0,0%, 50%) | Tumši pelēks | |
| melns | #000000 vai #000 | rgb(0,0,0) | hsl (0,0%, 0%) | Melns | |
| sarkanbrūns | #800000 | rgb(128,0,0) | hsl (0,100%, 25%) | Tumši sarkans | |
| sarkans | #ff0000 vai #f00 | rgb(255;0,0) | hsl(0,100%,50%) | Sarkans | |
| oranža | #ffa500 | rgb(255,165,0) | hsl (38,8 100%, 50%) | Oranžs | |
| dzeltens | #ffff00 vai #ff0 | rgb(255,255,0) | hsl(60,100%,50%) | Dzeltens | |
| olīvu | #808000 | rgb(128,128,0) | hsl (60 100%, 25%) | Olīva | |
| kaļķi | #00ff00 vai #0f0 | rgb(0,255,0) | hsl(120,100%,50%) | Gaiši zaļš | |
| zaļš | #008000 | rgb(0,128,0) | hsl (120 100%, 25%) | Zaļš | |
| aqua | #00ffff vai #0ff | rgb(0,255,255) | hsl(180,100%,50%) | Zils | |
| zils | #0000ff vai #00f | rgb(0,0,255) | hsl(240,100%,50%) | Zils | |
| flote | #000080 | rgb(0,0,128) | hsl (240 100%, 25%) | Tumši zils | |
| zilganzaļa | #008080 | rgb(0,128,128) | hsl(180,100%,25%) | Zili zaļš | |
| fuksija | #ff00ff vai #f0f | rgb(255;0,255) | hsl(300,100%,50%) | Rozā | |
| violets | #800080 | rgb(128;0,128) | hsl(300,100%,25%) | Violeta |
Izmantojot RGB
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 5.0+ | 1.0+ | 3.5+ | 1.3+ | 1.0+ | 1.0+ | 1.0+ |
Jūs varat definēt krāsu, izmantojot sarkanās, zaļās un zilās vērtības decimāldaļās. Katram no trim krāsu komponentiem ir vērtība no 0 līdz 255. Krāsu ir atļauts norādīt arī procentos, kur 100% atbilst skaitlim 255. Vispirms norādiet rgb atslēgvārdu un pēc tam iekavās norādiet krāsu komponentus. , atdalot ar komatiem, piemēram, rgb(255 , 128, 128) vai 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+ |
RGBA formāts pēc sintakses ir līdzīgs RGB, taču tajā ir iekļauts alfa kanāls, kas norāda elementa caurspīdīgumu. Vērtība 0 ir pilnībā caurspīdīga, 1 ir necaurspīdīga, un starpvērtība, piemēram, 0,5, ir daļēji caurspīdīga.
RGBA tika pievienots CSS3, tāpēc CSS kods ir jāvalidē pret šo versiju. Jāatzīmē, ka CSS3 standarts joprojām ir izstrādes stadijā un dažas funkcijas var mainīties. Piemēram, krāsa RGB formātā, kas pievienota rekvizītam fona krāsa, tiek pārbaudīta, bet fona rekvizītam pievienotā krāsa vairs nav derīga. Tajā pašā laikā pārlūkprogrammas diezgan pareizi saprot abu rekvizītu krāsu.
HSL
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSL formāta nosaukums ir atvasināts no pirmo burtu kombinācijas Hue (hue), Saturate (piesātinājums) un Lightness (lightness). Nokrāsa ir krāsas vērtība krāsu aplī (1. att.) un tiek norādīta grādos. 0° atbilst sarkanajam, 120° zaļajam un 240° zilajam. Nokrāsas vērtība var mainīties no 0 līdz 359.
Rīsi. 1. Krāsu ritenis
Piesātinājums ir krāsas intensitāte, un to mēra procentos no 0% līdz 100%. Vērtība 0% norāda, ka nav krāsas un ir pelēks tonis, 100% ir maksimālā piesātinājuma vērtība.
Gaišums norāda, cik spilgta ir krāsa, un tiek norādīts procentos no 0% līdz 100%. Zemas vērtības padara krāsu tumšāku, bet augstas vērtības padara krāsu gaišāku, galējās vērtības 0% un 100% atbilst melnbaltai.
HSLA
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.0+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
HSLA formāts pēc sintakses ir līdzīgs HSL, taču ietver alfa kanālu, lai norādītu elementa caurspīdīgumu. Vērtība 0 ir pilnībā caurspīdīga, 1 ir necaurspīdīga, un starpvērtība, piemēram, 0,5, ir daļēji caurspīdīga.
RGBA, HSL un HSLA krāsu vērtības tiek pievienotas CSS3, tāpēc, izmantojot šos formātus, lūdzu, pārbaudiet koda versijas derīgumu.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Brīdinājums
Visas vietnē uzskaitītās lauvu ķeršanas metodes ir teorētiskas un balstītas uz skaitļošanas metodēm. Autori negarantē jūsu drošību, tos lietojot, un atsakās no jebkādas atbildības par rezultātiem. Atcerieties, ka lauva ir plēsējs un bīstams dzīvnieks!
Šī piemēra rezultāts ir parādīts attēlā. 2.
Rīsi. 2. Krāsas mājas lapā
>>Krāsu pārvaldība
Heksadecimālās RGB krāsu vērtības
Krāsu aprakstīšanas un apstrādes metodes atšķiras viena no otras ar to, kādam galīgajam attēlojumam tās ir paredzētas. Salīdzināsim, piemēram, krāsu attēlojumu drukāšanai un datoru monitoriem. Pirmajā gadījumā tiek ņemts pamats balts papīra krāsa, uz kuras pēc tam tiek uzklātas trīs pamatkrāsas: zils, violets Un dzeltens. Sajaucoties savā starpā un ar papīra balto krāsu dažādās proporcijās, šīs trīs pamatkrāsas dod dažādus krāsu toņus, izņemot tīri melno, vai, ja nav krāsu, tās dod baltu papīru. Ja mēs pievienojam tiem melnu krāsu, mēs iegūstam CMYK- krāsu pārraides metode, kad nepieciešamo krāsu iegūst, atņemot trūkstošās krāsas no baltās.
Otrajā gadījumā tiek ņemts pamats melns monitora ekrāna krāsa, kurā katra šūna spīd vienā no trim krāsām: sarkans-sarkans, zaļš-zaļa un zils- zils. Tad, ja nav nekādas spīduma, mēs iegūstam tīri melnu ekrāna krāsu, un jebkura no nepieciešamajām krāsām tiek iegūta pēc katras no trim krāsām. Šajā gadījumā mēs saņemsim RGB- krāsu pārraides metode. Pamatkrāsu vērtības var būt no 0
uz 255
, vai no 0%
uz 100%
, vai to var attēlot kā heksadecimālo vērtību. Zemāk esošajā attēlā varat redzēt pamatkrāsu sajaukšanas rezultātus.
Heksadecimālajā skaitļu sistēmā, atšķirībā no decimālo skaitļu sistēmas, ir nevis desmit cipari, bet sešpadsmit - tātad nosaukums. Attiecīgi var būt tikai neatkārtojami divu ciparu kombināciju varianti - 256 , lai turpinātu skaitļu sēriju pēc 9 vēstules no A uz F, tāpēc seriāls izskatīsies šādi -
| 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. |
Šajā gadījumā krāsu norāda trīs heksadecimālie cipari, no kuriem katrs sastāv no diviem cipariem. Pirmais cipars nosaka intensitāti sarkans krāsas, vidēji zaļš, pēdējais- zils krāsas. Visiem skaitļiem var būt vērtības diapazonā no 00 uz FF(no 0 līdz 255). Piemēram: zaļā krāsa tiek dota kā #00FF00, sarkans - patīk #FF0000, zils - patīk #0000FF, balts - patīk #FFFFFF, pilnīgs krāsas vai melnās krāsas trūkums tiek norādīts kā #000000 .
Zemāk esošajā formā varat norādīt jebkuras heksadecimālās vērtības katrai no trim krāsām un redzēt to sajaukšanas rezultātu, noklikšķinot uz izvades lauka.
Dažu heksadecimālo RGB krāsu vērtību piemēri: sarkanās, zilās un zaļās krāsas gradācijas.
| skats | kodu | skats | kodu | skats | kodu | skats | kodu | skats | kodu | skats | kodu |
| #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 |
Krāsu norādīšana, izmantojot virknes burtus
Lietošanas ērtībai dažām krāsām un to kombinācijām tika piešķirti nosaukumi, kurus atpazīst visas pārlūkprogrammas, un kļuva iespējams daudzas no tām norādīt pēc nosaukuma. Tālāk esošajā tabulā ir parādīti daži krāsu nosaukumi:
| skats | Vārds | skats | Vārds | skats | Vārds | skats | Vārds |
| Balts | Sarkans | Oranžs | Dzeltens | ||||
| Zaļš | Zils | Violeta | Melns | ||||
| Aliseblūs | Antikvariāts | Aqua | Akvamarīns | ||||
| debeszils | Bēšs | Biskvīns | Blanšedalmonda | ||||
| Zili violeta | Brūns | Burlywood | Cadetblue | ||||
| Šartrīza | Šokolāde | Koraļļi | Rudzupuķu zils | ||||
| Kukurūzas zīda | Crimson | Ciāna | Tumši zils | ||||
| tumši zils | Darkgoldenrod | Tumši pelēks | Tumši zaļš | ||||
| Darkhaki | Tumši purpura | Tumši zaļš | Darkorange | ||||
| Darkorhideja | Tumšs | Tumšais lasis | Tumši zaļš | ||||
| Tumši zils | Tumši pelēka | Tumši tirkīza | Tumši violeta | ||||
| Deeppink | Dziļi zils | Blāvs pelēks | Dodgerblue | ||||
| Uguns ķieģelis | Ziedu balts | Mežzaļš | Fuschia | ||||
| Geinsboro | Ghostwhite | Zelts | Goldenrod | ||||
| Pelēks | Zaļdzeltens | Medusrasa | Hotrozā | ||||
| Indijas sarkanais | Indigo | Ziloņkauls | Haki | ||||
| Lavanda | Lavandas sārtums | Citronu šifons | Gaiši zils | ||||
| Gaismas koraļļi | gaiši zils | Gaiši auksti dzeltens | Gaiši zaļš | ||||
| Gaiši pelēks | Gaiši rozā | Gaišais lasis | gaiši zaļš | ||||
| Gaiši debeszils | Gaiši pelēks | Gaiši tēraudzils | Gaiši dzeltens | ||||
| Laima | Laimzaļš | Veļa | Magenta | ||||
| Maroon | Vidumakvamarīns | Vidēji zils | Vidēja morhideja | ||||
| Vidēji violets | Vidēji zaļš | Vidēji slate zils | Vidēji pavasara zaļš | ||||
| Vidēji tirkīza | Vidēji violets | Midnightblue | Piparmētru krēms | ||||
| Mistiroze | Navajobalts | Navy | Oldlace | ||||
| Olīva | Oliverabs | Oranžēts | Orhideja | ||||
| Palegoldenrods | Paleggreen | Paletteurquoise | Bāli sarkans | ||||
| Papayawhip | Persiku pufs | Peru | Rozā | ||||
| Plūme | Pulverzils | Rozbrūns | Karaliski zils | ||||
| Segļbrūns | Jūras zaļš | Jūras gliemežvāks | Sjenna | ||||
| Sudrabs | Debeszils | Slānekļa zils | Slategray | ||||
| Sniegs | Springgreen | Tērauda zils | Iedegums | ||||
| Teal | Dadzis | Tomāts | Tirkīzs | ||||
| Violeta | Kvieši | Whitesmoke | Dzeltenzaļš |
Izmantojot drošu krāsu paleti
Diemžēl dažādās platformās ar dažādiem sistēmas iestatījumiem pareiza krāsu atveide ir problēma. Lieta tāda, ka pārlūkprogramma vienmēr cenšas pielāgot dokumenta krāsu paleti sistēmas iestatījumiem un monitora iespējām, neatkarīgi sajaucot krāsas un nomainot tās. Rezultātā dažreiz lietotājs neredz tieši to, ko tīmekļa pārzinis viņam gribēja parādīt. Izeja no šīs situācijas tika atrasta, izmantojot paleti, kuras katra krāsa tiek garantēta vienādi ar visām pārlūkprogrammām dažādās platformās. Šis ir tā sauktais garantēta palete, saukta arī droši palete. Šajā paletē ir iekļautas krāsas, kuru krāsu komponentiem ir šādas vērtības: 00 ,33 ,66 ,99 , CC,FF, visos iespējamos veidos 216 to kombinācijas.
| skats | kodu | skats | kodu | skats | kodu | skats | kodu | skats | kodu | skats | kodu |
| FFFFFF | CCCCCC | 999999 | 666666 | 333333 | 000000 | ||||||
| CCCC66 | CCCC33 | 999966 | 999933 | 999900 | 666600 | ||||||
| CCFF66 | CCFF00 | CCFF33 | CCCC99 | 666633 | 333300 | ||||||
| 99 FF00 | 99FF33 | 99CC66 | 99CC00 | 99CC33 | 669900 | ||||||
| CCFF99 | 99 FF99 | 66CC00 | 66CC33 | 669933 | 336600 | ||||||
| 66 FF00 | 66FF33 | 33 FF00 | 33CC00 | 339900 | 009900 | ||||||
| 33FF33 | 00FF33 | 00 FF00 | 00CC00 | 33CC33 | 00CC33 | ||||||
| CCFFCC | 99CC99 | 66CC66 | 669966 | 336633 | 003300 | ||||||
| 99 FF99 | 66FF66 | 33FF66 | 00FF66 | 339933 | 006600 | ||||||
| 66FF99 | 33 FF99 | 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 | 0000 FF | 0000 CC | 0033CC | 000033 | ||||||
| 3333FF | 3300 FF | 3300 CC | 3333CC | 000099 | 000066 | ||||||
| 9999CC | 6666FF | 6666CC | 666699 | 333399 | 333366 | ||||||
| CCCCFF | 9999FF | 6666FF | 6600 FF | 330099 | 330066 | ||||||
| 9966CC | 9966FF | 6600 CC | 6633CC | 663399 | 330033 | ||||||
| CC99FF | CC66FF | 9933FF | 9900 FF | 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 |
Vlads Merževičs
HTML valodā krāsa tiek norādīta vienā no diviem veidiem: izmantojot heksadecimālo kodu un ar noteiktu krāsu nosaukumu. Pārsvarā tiek izmantota metode, kuras pamatā ir heksadecimālā skaitļu sistēma, jo tā ir visuniversālākā.
Heksadecimālās krāsas
HTML izmanto heksadecimālos skaitļus, lai norādītu krāsas. Heksadecimālā sistēma atšķirībā no decimālās sistēmas, kā norāda tās nosaukums, ir balstīta uz skaitli 16. Skaitļi būs šādi: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Cipari no 10 līdz 15 tiek aizstāti ar latīņu burtiem. Tabulā 6.1 parāda atbilstību starp decimālskaitļiem un heksadecimālajiem skaitļiem.
Skaitļus, kas ir lielāki par 15, heksadecimālajā sistēmā veido, apvienojot divus skaitļus vienā (6.2. tabula). Piemēram, skaitlis 255 decimāldaļās atbilst skaitlim FF heksadecimāldaļā.
Lai izvairītos no neskaidrībām skaitļu sistēmas definēšanā, pirms heksadecimālā skaitļa ir jaucējsimbols #, piemēram, #aa69cc. Šajā gadījumā reģistram nav nozīmes, tāpēc ir pieļaujams rakstīt #F0F0F0 vai #f0f0f0.
Tipiska HTML izmantotā krāsa izskatās šādi.
Šeit tīmekļa lapas fona krāsa ir iestatīta uz #FA8E47. Jaucējsimbols # skaitļa priekšā nozīmē, ka tas ir heksadecimāls. Pirmie divi cipari (FA) nosaka krāsas sarkano komponentu, trešais līdz ceturtais cipars (8E) nosaka zaļo komponentu, un pēdējie divi cipari (47) nosaka zilo komponentu. Gala rezultāts būs šī krāsa.
| F.A. | + | 8E | + | 47 | = | FA8E47 |
Katrai no trim krāsām - sarkanai, zaļai un zilai - var būt vērtības no 00 līdz FF, kopā veidojot 256 toņus. Tādējādi kopējais krāsu skaits var būt 256x256x256 = 16 777 216 kombinācijas. Krāsu modeli, kura pamatā ir sarkanie, zaļie un zilie komponenti, sauc par RGB (sarkanu, zaļu, zilu). Šis modelis ir aditīvs (no add - add), kurā visu trīs komponentu pievienošana veido balto krāsu.
Lai atvieglotu navigāciju heksadecimālajās krāsās, ņemiet vērā dažus noteikumus.
- Ja krāsu komponentu vērtības ir vienādas (piemēram: #D6D6D6), rezultāts būs pelēks nokrāsa. Jo lielāks skaitlis, jo gaišāka krāsa ar vērtībām no #000000 (melns) līdz #FFFFFF (balts).
- Spilgti sarkana krāsa veidojas, ja sarkanais komponents ir maksimāli (FF) un atlikušie komponenti ir iestatīti uz nulli. Krāsa ar vērtību #FF0000 ir sarkanākais iespējamais sarkanais tonis. Tas pats attiecas uz zaļo (#00FF00) un zilo (#0000FF).
- Dzelteno (#FFFF00) iegūst, sajaucot sarkano un zaļo. Tas ir skaidri redzams krāsu ritenī (6.1. att.), kurā ir attēlotas pamatkrāsas (sarkans, zaļš, zils) un papildu vai papildu krāsas. Tie ietver dzeltenu, ciānu un violetu (ko sauc arī par fuksīnu). Kopumā jebkuru krāsu var iegūt, sajaucot tai tuvas krāsas. Tādējādi ciānu (#00FFFF) iegūst, apvienojot zilo un zaļo krāsu.
Rīsi. 6.1. Krāsu ritenis
Krāsas, kuru pamatā ir heksadecimālās vērtības, nav empīriski jāizvēlas. Šim nolūkam ir piemērots grafiskais redaktors, kas var strādāt ar dažādu krāsu modeļiem, piemēram, Adobe Photoshop. Attēlā 6.2. attēlā ir parādīts šīs programmas krāsas izvēles logs ar līniju iezīmēta pašreizējās krāsas heksadecimālā vērtība. Varat to kopēt un ielīmēt savā kodā.
Rīsi. 6.2. Logs krāsu izvēlei programmā Photoshop
Tīmekļa krāsas
Ja monitora krāsu atveides kvalitāti iestatāt uz 8 bitiem (256 krāsas), tad viena un tā pati krāsa dažādās pārlūkprogrammās var tikt attēlota atšķirīgi. Tas ir saistīts ar grafikas attēlošanas veidu, kad pārlūkprogramma darbojas ar savu paleti un nevar parādīt krāsu, kas nav tās paletē. Šajā gadījumā krāsa tiek aizstāta ar citu, tai tuvu, pikseļu kombināciju, kas imitē doto. Lai nodrošinātu, ka dažādās pārlūkprogrammās krāsa paliek vienāda, tika ieviesta tā saukto tīmekļa krāsu palete. Tīmekļa krāsas ir tās krāsas, kurām katrai sastāvdaļai - sarkanai, zaļai un zilai - ir iestatīta viena no sešām vērtībām - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC) , 255 (FF). Šī komponenta heksadecimālā vērtība ir norādīta iekavās. Kopējais krāsu skaits no visām iespējamām kombinācijām dod 6x6x6 - 216 krāsas. Tīmekļa krāsas piemērs ir #33FF66.
Galvenā tīmekļa krāsu iezīme ir tā, ka tā visās pārlūkprogrammās parādās vienādi. Šobrīd tīmekļa krāsu aktualitāte ir ļoti maza, pateicoties monitoru kvalitātes uzlabošanai un to iespēju paplašināšanai.
Krāsas pēc nosaukuma
Lai nebūtu jāatceras skaitļu kopa, tā vietā varat izmantot bieži lietoto krāsu nosaukumus. Tabulā 6.3 parāda populāro krāsu nosaukumu nosaukumus.
| Krāsas nosaukums | Krāsa | Apraksts | Heksadecimālā vērtība |
|---|---|---|---|
| melns | Melns | #000000 | |
| zils | Zils | #0000FF | |
| fuksija | Gaiši violeta | #FF00FF | |
| pelēks | Tumši pelēks | #808080 | |
| zaļš | Zaļš | #008000 | |
| kaļķi | Gaiši zaļš | #00FF00 | |
| sarkanbrūns | Tumši sarkans | #800000 | |
| flote | Tumši zils | #000080 | |
| olīvu | Olīva | #808000 | |
| violets | Tumši violeta | #800080 | |
| sarkans | Sarkans | #FF0000 | |
| sudrabs | Gaiši pelēks | #C0C0C0 | |
| zilganzaļa | Zili zaļš | #008080 | |
| balts | Balts | #FFFFFF | |
| dzeltens | Dzeltens | #FFFF00 |
Nav nozīmes tam, vai krāsu norādāt pēc tās nosaukuma vai izmantojot heksadecimālos skaitļus. Šīs metodes ir līdzvērtīgas to iedarbībai. 6.1. piemērā parādīts, kā iestatīt tīmekļa lapas fona un teksta krāsas.
Piemērs 6.1. Fona un teksta krāsa
Teksta piemērs
Šajā piemērā fona krāsa ir iestatīta, izmantojot taga atribūtu bgcolor
un teksta krāsu, izmantojot teksta atribūtu. Lai nodrošinātu dažādību, teksta atribūts ir iestatīts uz heksadecimālu skaitli, bet atribūts bgcolor ir iestatīts uz rezervēto atslēgvārdu teal .
