Mikä on Hex-koodi? Kaikki mitä sinun tarvitsee tietää

Värien käsittely HTML: ssä on suhteellisen yksinkertaista. Muutamalla yksinkertaisella CSS-ilmoituksella voit muuttaa minkä tahansa tekstin tai taustan väriä verkkosivullasi. Mutta miten määrität värin? Vastaus tähän kysymykseen vie meidät alas jäniskoloon, joka lopulta johtaa meidät käsitteeseen heksadesimaalivärikoodit.

Jos olet aiemmin työskennellyt HTML: n tai CSS: n kanssa, olet luultavasti kuullut termin heksadesimaalikoodi. Mutta mikä tarkalleen on hex-koodi? Mitkä ovat esimerkkejä hex-koodeista? Mitä eroa on heksadesimaalikoodilla ja RGB-värikoodilla?

Mikä on Hex Code?

Kun aloitat värien käsittelyn, voit käyttää graafista käyttöliittymää valitaksesi värit sivusi elementteihin. Kun alat katsoa taustalla olevaa koodia pelkän graafisen editorin sijaan, huomaat, että värit näyttävät oudolta näyttäviltä merkkijonoilta. Sellaiset sekvenssit tunnetaan heksadesimaalikoodeina; ne näyttävät suunnilleen tältä:

#FF0092

Aiheeseen liittyvä: Tärkeimmät graafisen suunnittelun ehdot, jotka sinun on tiedettävä

Voit määrittää värejä CSS: ssä useilla eri tavoilla. Voit käyttää joidenkin ennalta määritettyjen värien nimiä, kuten punainen ja tummanmagenta. Jos haluat määrittää tarkat värisävyt, sinun on kuitenkin käytettävä tarkempaa mittaa: jotain numeerista.

CSS tarjoaa kaksi päävaihtoehtoa: RGB ja hex. Molemmissa muodoissa määrität punaisen, vihreän ja sinisen määrän, jotka muodostavat lopullisen värin. RGB käyttää kolmea numeroa välillä 0-255. Hex tekee täsmälleen saman, vain eri kanta (16) kuin desimaali (10), johon olet tottunut.

Hex käyttää kirjaimia A-F, numeroiden 0-9 lisäksi, yhteensä 16 symbolia. A heksadesimaalilukuna vastaa 10:tä desimaalilukuna. F heksadesimaalilukuna on 15 desimaalissa.

Kuinka Hex-värikoodit toimivat?

Perusmuodossaan hex-koodi on esitys siitä, kuinka paljon punaista, vihreää ja sinistä on värissä. Heksakoodi koostuu kuudesta merkistä. Kaksi ensimmäistä viittaavat siihen, kuinka paljon punaista on sekoituksessa, kaksi seuraavaa liittyvät vihreän määrään, ja kaksi viimeistä numeroa kuvaavat sinisen määrää. Hex-koodit viittaavat tiettyihin väreihin, jolloin suunnittelijat ja kehittäjät voivat helposti kommunikoida värimaailmasta.

Kun kullakin värikomponentilla on 16 × 16 (256) arvoa, mahdollisia yhdistelmiä on 256 × 256 × 256. Hex-muodossa ne vaihtelevat välillä #000000 (puhdas musta) #FFFFFF (puhdas valkoinen).

Kuinka lukea heksadesimaalivärikoodeja

Hex-värikoodien ymmärtäminen on helppoa. Otetaan esimerkki #FF5733. Jaa ensin kuusi merkkiä kolmeen osaan, joissa kussakin on kaksi merkkiä. Kuten tiedät, kaksi ensimmäistä osaa edustavat punaista, kaksi toista osaa edustavat vihreää ja kaksi kolmatta osaa edustavat sinistä. Joten esimerkissämme:

• Punaisen komponentin RR arvo on FF.
• Vihreä komponentti, GG, on 57.
• Sininen komponentti BB on 33.

Nyt näiden värisegmenttien intensiteetin selvittämiseksi sinun on laskettava heksadesimaaliluku käyttämällä näitä kolmea vaihetta:

1. Kerro RR: n ensimmäinen heksadesimaalimerkki luvulla 16. Jos merkki on kirjain, muunna se sitä vastaavaksi arvoksi. Tässä tapauksessa ensimmäinen merkki on F, joka on 15. Joten esimerkissämme kerrot 15 × 16, mikä on 240.
2. Lisää seuraavaksi RR: n toinen merkki. Muuta kirjain jälleen sitä vastaavaksi arvoksi, jos tarvetta ilmenee. Esimerkissämme toinen merkki on F, joka on 15.
3. Kun olet valmis, lisää kokonaissummat saadaksesi yksi arvo. Jos lisäät 240 ja 15 esimerkistämme, näet FF: n arvon 255.

Toista sama kaava kahdelle jäljellä olevalle segmentille, GG merkitty numerolla 57 ja BB merkitty numerolla 33. Jos manuaaliset laskelmat vaikuttavat liian ylivoimaisilta, voit aina käyttää hex-RGB-muunnostyökalua (esim BinaryHex-muunnin) lukeaksesi väriä. Sinun pitäisi löytää, että hex-arvo #FF5733 on vastaava rgb (255, 87, 51).

Miksi Hex-värikoodi on niin suosittu?

Vaikka on olemassa useita eri värimalleja (RGB, CMYK, HSL), hex-värikoodit ovat ehkä laajimmin käytetty esitys. Tämä johtuu siitä, että ne ovat yksinkertaisia ​​ja helppoja ymmärtää.

Kiinteäleveä muoto on myös erittäin hyödyllinen. Täyspitkät heksadesimaalivärit ovat aina seitsemän merkkiä, mukaan lukien alku # symboli.

Hex-värit ovat erittäin tehokkaita, sillä vain nämä seitsemän merkkiä edustavat yli 16 miljoonaa väriä. Ja näiden värien erottaminen toisistaan ​​on suoraviivainen prosessi.

Hex vs. RGB: Onko eroa?

RGB-värikoodausjärjestelmä käyttää kolmea desimaalilukua osoittamaan punaisen, vihreän ja sinisen suhteellista intensiteettiä. Se käyttää numeroita 0-9.

Hex käyttää myös kolmea numeroa edustamaan punaista, vihreää ja sinistä, mutta se käyttää ylimääräisiä numeroita (A-F) kantaakseen 16. Tuloksena olevissa väreissä ei ole eroa, ne ovat yksinkertaisesti eri muotoja saman tiedon välittämiseksi.

Aiheeseen liittyvä: CSS: n perusteet: Värien kanssa työskentely

Mihin Hex-koodia käytetään?

Useat erilaiset sovellukset käyttävät RGB: tä televisioruuduista mobiililaitteisiin, peleihin ja kyltteihin. Näet pääasiassa hex-värikoodeja web-suunnittelussa ja muissa grafiikkaohjelmissa.

Saatat myös nähdä heksadesimaalikoodit yleisenä tapana tunnistaa värit. Monet verkkosivustot käyttävät niitä tietyn värin tunnistamiseen, koska ne ovat lyhyitä ja yleensä asiayhteydessään yksiselitteisiä.

Hex-värikoodi ei ole rakettitiedettä

Joten siellä on hex-värikoodien perusteet. Ne eivät ole aivan kovaa tiedettä, mutta niillä on tietty tarkoitus suunnittelussa (ja tekniikan maailmassa). Jos etsit työkalua, joka auttaa sinua ymmärtämään, kuinka hex-värit toimivat, tai työkalua, joka opettaa sinulle RGB-sekoitusteoriaa, verkossa on paljon. Muista, että avain kaiken uuden oppimiseen on ottaa se askel kerrallaan.

Hex-värikoodit eivät ole maailman jännittävin asia, mutta niiden ymmärtäminen on tärkeää, jos työskentelet web-suunnittelun parissa. Hex-värikoodien käyttäminen tekee suunnittelutyöstäsi paljon helpompaa.

Kuinka löytää minkä tahansa värin heksa-arvo näytölläsi

Opi valitsemaan mikä tahansa väriarvo näytöltä sekunneissa. Erityisen hyödyllinen web-suunnittelijoille!

Lue Seuraava

Kirjailijasta