Värvidega töötamine HTML-is on suhteliselt lihtne. Mõne lihtsa CSS-deklaratsiooniga saate muuta oma veebilehe mis tahes teksti või tausta värvi. Aga kuidas värvi määrata? Vastus sellele küsimusele viib meid jäneseauguni, mis lõpuks viib meid kuueteistkümnendsüsteemi värvikoodide kontseptsioonini.
Kui olete varem HTML-i või CSS-iga töötanud, olete ilmselt kuulnud terminit kuueteistkümnendkood. Aga mis täpselt on kuueteistkümnendkood? Millised on kuueteistkümnendkoodide näited? Mis vahe on hex-koodil ja RGB-värvikoodil?
Mis on kuueteistkümnendkood?
Kui hakkate esimest korda värvidega töötama, võite kasutada graafilist liidest, et valida värvid, mida lehe elementidele rakendada. Kui hakkate vaatama aluseks olevat koodi, mitte ainult oma graafilist redaktorit, avastate, et värvid paistavad veidra välimusega märgijadadena. Selliseid järjestusi tuntakse kuueteistkümnendkoodidena; nad näevad välja umbes sellised:
#FF0092
Seotud: Peamised graafilise disaini terminid, mida peate teadma
Saate CSS-is värve määrata mitmel erineval viisil. Võite kasutada mõne eelmääratletud värvi nimesid, näiteks
punane ja tumemagenta. Täpsete värvitoonide määramiseks peate siiski kasutama täpsemat mõõtmist: midagi numbrilist.CSS pakub kahte peamist võimalust: RGB ja hex. Mõlemas vormingus määrate punase, rohelise ja sinise kogused, mis moodustavad lõpliku värvi. RGB kasutab kolme numbrit vahemikus 0 kuni 255. Kuueteistkümnend teeb täpselt sama, lihtsalt teistsuguse alusega (16) kui koma (10), millega olete harjunud.
Hex kasutab tähti A-F, lisaks numbritele 0-9, kokku 16 sümboli jaoks. A kuueteistkümnendsüsteemis võrdub kümnendkohaga 10. F kuueteistkümnendsüsteemis on 15 kümnendkohana.
Kuidas Hex värvikoodid töötavad?
Kõige põhilisemal kujul kujutab kuueteistkümnendkood seda, kui palju on värvis punast, rohelist ja sinist. Kuueteistkümnendkood koosneb kuuest tähemärgist. Esimesed kaks näitavad, kui palju punast on segus, kaks järgmist on seotud rohelise kogusega ja kaks viimast numbrit näitavad sinise kogust. Kuueteistkümnendkoodid viitavad konkreetsetele värvidele, võimaldades disaineritel ja arendajatel hõlpsasti värviskeemide osas suhelda.
Kui iga värvikomponendi jaoks on 16 × 16 (256) väärtust, on võimalikud kombinatsioonid 256 × 256 × 256. Kuueteistkümnendikul on need vahemikus #000000 (puhas must) kuni #FFFFFF (puhas valge).
Kuidas lugeda hex värvikoode
Hex värvikoodide mõtestamine on lihtne. Võtame näiteks #FF5733. Esiteks jagage kuus märki kolmeks osaks, millest igaüks sisaldab kahte märki. Nagu teate, tähistavad kaks esimest osa punast, kaks teist rohelist ja kaks kolmandat sinist. Niisiis, meie näites:
- Punase komponendi RR väärtus on FF.
- Roheline komponent GG on 57.
- Sinine komponent BB on 33.
Nüüd peate nende värvisegmentide intensiivsuse leidmiseks arvutama kuueteistkümnendarvu, kasutades kolme sammu.
- Korrutage RR esimene kuueteistkümnendmärk 16-ga. Kui märk on täht, teisendage see vastavaks väärtuseks. Sel juhul on esimene märk F, mis on 15. Nii et meie näite puhul korrutate 15 × 16, mis võrdub 240-ga.
- Järgmisena lisage RR-i teine märk. Vajadusel teisendage täht uuesti vastavaks väärtuseks. Meie näites on teine märk F, mis võrdub 15-ga.
- Kui olete lõpetanud, lisage ühe väärtuse saamiseks kogusummad. Kui lisate meie näitest 240 ja 15, näete FF väärtust 255.
Korrake sama valemit ülejäänud kahe segmendi jaoks, GG tähistatakse 57-ga ja BB tähistatakse 33-ga. Kui käsitsi tehtud arvutused tunduvad liiga üle jõu käivad, võite alati kasutada hex-RGB-konversioonitööriista (nt BinaryHex Converter) värvi lugemiseks. Peaksite leidma, et kuueteistkümnendväärtus #FF5733 on samaväärne rgb (255, 87, 51).
Miks on Hex värvikood nii populaarne?
Kuigi on olemas mitu erinevat värvimudelit (RGB, CMYK, HSL), on hex värvikoodid võib-olla kõige laialdasemalt kasutatav esitus. Seda seetõttu, et need on lihtsad ja kergesti mõistetavad.
Väga kasulik on ka fikseeritud laiusega vorming. Täispikkuses kuueteistkümnendsüsteemi värvid koosnevad alati seitsmest tähemärgist, sealhulgas algustähega # sümbol.
Kuuskuusvärvid on väga tõhusad, kasutades ainult neid seitset märki enam kui 16 miljoni värvi esindamiseks. Ja nende värvide eristamine on lihtne protsess.
Kuus vs. RGB: kas on vahet?
RGB värvikoodide süsteem kasutab punase, rohelise ja sinise suhtelise intensiivsuse näitamiseks kolme kümnendarvu. See kasutab numbreid 0-9.
Hex kasutab ka kolme numbrit, et tähistada punast, rohelist ja sinist, kuid see kasutab lisanumbreid (A-F), et rahuldada baasi 16. Saadud värvid ei erine, need on lihtsalt erinevad vormingud sama teabe edastamiseks.
Seotud: CSS-i põhialused: värvidega töötamine
Milleks kasutatakse kuueteistkümnendkoodi?
RGB-d kasutavad mitmed erinevad rakendused alates teleriekraanidest kuni mobiilseadmete, mängude ja märkideni. Näete peamiselt hex-värvikoode veebidisainis ja muudes graafikaprogrammides.
Kuueteistkümnendkoode võite näha ka universaalse viisina värvide tuvastamiseks. Paljud veebisaidid kasutavad neid konkreetse värvi tuvastamiseks, kuna need on lühikesed ja kontekstis tavaliselt üheselt mõistetavad.
Hex värvikood ei ole raketiteadus
Niisiis, teil on kuusnurksete värvikoodide põhitõed. Need pole just raske teadus, kuid neil on disainis (ja tehnoloogiamaailmas) kindel eesmärk. Kui otsite tööriista, mis aitaks teil mõista, kuidas kuuskantvärvid töötavad, või tööriista, mis õpetaks teile RGB-segude teooriat, on Internetis palju neid. Pidage meeles, et kõige uue õppimise võti on astuda see samm korraga.
Kuueteistkümnevärvilised värvikoodid ei ole maailma kõige põnevamad asjad, kuid veebidisaini alal töötades on oluline neist aru saada. Kuueteistkümnevärviliste värvikoodidega töötamine muudab teie disaini töö palju lihtsamaks.
Siit saate teada, kuidas mõne sekundi jooksul ekraanilt värviväärtusi valida. Eriti kasulik veebidisaineritele!
Loe edasi
- Loominguline
- CSS
- HTML
- Veebikujundus
- Värviskeemid
Gargi on kirjanik, jutuvestja ja uurija. Ta on spetsialiseerunud köitvate sisuteoste kirjutamisele kõigis Interneti-valdkonnas klientidele erinevates riikides ja tööstusharudes. Ta on lõpetanud kirjanduse erialal toimetamise ja kirjastamise diplomiga. Töövälisel ajal juhib ta TEDx-i saateid ja kirjandusfestivale. Ideaalses maailmas on ta mägedesse suundumisest alati minuti kaugusel.
Liituge meie uudiskirjaga
Liituge meie uudiskirjaga tehniliste näpunäidete, arvustuste, tasuta e-raamatute ja eksklusiivsete pakkumiste saamiseks!
Tellimiseks klõpsake siin