Darbs ar krāsām HTML ir salīdzinoši vienkāršs. Izmantojot dažas vienkāršas CSS deklarācijas, varat mainīt jebkura teksta vai fona krāsu savā tīmekļa lapā. Bet kā norādīt krāsu? Atbilde uz šo jautājumu mūs aizvedīs uz truša caurumu, kas galu galā noved pie heksadecimālo krāsu kodu koncepcijas.
Ja iepriekš esat strādājis ar HTML vai CSS, iespējams, esat dzirdējis terminu heksadecimālais kods. Bet kas īsti ir hex kods? Kādi ir hex kodu piemēri? Kāda ir atšķirība starp hex kodu un RGB krāsu kodu?
Kas ir Hex kods?
Kad pirmo reizi sākat strādāt ar krāsām, varat izmantot grafisko interfeisu, lai izvēlētos krāsas, ko lietot lapas elementiem. Kad sākat aplūkot pamatā esošo kodu, nevis tikai grafisko redaktoru, jūs atklājat, ka krāsas parādās kā dīvaina izskata rakstzīmju secības. Šādas sekvences ir zināmas kā hex kodi; tie izskatās apmēram šādi:
#FF0092
Saistīts: Būtiski grafiskā dizaina noteikumi, kas jums jāzina
Krāsas CSS var norādīt vairākos dažādos veidos. Varat izmantot dažu iepriekš definētu krāsu nosaukumus, piemēram,
sarkans un tumšs purpurs. Tomēr, lai norādītu precīzus krāsu toņus, jums būs jāizmanto precīzāks mērījums: kaut kas skaitlis.CSS piedāvā divas galvenās iespējas: RGB un hex. Abos formātos jūs norādāt sarkanās, zaļās un zilās krāsas daudzumu, kas veido galīgo krāsu. RGB izmanto trīs skaitļus no 0 līdz 255. Hex dara tieši to pašu, tikai ar citu bāzi (16) nekā decimāldaļa (10), pie kuras esat pieradis.
Hex izmanto burtus A-F, papildus cipariem 0-9, kopā 16 simboliem. A hex ir ekvivalents 10 decimāldaļās. F hex ir 15 decimāldaļās.
Kā darbojas Hex krāsu kodi?
Visvienkāršākajā formā heksadecimālais kods ir attēlojums tam, cik daudz sarkanā, zaļā un zilā krāsā pastāv. Hex kods sastāv no sešām rakstzīmēm. Pirmie divi attiecas uz to, cik daudz sarkanā ir maisījumā, nākamie divi attiecas uz zaļās krāsas daudzumu, un pēdējie divi cipari atspoguļo zilās krāsas daudzumu. Hex kodi attiecas uz noteiktām krāsām, ļaujot dizaineriem un izstrādātājiem viegli sazināties par krāsu shēmām.
Ar 16 × 16 (256) vērtībām katram krāsu komponentam ir 256 × 256 × 256 iespējamās kombinācijas. Hex formātā tie ir no #000000 (tīri melns) līdz #FFFFFF (tīri balts).
Kā lasīt Hex krāsu kodus
Hex krāsu kodu izpratne ir vienkārša. Ņemsim piemēru #FF5733. Vispirms sadaliet sešas rakstzīmes trīs daļās, kurās katrā ir divas rakstzīmes. Kā jūs zināt, pirmās divas daļas apzīmē sarkanu, otrās divas daļas apzīmē zaļu un trešās divas daļas apzīmē zilu. Tātad, mūsu piemērā:
- Sarkanajam komponentam RR ir vērtība FF.
- Zaļais komponents GG ir 57.
- Zilā sastāvdaļa BB ir 33.
Tagad, lai atrastu šo krāsu segmentu intensitāti, jums jāaprēķina heksadecimālais skaitlis, izmantojot šīs trīs darbības:
- Reiziniet RR pirmo heksadecimālo rakstzīmi ar 16. Ja rakstzīme ir burts, pārveidojiet to atbilstošā vērtībā. Šajā gadījumā pirmā rakstzīme ir F, kas ir 15. Tātad, mūsu piemēram, jūs reizinat 15 × 16, kas ir vienāds ar 240.
- Pēc tam pievienojiet RR otro rakstzīmi. Atkal, ja nepieciešams, konvertējiet burtu uz tā atbilstošo vērtību. Mūsu piemērā otrā rakstzīme ir F, kas ir vienāda ar 15.
- Kad tas ir izdarīts, pievienojiet kopsummas, lai iegūtu vienu vērtību. Ja pievienosit 240 un 15 no mūsu piemēra, redzēsit, ka FF vērtība ir 255.
Atkārtojiet to pašu formulu atlikušajiem diviem segmentiem, GG apzīmē ar 57 un BB apzīmē ar 33. Ja manuālie aprēķini šķiet pārāk milzīgi, vienmēr varat izmantot hex-RGB konvertēšanas rīku (piemēram, BinaryHex pārveidotājs), lai nolasītu krāsu. Jums vajadzētu atrast šo hex vērtību #FF5733 ir līdzvērtīgs rgb (255, 87, 51).
Kāpēc Hex krāsu kods ir tik populārs?
Lai gan ir vairāki dažādi krāsu modeļi (RGB, CMYK, HSL), hex krāsu kodi, iespējams, ir visplašāk izmantotais attēlojums. Tas ir tāpēc, ka tie ir vienkārši un viegli saprotami.
Ļoti noderīgs ir arī fiksēta platuma formāts. Pilna garuma heksadecimālās krāsas vienmēr ir septiņas rakstzīmes, ieskaitot galveno # simbols.
Hex krāsas ir ļoti efektīvas, izmantojot tikai šīs septiņas rakstzīmes, lai attēlotu vairāk nekā 16 miljonus krāsu. Un šo krāsu atšķiršana ir vienkāršs process.
Hex vs. RGB: vai ir kāda atšķirība?
RGB krāsu kodēšanas sistēmā tiek izmantoti trīs skaitļi aiz komata, lai norādītu sarkanās, zaļās un zilās krāsas relatīvo intensitāti. Tas izmanto ciparus no 0 līdz 9.
Hex izmanto arī trīs ciparus, lai attēlotu sarkano, zaļo un zilo krāsu, bet tas izmanto papildu ciparus (A-F), lai nodrošinātu 16. bāzi. Rezultātā iegūtās krāsas neatšķiras, tie vienkārši ir dažādi formāti, lai paziņotu vienu un to pašu informāciju.
Saistīts: CSS pamati: darbs ar krāsām
Kam tiek izmantots Hex kods?
RGB izmanto dažādas lietojumprogrammas, sākot no televīzijas ekrāniem līdz mobilajām ierīcēm, spēlēm un izkārtnēm. Hex krāsu kodus galvenokārt redzēsit tīmekļa dizainā un citās grafikas programmās.
Hex kodus var redzēt arī kā universālu veidu krāsu identificēšanai. Daudzas vietnes tos izmanto, lai identificētu konkrētu krāsu, jo tās ir īsas un parasti kontekstā nepārprotamas.
Hex krāsu kods nav raķešu zinātne
Tātad, jums ir sešstūra krāsu kodu pamati. Tās nav gluži smaga zinātne, taču tās kalpo noteiktam mērķim dizainā (un tehnoloģiju pasaulē). Ja meklējat rīku, kas palīdzēs saprast, kā darbojas sešstūra krāsas, vai tādu, kas mācīs par RGB sajaukšanas teoriju, tiešsaistē ir daudz. Atcerieties, ka galvenais, lai uzzinātu kaut ko jaunu, ir spert to vienu soli vienlaikus.
Hex krāsu kodi nav pati aizraujošākā lieta pasaulē, taču ir svarīgi tos saprast, ja strādājat ar tīmekļa dizainu. Iespēja strādāt ar sešstūra krāsu kodiem ievērojami atvieglos jūsu dizaina darbu.
Uzziniet, kā dažu sekunžu laikā izvēlēties jebkuru krāsu vērtību no ekrāna. Īpaši noderīgi tīmekļa dizaineriem!
Lasiet Tālāk
- Radošs
- CSS
- HTML
- Web dizains
- Krāsu shēmas
Gargi ir rakstnieks, stāstnieks un pētnieks. Viņa specializējas saistošu satura darbu rakstīšanā par visu interneta tēmu klientiem dažādās valstīs un nozarēs. Viņa ir maģistrantūra literatūras jomā ar rediģēšanas un izdevējdarbības diplomu. Ārpus darba viņa vada TEDx šovus un literatūras festivālus. Ideālā pasaulē viņa vienmēr atrodas minūtes attālumā no došanās uz kalniem.
Abonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai saņemtu tehniskos padomus, pārskatus, bezmaksas e-grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu