Share
HTML-färgkoder är en vanlig och avgörande del av modern webbdesign. Medan de flesta webbplatser idag är utformade i stor utsträckning delvis med bilder, är färger särskilt viktiga när du behöver komma med ett färghex-värde i flygningen medan du kodar. I den här guiden kommer vi att lära oss grunden bakom färgkodning, vilket ger dig kraften att komma på färger utan att använda en färgplockare.
Som du kanske vet finns det två vanliga sätt att definiera en färg i webbdesign:
Båda dessa används oftast med hjälp av CSS eller HTML, som du kan granska nedan:
Skriv här Skriv här
.foo färg: rgb (111,222,111);
I det första kodexemplet skulle varje text text här dyka upp som en ljusgrå färg. Vi går över varför det är senare; Observera dock hur trots att färgmetoderna verkar vara ganska olika, i själva verket är de exakt samma färg.
I det andra exemplet har vi bara en snabb CSS-kod. Det är ganska enkelt - något med en klass av "foo" kommer att ha en textfärg på rgb (111.222.111). För de mer nyfikna, det skulle vara en lime green-ish färg.
Hittills, det mesta borde vara meningsfullt för dig. Låt oss nu inse exakt hur vi går från de relativt kryptiska koderna till något lite mer konkret.
I RGB kan varje värde mellan kommatecken vara ett tal från 0 till 255. Till exempel:
rgb (10,137,29)
Eftersom RGB står för "Red Green Blue" betyder det att det finns ett värde på 10 för rött, 137 för grönt och 29 för blått. Oundvikligen är dessa en slags irreducerbar fraktion. Således:
Ju högre antal, desto mer av den vissa färgen kommer det att finnas i slutresultatet.
När den är inställd på noll finns det ingen av den speciella färgen. Vid 255 visar det motsatsen naturligtvis sant. Därför:
Detta gäller för att RGB-färgsystemet är baserat på färg genom ljus. Det här skiljer sig mycket från hur man normalt skapar färger, till exempel med färg eller kritor. Om du hade en kombination av rgb (255,255,255) med färg, skulle du förmodligen komma ut med något som mörkbrunt, men absolut inte vitt!
Hexadecimal färg är i allmänhet svårare att förklara än RGB. Grunden är de samma. Emellertid är hexadecimals inre verkningar utan tvekan mer ingripande.
För att förklara hexadecimal färg måste vi först komma tillbaka till något binärt och in i basets sextons talsystem för att förstå hur något som detta verkligen försöker "säga":
# 554BFF
För er av er som inte vet huruvida något av dessa jobb, eller vad någon av dem är, här är en kort guide:
Om det var lite förvirrande, föreslår jag att du läser över det igen. Om det fortfarande inte är meningslöst efter det är det helt okej - följande exempel hjälper till att förstärka din förståelse.
Hexadecimal, som namnet antyder, ger sexton användbara "värden" för ett nummer att ta på sig. Som du kanske har märkt tidigare kan en "nibble" ge dig ett tal från 0-15: sexton värden totalt!
Förutsatt att vi har följande:
1111
Och att veta att de binära värdena för varje bit kommer att bli enligt följande:
8 4 2 1
Det binära värdet av 1111 blir:
8 + 4 + 2 + 1
vilket är…
15
På samma sätt, om det binära numret hade varit 0000, hade det slutliga resultatet bara varit noll, eftersom 0 + 0 + 0 + 0 motsvarar 0.
binär: 0101
Värdena för varje bit är 8,4,2 och 1 (i ordning). Lägg ihop de binära värdena för dem:
0 + 4 + 0 + 1
Lika med 5.
Förhoppningsvis är dessa snabba exempel användbara. Jag uppmanar dig att prova några andra snabbt själv. Jag ska även ge dig en:
Konvertera från binär till decimal: 1010
Tips: Det är mellan 9 och 11.
Det kan tyckas att det inte går någonstans i samband med webbutveckling, men lita på mig, vi är nästan där.
I hexadecimal finns sexton olika representationer för en binär sekvens: 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E och F. Dessa i sin tur , representera siffrorna 0-15 (16 nummer totalt). Båda dessa representerar samma binära nummer. Men snabbt - sluta och tänk - #FFFFFF ger vit, korrekt? Och du kan aldrig ha ett brev högre än F i en HTML-färgkod. Kom ihåg det.
Här är ett snabbt diagram som kartlägger förhållandet mellan binärt, decimal och hexadecimalt:
Det betyder att om du vill skapa nummer 15 kan du skriva F i hexadecimal eller 1111 i binär. Dessutom, om du ville göra, säga 10, skulle du skriva A i hexadecimal eller 1010 i binär.
Nu är vi lite närmare att bestämma exakt hur hexadecimalt fungerar. Låt oss föreställa oss ett exempel på att en HTML-färgkod delas upp i tre delar:
# 006699 till -> # 00,66,99
Nu ser det lite bekant ut; om du tänker på vad jag tänker har du rätt Hexadecimal är organiserad exakt samma sätt som RGB: det har ett värde för varje röd, grön och blå. Kärnskillnaden är:
Vi ska nu titta på hur du kan skapa ett värde upp till 255, eftersom vi hittills bara har lärt oss hur du skapar nummer upp till 15.
Binary: 0110 Bitvärden: 128 64 32 16 Lägg ihop alla som är sanna: 0 + 64 + 32 + 0 Utbyten: 96
Vi har funnit att den första nibble till höger är lika med sex. Och nu har vi funnit att den andra nibbleen till vänster är 96. Så vad gör du med dessa? Lägg bara till dem! 96 + 6 = 102. Därför är det hexadecimala värdet av 66 102 i det normala decimalsystemet.
Vad detta innebär är att i hexadecimal är RGB-ekvivalenten 66 (i hex) 102. Följaktligen är # 666666 lika med rgb (102.102.102).
Låt oss göra en ytterligare hex till decimalomvandling:
Hexadecimal: FF Binär: 1111 1111 Bitvärden: 128 64 32 16 8 4 2 1 Lägg till: 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 Utbyte: 255
255 är det maximala värdet för vilken färg som helst. Så, om vi hade #FFFFFF, som vi alla vet att vara vita, skulle det vara rgb (255,255,255), vilket också är vitt.
För förståelsens skull, låt oss göra en sista omvandling. Den här gången kommer vi att konvertera en hel hexadecimal färg till RGB. Vår färg är # 6AB4FF.
6A ------ Binär: 0110 1010 Lägg till: 64 + 32 + 8 + 2 96 + 10 Utbyten: 106 ------ B4 ------ Binär: 1011 0100 Lägg till: 128 + 32 + 16 + 4 176 + 4 Utbyte: 180 ------ FF ------ (Vi har redan gjort det här, så vi vet att det är 255)
Slutsats: # 6AB4FF motsvarar rgb (106,180,255).
Nu kanske du undrar hur vi får från dessa värden till en verklig färg som vi kan tänka oss i vårt huvud. Nästa avsnitt hjälper till att täcka det. Så nu när vi vet hur hexadecimalt och RGB är relaterade, och nu när vi vet hur hexadecimalt fungerar, så ska vi nu granska hur du kan komma med en färg i farten i din egen kod och hjälpa dig att göra några färg utan att behöva använda en färgplockare.
Snabb roligt faktum: Eftersom det finns 8 bitar i varje värde av rött, grönt och blått, betyder det att det finns 24 bitar totalt i en RGB-färg (8 * 3 = 24). Här får vi termen 24-bitars färg, ofta refererad till som "True Color".
Med 24-bitars färg kan vi skapa upp till 16 777 216 - över 16 miljoner färger. Detta är vanligtvis mer än tillfredsställande för något projekt. 32-bitars färg har dock börjat bli mer framträdande, men inte nödvändigtvis inom området webbdesign. Du kan läsa mer om färgdjup på Wikipedia.org i den här artikeln. Dessutom kan du se en bild av alla ~ 16 miljoner färger i en bild här (David Naylor Blog). Det är ganska fascinerande, verkligen! Bildstorlekarna 4096x4096 är vettiga sedan 4096 är kvadratroten av 16.777.216.
För att denna kunskap ska vara till nytta för oss kommer du att behöva lära dig hur du gör dina egna färger snabbt och enkelt. Vi börjar så enkelt som möjligt och flyttar sedan in i svårare att artikulera färger.
Låt oss säga att vi vill göra en grå färg på flugan. Gråskala färger är vanliga och tenderar att vara mest användbara i många fall. Hittills vet vi följande: # 000000 är lika med svart,
och #FFFFFF är lika med vit. Därför kommer de vanligaste av gråskala färgerna att vara inkrementer mellan de två värdena. För att göra en grå färg, skulle vi på lämpligt sätt skapa värden mellan vitt och svart.
Logiskt sett kommer ett värde närmare #FFFFFF att vara en ljusare ton grå och ett värde närmare # 000000 blir mörkare. Med det i åtanke, låt oss göra en ganska ljusgrå färg. Några snabba tänkningar ger oss följande upplösning: #DDDDDD är bekvämt tillräckligt långt borta från vitt, så det blir klart en fin ljusgrå för oss.
Senare vill vi göra en mörkare grå. Ännu en gång, enkelt. Gör bara något som # 333333. Som du kan se är gråvärdena mycket enkel. Om du upptäcker att du behöver en ännu mer specifik grå färg, kom ihåg det som en allmän tumregel,
Om varje värde för rött, grönt och blått är samma, eller nästan liknar det, blir det grå. Ett sådant exempel på detta är färgen "Gainsboro" som har en färgkod för #DCDCDC. Det betyder att det bara är en mindre än vår #DDDDDD-färg i varje värde av rött, grönt och blått. Du kommer nog inte att kunna skilja mellan de två, men ökningen eller minskningen med 1 ger dig lite mer "grå precision".
Den näst mest enkla uppsättningen färger du kan skapa är röd, grön och blå (självklart). Låt oss använda rött som ett exempel. Om vi vill skapa ren RGB röd, kommer vi att ge färgvärdet
det maximala värdet av rött, med 0 grönt och 0 blått. Det är vettigt rätt? För att bli röd i hexadecimal, hade vi bara satt # FF0000. Nu har vi rött.
Skapa gröna och blåa följer exakt samma princip. För att göra ren grön: # 00FF00 (alla gröna, inget annat). För att göra rent blått: # 0000FF (allt blått, inget annat).
Enkelt nog; Dessa färger är emellertid under de flesta omständigheter helt häftiga när de används i en webbdesign. För att använda dessa färger måste vi därför skugga dem i enlighet med detta.
Lyckligtvis är skuggning också lätt. Låt oss använda blå för det här exemplet. Vi har redan # 0000FF inrättat för oss. För att ändra skuggan av vårt blå värde behöver vi bara ändra de två sista tecknen i den hexadecimala färgkoden. Eftersom FF är det högsta blåa möjligt, kan vi på det här laget bara göra det mörkare. Som sådan, låt oss göra just det:
Ändring # 0000FF till # 000055 (minskar mängden svart, vilket förflyttar blåen närmare svart) ger en mörkare blå.
Som du kan se är skuggning rött, grönt och blått långt ifrån svårt - det är en enkel sak att minska mängden av en viss färg. Samma regel gäller för rött och grönt, inte bara svart, så # 005500 är en mörkare nyans av grön och # 550000 är en mörkare nyans av rött. (Naturligtvis kan du gå lägre eller högre än 55 om du vill).
Jag antar att du troligen tänker: så hur gult, lila och alla andra färger? Tja, lyckligtvis är det bara lite mer komplicerat än de stora tre av RGB. Låt oss börja med gult.
För att skapa gult måste vi först tänka när det gäller färgspektrum. En liten mnemonic som folk gillar att använda är "Roy G. Biv", som står för "röd, orange, gul, grön, blå, indigo, violett. Nu är logiken här något förvirrande, men försök att hålla fast vid mig. För att bli gul använder vi de två huvudfärgerna från rött, grönt och blått på vardera sidan av var gult skulle vara. I det här fallet skulle det vara rött och grönt. Om vi sålde # FFFF00 skulle vi ha gult. Fantastisk!
Det finns bara några andra möjliga kombinationer med den här metoden, så vi går snabbt över dem. Mellan rött och blått på ett färghjul skulle koden vara # FF00FF, och vi skulle bli rosa eller magenta som det traditionellt kallas, Nästa mellan grön och blå (# 00FFFF), vi har cyan. Och nu är det tyvärr faktiskt alla de enkla kombinationerna vi kan göra. Resten kräver viss tanke, som vi går över en minut. Först, låt oss räkna ut hur man skuggar dessa färger.
Enkelt nog, vi börjar skugga cyan den här gången, som, som vi kommer ihåg, är # 00FFFF. Och ... gissade du antagligen det, men att skugga gul, cyan eller rosa, allt du behöver göra är att ändra några FF-värden till en mindre. I det här exemplet skuggas cyan ner till en mycket mörkare variation, vi kan göra något som # 005555. Ett av de officiella HTML-färgnamnen, DarkCyan, är # 008B8B, så att man skulle vara lite lättare än den vi just skapat. Så där har vi det: hur man skuggar gul, cyan och rosa.
För att göra en färgändare är det lika enkelt att göra de låga värdena (de 00-värdena, typiskt) större och lämnar FF (eller andra huvudfärger) ensam. Om vi till exempel hade grönt, och vi ville göra det lättare, skulle vi börja med # 00FF00. Då, för att lätta det, skulle vi helt enkelt öka 00-värdena. #AAFFAA ger en fin, vårfärg grön.
För att göra # FF00FF (Pink) tändare är det samma process. Öka de låga värdena: #FFAAFF. Detta ger en ljusrosa färg. Fungerar som en charm!
Hittills har vi lärt oss hur man skapar de enklaste färgerna, men i de flesta tillämpningar kommer den här kunskapen inte att vara till hjälp för ett projekt. Det är här den här andra delen kommer till spel.
För att skapa en snygg färg måste vi arbeta av vad vi redan vet och tänka igenom det vi försöker skapa på ett logiskt sätt. Låt oss skapa ett scenario; vi vill göra en subtil orange färg som passar våra behov - som en lite mörkare nyans av apelsinfärska.
Vi börjar med vad vi redan vet hur man gör, och det är gult: # FFFF00. Vi behöver flytta den lite närmare orangeområdet, för att göra det, skulle vi lindra lite av det gröna "draget" som jag gillar att kalla det. Genom att göra så ökar mängden rött. Jag valde att ändra den till # FF5500. Det här snabba och enkla exemplet ger dig en uppfattning om hur du skulle gå om att skapa en färg. Det sista jag vill nämna är att du kanske undrar varför jag inte börja lägga till den blå kvantiteten, som vi lämnade till ett värde av 00. Anledningen är att när du börjar lägga blå långsamt i steg av 11, 22, 33, et cetera, det ser fortfarande ganska orange ut. Men när du kommer över 55 kommer du att se några problem. Särskilt om vi ökar det hela vägen upp till något som # FF5599. Vad som händer är att det blir en riktigt rosa färg. Varför är detta? Tja omtanke till när vi ursprungligen skapade rosa. Koden var # FF00FF. Den röda är maxed ut och den blå är maxed out. Så, i vår orange färg, när du börjar byta # FF5500 till # FF5599, är våra röda och gröna värden inte längre de framstående värdena. I stället är det rött och blått vilket ger rosa färg. På det här sättet skulle 55-värdet för grönt helt enkelt bli lättare att tända vår skugga av rosa, istället för att flytta den mot orangeområdet.
Notera till läsaren: skapa komplexa färgkoder är visserligen ganska opraktiskt. På den tiden det skulle ta dig att skapa en tillräcklig färg, kunde du enkelt ha fått flera bra färger ur en färgplockare. För en komplex färg är det bäst att inte försöka skapa det själv. I stället lämna det bara till den försökte och sanna, och spara dig dyrbar tid. Du kommer, Men vill du använda dina färdigheter för att utföra en enkel uppgift som att mörka eller tända en färg snabbt på språng.
Så du ser den här härliga färgkoden, stirrar dig i ansiktet, men du har ingen aning om vilken färg det egentligen är. Bra! Det här är förmodligen där det roliga kommer in. Det bästa sättet att lära dig hur man gör det här är att genomföra ett enkelt test. Jag blev en gång frågad med några få frågor om ett prov i en av mina Informationsteknologiklasser.
Förhoppningsvis kunde du hitta alla dessa ut! Särskilt de två första. Du borde ha kunnat ta reda på att svaret på nummer ett var svart, eller B. För den andra frågan var svaret också ganska enkelt. Efter ordningen av rött, grönt, blått, vet vi att eftersom varje värde förutom grönt är satt till 00, kommer färgen att bli lite nyans av grön. Dessutom, eftersom värdet för grönt är FF (eller 255) vet vi att den här färgen blir ren grön. Svaret blir således A.
Det verkar som att den enda svåra att dechiffrera färgen här skulle vara nummer tre, # FFCC66. Detta är förståeligt. Eftersom det blå värdet (vilket är 66) är så mycket mindre än de andra två siffrorna, kan det anses relativt irrelevant. Således kan du jämföra det med färgen för gult, # FFFF00. Mellan dessa två ser de lite likartade ut. Med den här metoden kan du tacka de första tre svaren, eftersom ingen av dem är fjärr nära gula. Därför är svaret D. Det minskade gröna värdet på CC kommer att skugga färgen något, och ökningen av blått kommer att trycka färgen på att vara mycket mer lik guld.
Processen med avkodning av färgkoder innefattar primärt tänkande genom det och jämför det med färger du redan vet!
Här är en sista snabb tips om hur du kan påskynda att skapa en färg med hjälp av det hexadecimala systemet. Med den här metoden kan du skära vissa färgkoder ner från sju tecken till fyra (t ex # _ _ _ _ _ till # _ _ _). Denna metod kallas färgskorthand och tanken bakom den är att den kommer att ta värdet av var och en av de tre huvudpersonerna och duplicera dem osynligt. Vad jag menar med det här är det här: om du hade färgkoden # 123, skulle den motsvara # 112233. Du kan göra detta för någon färgkod där varje hexadecimalt värde för rött, grönt och blått är exakt samma tecken. Några vanligare stavelser är:
Förhoppningsvis hjälpte den här artikeln dig att lära dig hur färgkoder verkligen fungerar. I många program, som Photoshop, kommer det säkert vara lättast att använda de inbyggda färgplockarna. Kärnområdet där denna färdighet kommer att vara till nytta är när du tittar igenom någon CSS-källkod och vill helt enkelt ta reda på vilken typ av färg det är utan att behöva tillgripa en annan resurs. Oavsett vilken metod som är snabbare, som webbutvecklare och designers, är det saker vi borde vilja veta! Tack så mycket för att läsa. Detta är ett förståeligt svårt ämne, så låt oss prata mer i kommentarerna!
Accentsconagua