Share
HTML-fargekoder er et vanlig og viktig del av moderne webdesign. Mens de fleste nettsteder i dag er utformet i stor grad delvis med bilder, er fargene spesielt viktige når du trenger å komme opp med en farge hex-verdi på farten under koding. I denne veiledningen vil vi lære grunnleggende bak fargekodingen, noe som gir deg kraften til å komme opp med farger uten bruk av en fargevalg.
Som du kanskje vet, er det to vanlige måter å definere en farge på webdesign:
Begge disse blir oftest implementert ved hjelp av CSS eller HTML, som du kan se nedenfor:
Tekst her Tekst her
.foo farge: rgb (111,222,111);
I det første kodeeksemplet vil hver tekstteksttekst dukke opp som en lysegrå farge. Vi går over hvorfor det er senere; Vær imidlertid oppmerksom på at selv om fargemetoder ser ut til å være ganske forskjellige, er de faktisk de samme fargene.
I det andre eksempelet har vi bare en rask CSS-kode. Det er ganske greit - noe med en klasse av "foo" vil ha en tekstfarge på RGB (111,222,111). For de mer nysgjerrige, det ville være en lime grønn-ish farge.
Så langt, det meste av dette burde være fornuftig for deg. La oss nå komme inn på nøyaktig hvordan vi går fra de relativt kryptiske kodene til noe litt mer konkret.
I RGB kan hver verdi mellom kommaene være et tall fra 0 til 255. For eksempel:
RGB (10,137,29)
Siden RGB står for "Red Green Blue", betyr dette at det er en verdi på 10 for rød, 137 for grønn og 29 for blå. Uunngåelig er disse en slags irreducible fraksjon. Og dermed:
Jo høyere tallet, jo mer av den bestemte fargen kommer det til i sluttresultatet.
Når den er satt til null, er det ingen av den aktuelle fargen. Ved 255 viser det motsatte selvfølgelig sant. Derfor:
Dette gjelder, fordi RGB-fargesystemet er basert på farge gjennom lys. Dette er mye forskjellig fra hvordan du normalt lager farger, for eksempel med maling eller fargestifter. Hvis du hadde en kombinasjon av rgb (255,255,255) ved å bruke maling, vil du sannsynligvis komme ut med noe som mørkbrunt, men absolutt ikke hvitt!
Hexadecimal farge er generelt vanskeligere å forklare enn RGB. De er i utgangspunktet de samme. Heksadesimalets indre arbeid er imidlertid utvilsomt mer innviklet.
For å forklare heksadesimale farger må vi først falle tilbake i noen binære og inn i basen sekstenummersystemet for å forstå hva noe som dette egentlig prøver å si ":"
# 554BFF
For de av dere som ikke vet hvordan et av disse arbeidene, eller hva en av dem er, er her en kort guide:
Hvis det var litt forvirrende, foreslår jeg å lese over det igjen. Hvis det fortsatt ikke gir mening etter det, er det helt greit - følgende eksempler vil bidra til å styrke forståelsen din.
Hexadecimal, som navnet antyder, gir seksten brukbare "verdier" for et nummer å ta på seg. Som du kanskje har lagt merke til tidligere, kan en "nibble" gi deg et tall fra 0-15: seksten verdier totalt!
Forutsatt at vi har følgende:
1111
Og å vite at de binære verdiene til hver bit vil bli som følger:
8 4 2 1
Den binære verdien av 1111 blir:
8 + 4 + 2 + 1
som er…
15
På samme måte, hvis det binære nummeret hadde vært 0000, ville det endelige resultatet nettopp være null, fordi 0 + 0 + 0 + 0 er 0.
binær: 0101
Verdiene for hver bit er 8,4,2 og 1 (i rekkefølge). Legg sammen de binære verdiene til dem:
0 + 4 + 0 + 1
Tilsvarer 5.
Forhåpentligvis er disse raske eksemplene nyttige. Jeg oppfordrer deg til å prøve noen andre raskt selv. Jeg vil til og med gi deg en:
Konverter fra binær til desimal: 1010
Tips: Det er mellom 9 og 11.
Dette kan føle at det ikke går i nærheten av webutvikling, men stol på meg, vi er nesten der.
I heksadesimale er det seksten forskjellige representasjoner for en binær sekvens: 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E og F. Disse i sin tur , representer tallene 0-15 (16 tall totalt). Begge disse representerer det samme binære nummeret. Men raskt - stopp og tenk - #FFFFFF gir hvitt, riktig? Og du kan aldri ha et brev høyere enn F i en HTML-fargekode. Husk på det.
Her er et raskt diagram som kartlegger forholdet mellom binær, desimal og heksadesimal:
Dette betyr at hvis du vil lage nummer 15, kan du skrive F i heksadesimale, eller 1111 i binær. I tillegg, hvis du ville lage, si 10, ville du skrive A i hexadecimal eller 1010 i binær.
Nå er vi litt nærmere å finne ut nøyaktig hvordan heksadesimale fungerer. Raskt, la oss forestille oss et eksempel på at en HTML-fargekode er delt inn i tre deler:
# 006699 til -> # 00,66,99
Nå ser det litt kjent ut; hvis du tenker på hva jeg tenker, har du rett. Hexadecimal er organisert akkurat som RGB: den har en verdi for hver rød, grønn og blå. Kjerneforskjellen er:
Vi ser nå på hvordan du kan opprette en verdi på opptil 255, siden vi så langt har lært å lage tall opp til 15.
Binary: 0110 Bit verdier: 128 64 32 16 Sammenføy alle som er sanne: 0 + 64 + 32 + 0 Utbytte: 96
Vi har funnet ut at den første nibble til høyre er seks. Og nå har vi funnet ut at den andre nibble til venstre er 96. Så hva gjør du med disse? Bare legg dem til! 96 + 6 = 102. Derfor er den heksadesimale verdien av 66 102 i det normale desimalanlegget.
Hva dette betyr er at i hexadecimal er RGB-ekvivalenten på 66 (i hex) 102. Følgelig er # 666666 lik rgb (102.102.102).
La oss gjøre en ekstra seksk til desimalomregning:
Hexadecimal: FF Binær: 1111 1111 Bitverdier: 128 64 32 16 8 4 2 1 Legg til: 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 Utbytte: 255
255 er maksimumsverdien for hvilken som helst farge. Så, hvis vi hadde #FFFFFF, som vi alle vet å være hvite, ville det være rgb (255,255,255), som også er hvitt.
For forståelsens skyld, la oss gjøre en endelig konvertering. Denne gangen skal vi konvertere en hel heksadesimal farge til RGB. Fargen vår er # 6AB4FF.
6A ------ Binær: 0110 1010 Legg til: 64 + 32 + 8 + 2 96 + 10 Utbytte: 106 ------ B4 ------ Binær: 1011 0100 Legg til: 128 + 32 + 16 + 4 176 + 4 Yields: 180 ------ FF ------ (Vi har allerede gjort dette, så vi vet at det er 255)
Konklusjon: # 6AB4FF er ekvivalent med rgb (106.180.255).
Nå kan du lure på hvordan vi får fra disse verdiene til en faktisk farge vi kan forestille oss i hodet vårt. Neste del vil bidra til å dekke det. Så nå som vi vet hvordan hexadecimal og RGB er relatert, og nå som vi vet hvordan hexadecimal faktisk fungerer, vil vi nå se hvordan du kan komme opp med en farge i farten i din egen kode, og hjelpe deg med å gjøre noen farge uten å måtte bruke en fargeplukker.
Quick Fun Fact: Siden det er 8 biter i hver verdi av rød, grønn og blå, betyr det at det er 24 biter totalt i en RGB-farge (8 * 3 = 24). Dette er hvor vi får begrepet 24-biters farge, ofte referert til som "True Color".
Med 24-biters farge kan vi lage opptil 16 777 216 - over 16 millioner farger. Dette er vanligvis mer enn tilfredsstillende for ethvert prosjekt. 32-biters farge har imidlertid begynt å bli mer fremtredende, men ikke nødvendigvis innenfor webdesign. Du kan lese mer om fargedybde på Wikipedia.org i denne artikkelen. I tillegg kan du se et bilde av alle ~ 16 millioner farger i ett bilde her (David Naylor Blog). Det er ganske fascinerende, virkelig! Bildestørrelsene på 4096x4096 er fornuftige siden 4096 er kvadratroten av 16.777.216.
For at denne kunnskapen skal være til nytte for oss, må du lære å lage dine egne farger raskt og enkelt. Vi starter så enkelt som mulig, og flytt deretter inn i vanskeligere å artikulere farger.
La oss si at vi ønsker å lage en grå farge på fluen. Gråskala farger er vanlige, og pleier å være mest nyttige i mange tilfeller. Så langt vet vi følgende: # 000000 er svart,
og #FFFFFF er lik hvit. Derfor vil de vanligste av gråtonekarfargene være trinn mellom disse to verdiene. For å lage en gråton, ville vi på riktig måte etablere verdier mellom hvitt og svart.
Logisk vil en verdi nærmere #FFFFFF bli en lysere tone grå, og en verdi nærmere # 000000 blir mørkere. Med det i tankene, la oss lage en ganske lys grå farge. Noen raske tanker gir oss følgende oppløsning: #DDDDDD er komfortabelt langt nok unna hvitt, så det blir klart et fint lysegrå for oss.
Senere vil vi lage en mørkere grå. Nok en gang, enkel. Gjør bare noe som # 333333. Som du kan se, er gråverdier veldig enkel. Hvis du finner ut at du trenger en enda mer spesifikk gråton, husk det som en generell tommelfingerregel,
Hvis hver verdi for rød, grønn og blå er lik, eller nesten liknende, vil den virke som grå. Et slikt eksempel på dette er fargen "Gainsboro" som har en fargekode på #DCDCDC. Dette betyr at det bare er en mindre enn vår #DDDDDD-farge i hver verdi av rød, grønn og blå. Du vil sannsynligvis ikke kunne skille mellom de to, men stigning eller dekrementering med 1 gir deg litt mer "grå presisjon".
Det nest mest enkle settet med farger du kan lage er rødt, grønt og blått (åpenbart). La oss bruke rødt som et eksempel. Hvis vi vil lage ren RGB rød, vil vi gi fargeværdien
Den maksimale verdien av rød, med 0 grønn og 0 blå. Det gir mening riktig? For å bli rød i heksadesimale, ville vi bare sette # FF0000. Nå har vi rødt.
Opprette grønt og blått følger nøyaktig samme prinsipp. For å gjøre ren grønn: # 00FF00 (alle grønne, ingenting annet). For å lage ren blå: # 0000FF (alt blå, ingenting annet).
Enkel nok; Disse fargene er imidlertid under alle omstendigheter helt heslige når de brukes i et webdesign. Derfor, for å sette disse fargene til bruk må vi skygge dem tilsvarende.
Heldigvis er skygge også enkelt. La oss bruke blå for dette eksempelet. Vi har allerede # 0000FF satt opp for oss. For å endre skyggen av vår blå verdi, trenger vi bare å endre de to siste tegnene i den heksadesimale fargekoden. Siden FF er den høyeste blå mulige, kan vi på dette punktet bare gjøre det mørkere. Som sådan, la oss gjøre akkurat det:
Hvis du endrer # 0000FF til # 000055 (reduserer mengden svart, og flytter den blå nærmere svart), får du en mørkere blå.
Som du ser, er skygging rød, grønn og blå langt fra vanskelig - det er en enkel sak å redusere mengden av en bestemt farge. Den samme regelen gjelder for rød og grønn, ikke bare svart, så # 005500 er en mørkere nyanse av grønt, og # 550000 er en mørkere nyanse av rødt. (Selvfølgelig kan du gå lavere eller høyere enn 55 hvis du ønsker det).
Jeg antar at du sannsynligvis tenker: så hva med gul, lilla og alle de andre farger? Vel, heldigvis er det bare litt mer komplekst enn de store tre av RGB. La oss begynne med gul.
For å lage gul må vi først tenke på fargespektret. En liten mnemonic som folk liker å bruke er "Roy G. Biv", som står for "rød, oransje, gul, grønn, blå, indigo, fiolett. Nå er logikken i dette noe forvirrende, men prøv å holde fast ved meg. For å bli gul, bruker vi de to hovedfarger fra rød, grønn og blå på hver side av hvor gul ville være. I dette tilfellet ville det være rødt og grønt. Hvis vi så skrev # FFFF00, ville vi ha gul. Fantastisk!
Det er bare noen få andre mulige kombinasjoner ved hjelp av denne metoden, så vi går raskt over dem. Mellom rød og blå på et fargeskjul, vil koden være # FF00FF, og vi vil bli rosa eller magenta som den tradisjonelt kalles, Neste mellom grønn og blå (# 00FFFF), vi har cyan. Og nå, dessverre, er det faktisk alle de enkle kombinasjonene vi kan gjøre. Resten krever litt tanke, som vi går over i et minutt. Først, la oss finne ut hvordan du kan skygge disse fargene.
Bare nok, vi begynner å skygge cyan denne gangen, som, som vi husker, er # 00FFFF. Og ... du gjettet det sikkert, men å skygge gul, cyan eller rosa, alt du trenger å gjøre er å endre noen FF-verdier til en mindre. I dette eksemplet skygger cyan ned til et mye mørkere utvalg, kan vi gjøre noe som # 005555. Et av de offisielle HTML-fargeneavnene, DarkCyan, er # 008B8B, slik at man ville være litt lettere enn den vi nettopp har laget. Så det har vi det: Hvordan skygge gul, cyan og rosa.
For å lage en fargelighter er det like enkelt som å lage de lave verdiene (de 00-verdiene, typisk) større og forlater FF (eller andre hovedfarger) alene. For eksempel, hvis vi hadde grønn, og vi ønsket å gjøre det lettere, ville vi starte med # 00FF00. Da, for å lette det, ville vi bare øke 00-verdiene. #AAFFAA produserer en fin, vårfarge grønn.
I tillegg for å gjøre # FF00FF (Pink) lettere, er det samme prosess. Øk de lave verdiene: #FFAAFF. Dette gir en lys rosa farge. Fungerer som en sjarm!
Så langt har vi lært å lage de mest enkle farger, men i de fleste bruksområder vil denne kunnskapen ikke være nyttig for et prosjekt. Det er her denne andre delen kommer inn i spill.
For å skape en fin farge må vi jobbe av det vi allerede vet, og tenk gjennom det vi prøver å skape på en logisk måte. La oss lage et scenario; Vi ønsker å lage en subtil oransje farge som passer til våre behov - som en litt mørkere nyanse av oransje brus.
Vi starter med det vi allerede vet hvordan å lage, og det er gult: # FFFF00. Vi trenger å flytte den litt nærmere oransjeområdet, for å gjøre det, vil vi lindre noe av det grønne "pull", som jeg liker å kalle det. Å gjøre det øker mengden rød. Jeg valgte å bytte den til # FF5500. Dette raske og enkle eksempelet gir deg en ide om hvordan du skal gå om å skape en farge. Det siste jeg vil nevne er at du kanskje lurer på hvorfor jeg ikke begynte å legge til den blå mengden, som vi igjen med en verdi på 00. Årsaken er at når du begynner å legge blå sakte i trinn av 11, 22, 33, et cetera, det ser fortsatt ut som oransje. Men når du kommer over 55, ser du noen problemer. Spesielt hvis vi øker det helt opp til noe som # FF5599. Hva skjer er at det blir en virkelig rosa farge. Hvorfor er det sånn? Vel tenk tilbake til da vi opprinnelig opprettet rosa. Koden var # FF00FF. Den røde er maxed ut og den blå er maxed ut. Så, i vår oransje farge, når du begynner å bytte # FF5500 til # FF5599, er våre røde og grønne verdier ikke lenger de fremtredende verdiene. I stedet er det rødt og blått, noe som gir rosa. På denne måten vil 55-verdien for grønt være lett å lyse vår skygge av rosa, i stedet for å flytte den mot oransjeområdet.
Merknad til leseren: å skape komplekse fargekoder, er ganske vist ganske upraktisk. På den tiden det ville ta deg til å skape en tilstrekkelig farge, kunne du enkelt få flere gode farger ut av en fargeplukker. For en kompleks farge, ville det være best å ikke prøve å lage det selv. I stedet legg det bare til den prøvde og sanne, og spar deg selv dyrebar tid. Du vil, Men ønsker å bruke dine ferdigheter til å utføre en enkel oppgave som mørkere eller tette en farge raskt på farten.
Så du ser denne nydelige fargenekoden, stirrer deg i ansiktet, men du har ingen anelse om hvilken farge det egentlig er. Flott! Dette er sannsynligvis hvor det morsomt kommer inn. Den beste måten å lære deg hvordan du gjør dette er å utføre en enkel test. Jeg ble en gang spurt følgende få spørsmål om en test i en av mine IT-klasser.
Forhåpentligvis var du i stand til å finne alle disse ut! Spesielt de to første. Du burde ha kunnet finne ut at svaret på nummer ett var svart, eller B. For det andre spørsmålet var svaret også ganske enkelt. Etter ordningen med rødt, grønt, blått, vet vi at siden alle verdier med unntak av grønt er satt til 00, vil fargen bli litt grønn. I tillegg, siden verdien for grønn er FF (eller 255), vet vi at denne fargen vil være ren grønn. Dermed vil svaret være A.
Det ser ut til at den eneste vanskelig å dechifisere farge her vil være nummer tre, # FFCC66. Dette er forståelig. Siden den blå verdien (som er 66) er så mye mindre enn de andre to tallene, kan den anses å være relativt irrelevant. Dermed kan du sammenligne den med fargen for gul, # FFFF00. Mellom de to, ser de noe lignende ut. Med denne metoden kan du trekke ut de første tre svarene, siden ingen av dem er eksternt nær gult. Derfor er svaret D. Den reduserte grønne verdien av CC vil skygge fargen litt, og økningen av blå vil skape fargen til å være mye mer lik gull.
Prosessen med å dekode fargekoder omfatter primært tenkning gjennom det og sammenligne det med farger du allerede kjenner!
Her er en siste rask tips om hvordan du kan øke hastigheten på å lage en farge ved hjelp av det heksadesimale systemet. Ved hjelp av denne metoden kan du kutte noen fargekoder ned fra sju tegn ned til fire (f.eks. # _ _ _ _ _ Til # _ _ _). Denne metoden kalles fargekorthand, og ideen bak den er at den vil ta verdien av hver av de tre hovedpersonene, og duplisere dem usynlig. Hva jeg mener med dette er dette: hvis du hadde fargekoden # 123, ville den være lik # 112233. Du kan gjøre dette for hvilken som helst fargekode der hver heksadesimal verdi for rød, grønn og blå er nøyaktig samme tegn. Noen mer vanlige korthenvisninger er:
Forhåpentligvis hjalp denne artikkelen deg med å lære om hvordan fargekoder virkelig fungerer. I mange programmer, som Photoshop, vil det nok være lettest å bruke de innebygde fargeplukkere. Kjernen området hvor denne ferdigheten vil komme til nytte er når du ser gjennom noen CSS kildekode, og vil bare finne ut hvilken type farge det er uten å måtte ty til en annen ressurs. Uansett hvilken metode som er raskere, som webutviklere og designere, er dette ting vi burde ønske å vite! Takk så mye for å lese. Dette er et forståelig vanskelig tema, så la oss snakke mer i kommentarene!
Accentsconagua