Share
HTML-kleurcodes zijn een veelvoorkomend en cruciaal onderdeel van modern webdesign. Hoewel de meeste sites tegenwoordig grotendeels zijn ontworpen met afbeeldingen, zijn kleuren vooral belangrijk wanneer u tijdens het coderen ter plekke een hex-waarde in kleur wilt verzinnen. In deze gids leren we de basisbeginselen achter kleurcodering, waardoor u uiteindelijk de kracht krijgt om met kleuren te komen zonder een kleurenkiezer te gebruiken.
Zoals u wellicht weet, zijn er twee algemene manieren om een kleur in webdesign te definiëren:
Beide worden meestal geïmplementeerd met behulp van CSS of HTML, zoals u hieronder kunt lezen:
Tekst hier Tekst hier
.foo color: rgb (111,222,111);
In het eerste codevoorbeeld zou elke tekst "Tekst hier" verschijnen als een lichtgrijze kleur. We zullen bespreken waarom dat later is; merk echter op dat hoewel de kleurmethoden heel verschillend lijken, ze feitelijk exact dezelfde kleur hebben.
In het tweede voorbeeld hebben we gewoon een snelle CSS-code. Het is vrij eenvoudig - alles met een klasse "foo" krijgt een tekstkleur van rgb (111.222.111). Voor de meer nieuwsgierigen zou dat een limoengroene kleur zijn.
Tot dusverre, zou het meeste hiervan logisch voor u moeten zijn. Laten we nu ingaan op de manier waarop we van die relatief cryptische codes overgaan in iets concreets.
In RGB kan elke waarde tussen de komma's een getal zijn van 0 tot 255. Bijvoorbeeld:
RGB (10,137,29)
Omdat RGB staat voor "Rood Groen Blauw" betekent dit dat er een waarde van 10 is voor rood, 137 voor groen en 29 voor blauw. Het is onvermijdelijk dat dit een soort onherleidbare fractie is. Dus:
Hoe hoger het getal, des te meer van die bepaalde kleur zal er in het eindresultaat zijn.
Wanneer ingesteld op nul, is er geen van die bepaalde kleur. Met 255 is het tegendeel natuurlijk waar. daarom:
Dit klopt omdat het RGB-kleursysteem gebaseerd is op kleur door licht. Dit is heel anders dan hoe u normaal kleuren zou maken, bijvoorbeeld met verf of kleurpotloden. Als je een combinatie van rgb (255,255,255) had met verf, zou je waarschijnlijk uitkomen met iets als duister bruin, maar zeker niet wit!
Hexadecimale kleuren zijn over het algemeen moeilijker uit te leggen dan RGB. Fundamenteel zijn ze hetzelfde. De innerlijke werking van hexadecimalen is echter ongetwijfeld ingewikkelder.
Om hexadecimale kleuren uit te leggen, zullen we eerst terug moeten vallen in een binair getal en in het basisgetal van zestien getallen om te begrijpen wat zoiets werkelijk probeert te "zeggen":
# 554BFF
Voor degenen onder u die niet weten hoe deze beide werken, of wat ze ook zijn, hier is een korte handleiding:
Als dat enigszins verwarrend was, raad ik aan er opnieuw over te lezen. Als het daarna nog steeds niet klopt, is dat perfect in orde - de volgende voorbeelden zullen je begrip vergroten.
Hexadecimaal, zoals de naam al aangeeft, biedt zestien bruikbare 'waarden' voor een getal dat moet worden overgenomen. Zoals je misschien al eerder hebt gemerkt, kan een "nibble" je een willekeurig getal geven van 0-15: zestien waarden totaal!
Ervan uitgaande dat we het volgende hebben:
1111
En wetende dat de binaire waarden van elke bit als volgt zullen worden:
8 4 2 1
De binaire waarde van 1111 wordt:
8 + 4 + 2 + 1
wat is ...
15
Evenzo, als het binaire getal 0000 was geweest, zou het uiteindelijke resultaat zojuist nul zijn geweest, omdat 0 + 0 + 0 + 0 gelijk is aan 0.
binair: 0101
De waarden voor elke bit zijn 8,4,2 en 1 (in volgorde). Voeg de binaire waarden van die samen toe:
0 + 4 + 0 + 1
Gelijk aan 5.
Hopelijk zijn die snelle voorbeelden nuttig. Ik moedig je aan om sommige anderen snel zelf te proberen. Ik zal je er zelfs een geven:
Converteren van binair naar decimaal: 1010
Hint: het is tussen 9 en 11.
Dit kan het gevoel hebben dat het nergens heen gaat met betrekking tot webontwikkeling, maar geloof me, we zijn er bijna.
In hexadecimaal zijn er zestien verschillende weergaven voor een binaire reeks: 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E en F. Deze zijn op hun beurt weer , vertegenwoordigen de getallen 0-15 (totaal 16 getallen). Beide vertegenwoordigen hetzelfde binaire getal. Maar snel - stop en denk - #FFFFFF levert wit op, correct? En je kunt nooit een letter hoger dan F krijgen in een HTML-kleurcode. Onthoud dat.
Hier is een snel overzicht van de relatie tussen binair, decimaal en hexadecimaal:
Dit betekent dat als u het nummer 15 wilt maken, u F in hexadecimaal of 1111 in binair kunt schrijven. Als u bijvoorbeeld 10 wilt maken, schrijft u A in hexadecimaal of 1010 in binair getal.
Nu zijn we een beetje dichter bij het uitvogelen hoe hexadecimaal precies werkt. Laten we ons snel een voorbeeld voorstellen van een HTML-kleurcode die in drie delen is verdeeld:
# 006699 tot -> # 00,66,99
Dat ziet er een beetje bekend uit; als je denkt wat ik denk, heb je gelijk. Hexadecimaal is op dezelfde manier georganiseerd als RGB: het heeft een waarde voor elk rood, groen en blauw. Het belangrijkste verschil is:
We zullen nu onderzoeken hoe u een waarde tot 255 kunt creëren, omdat we tot nu toe alleen hebben geleerd hoe u getallen tot 15 kunt maken.
Binair: 0110 Bitwaarden: 128 64 32 16 Voeg alles bij elkaar toe waar: 0 + 64 + 32 + 0 Opbrengsten: 96
We hebben geconstateerd dat de eerste knabbel aan de rechterkant gelijk is aan zes. En nu hebben we ontdekt dat de tweede knabbel aan de linkerkant 96 is. Wat doe je hiermee? Voeg ze gewoon toe! 96 + 6 = 102. Daarom is de hexadecimale waarde van 66 102 in het normale decimale systeem.
Wat dit betekent is dat, in hexadecimaal, het RGB-equivalent van 66 (in hex) 102 is. Bijgevolg is # 666666 gelijk aan rgb (102,102,102).
Laten we nog een hex naar decimale conversie doen:
Hexadecimaal: FF Binair: 1111 1111 Bitwaarden: 128 64 32 16 8 4 2 1 Toevoegen: 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 Opbrengsten: 255
255 is de maximale waarde voor elke kleur. Dus als we #FFFFFF hadden, waarvan we allemaal weten dat het wit is, zou het rgb (255,255,255) zijn, wat ook wit is.
Laten we voor de duidelijkheid een laatste conversie doen. Deze keer gaan we een volledige hexadecimale kleur naar RGB converteren. Onze kleur is # 6AB4FF.
6A ------ Binair: 0110 1010 Toevoegen: 64 + 32 + 8 + 2 96 + 10 Opbrengsten: 106 ------ B4 ------ Binair: 1011 0100 Toevoegen: 128 + 32 + 16 + 4 176 + 4 Opbrengsten: 180 ------ FF ------ (We hebben dit al gedaan, dus we weten dat het 255 is)
Conclusie: # 6AB4FF is gelijk aan rgb (106,180,255).
Nu vraag je je misschien af hoe we van deze waarden een echte kleur krijgen die we ons in onze hoofd kunnen voorstellen. Het volgende gedeelte zal helpen dat te dekken. Dus nu we weten hoe hexadecimaal en RGB met elkaar in verband staan, en nu we weten hoe hexadecimaal werkt, zullen we nu bekijken hoe je in een handomdraai een kleur kunt verzinnen en je helpen om een willekeurige kleur te maken. kleur zonder ooit een kleurenkiezer te hoeven gebruiken.
Quick Fun Fact: Aangezien er 8 bits in elke waarde van rood, groen en blauw staan, betekent dit dat er 24 bits totaal zijn in één RGB-kleur (8 * 3 = 24). Dit is waar we de term 24-bit kleur krijgen, vaak "True Colour" genoemd.
Met 24-bits kleuren zijn we in staat tot 16.777.216 - meer dan 16 miljoen kleuren te creëren. Dit is meestal meer dan voldoende voor elk project. 32-bits kleuren zijn echter steeds prominenter geworden, maar niet noodzakelijk op het gebied van webontwerp. Je kunt meer lezen over kleurdiepte op Wikipedia.org in dit artikel. Bovendien kunt u hier een afbeelding van alle ~ 16 miljoen kleuren in één afbeelding bekijken (David Naylor Blog). Het is echt fascinerend, echt! De afbeeldingsgrootten van 4096x4096 zijn logisch, omdat 4096 de vierkantswortel is van 16.777.216.
Om deze kennis van enig nut voor ons te kunnen gebruiken, moet u leren hoe u uw eigen kleuren snel en eenvoudig kunt maken. We beginnen zo eenvoudig mogelijk en gaan vervolgens over op moeilijker te verwoorden kleuren.
Laten we zeggen dat we meteen een grijze kleur willen maken. Grijswaardenkleuren komen vaak voor en zijn in veel gevallen de meest bruikbare. Tot nu toe weten we het volgende: # 000000 is zwart,
en #FFFFFF is gelijk aan wit. Daarom zullen de grijswaardenkleuren vaker worden gebruikt tussen deze twee waarden. Om een grijstint te maken, zouden we op passende wijze waarden tussen wit en zwart vaststellen.
Logischerwijs zal een waarde dichter bij #FFFFFF een lichtere grijstint zijn en een waarde dichter bij # 000000 donkerder. Met dat in gedachten, laten we een vrij lichtgrijze kleur maken. Sommige snelle denkwijzen geven ons de volgende resolutie: #DDDDDD is comfortabel ver genoeg verwijderd van wit, dus het zal duidelijk een mooi lichtgrijs voor ons zijn.
Later willen we een donkerder grijs maken. Nogmaals, eenvoudig. Doe gewoon iets als # 333333. Zoals u kunt zien, zijn grijswaarden heel eenvoudig. Als u vindt dat u een nog specifiekere grijstint nodig hebt, onthoud dat dan als algemene vuistregel,
als elke waarde voor rood, groen en blauw allemaal hetzelfde is, of bijna gelijk is, wordt deze grijs weergegeven. Een voorbeeld hiervan is de kleur "Gainsboro" met een kleurcode van #DCDCDC. Dit betekent dat het maar één minder is dan onze #DDDDDD-kleur in elke waarde van rood, groen en blauw. U kunt waarschijnlijk geen onderscheid maken tussen deze twee, maar het verhogen of verlagen met 1 geeft u een beetje meer 'grijze precisie'.
De tweede meest eenvoudige reeks kleuren die u kunt maken, is rood, groen en blauw (uiteraard). Laten we rood als voorbeeld gebruiken. Als we puur RGB-rood willen maken, geven we de kleurwaarde
de maximale waarde van rood, met 0 groen en 0 blauw. Dat is logisch toch? Om rood in hexadecimaal te maken, plaatsen we # FF0000. Nu hebben we rood.
Het maken van groen en blauw volgt exact hetzelfde principe. Om puur groen te maken: # 00FF00 (alles groen, niets anders). Om puur blauw te maken: # 0000FF (alles blauw, niets anders).
Simpel genoeg; deze kleuren zijn echter onder de meeste omstandigheden absoluut afschuwelijk bij gebruik in een webontwerp. Daarom, om deze kleuren te gebruiken, moeten we ze dienovereenkomstig verduisteren.
Gelukkig is ook arcering eenvoudig. Laten we blauw gebruiken voor dit voorbeeld. We hebben al # 0000FF ingesteld voor ons. Om de schaduw van onze blauwe waarde te wijzigen, hoeven we alleen de laatste twee tekens van de hexadecimale kleurcode te wijzigen. Omdat FF het hoogst mogelijke blauw is, kunnen we het op dit moment alleen maar donkerder maken. Laten we als zodanig het volgende doen:
Het veranderen van # 0000FF in # 000055 (het verminderen van de hoeveelheid zwart, waardoor het blauw dichter bij zwart komt te staan) levert een donkerder blauw op.
Zoals u kunt zien, is het in de schaduw stellen van rood, groen en blauw verre van moeilijk - het is eenvoudig om de hoeveelheid van een bepaalde kleur te verkleinen. Dezelfde regel is van toepassing op rood en groen, niet alleen zwart, dus # 005500 is een donkerdere tint groen en # 550000 is een donkerdere tint rood. (Natuurlijk kun je lager of hoger gaan dan 55 als je dat wilt).
Ik veronderstel dat je waarschijnlijk denkt: dus hoe zit het met geel, paars en alle andere kleuren? Nou, gelukkig is het gewoon een beetje ingewikkelder dan de grote drie van RGB. Laten we beginnen met geel.
Om geel te maken, moeten we eerst denken in termen van het kleurenspectrum. Een klein mnemonic dat mensen graag gebruiken is "Roy G. Biv", wat staat voor "rood, oranje, geel, groen, blauw, indigo, violet." Nu is de logica hierin enigszins verwarrend, maar probeer me aan te houden. Om geel te worden, gebruiken we de twee hoofdkleuren van rood, groen en blauw aan beide kanten van waar geel zou zijn.In dit geval zou het rood en groen zijn.Dus als we # FFFF00 hadden geschreven, zouden we geel hebben. Fantastisch!
Er zijn slechts een paar andere mogelijke combinaties die deze methode gebruiken, dus we zullen ze snel bespreken. Tussen rood en blauw op een kleurenwiel zou de code # FF00FF zijn en zouden we roze of magenta krijgen zoals het traditioneel wordt genoemd, Volgende, tussen groen en blauw (# 00FFFF), we hebben cyaan. En nu, helaas, dat zijn eigenlijk alle eenvoudige combinaties die we kunnen doen. De rest vereist enige aandacht, die we zo dadelijk zullen bespreken. Laten we eerst eens kijken hoe we deze kleuren kunnen verduisteren.
Simpel genoeg zullen we cyaan deze keer schaduwen geven, wat, zoals we ons herinneren, # 00FFFF is. En ... je raadt het waarschijnlijk, maar om geel, cyaan of roze te verduisteren, hoef je alleen maar alle FF-waarden naar een kleinere te veranderen. In dit voorbeeld, waarbij cyaan in een veel donkerdere variant wordt geschaduwd, kunnen we iets doen als # 005555. Een van de officiële HTML-kleurnamen, DarkCyan, is # 008B8B, dus die zou een beetje lichter zijn dan degene die we zojuist hebben gemaakt. Dus daar hebben we het: schaduw, geel, cyaan en roze.
Om een kleur lichter te maken, is het net zo eenvoudig als het maken van de lage waarden (de 00-waarden, meestal) groter en het verlaten van de FF (of andere hoofdkleuren) alleen. Als we bijvoorbeeld groen hadden en we wilden het lichter maken, zouden we beginnen met # 00FF00. Vervolgens, om het lichter te maken, zouden we gewoon de 00-waarden verhogen. #AAFFAA produceert een mooie lentekleur groen.
Bovendien is het hetzelfde proces om # FF00FF (Pink) lichter te maken. Verhoog de lage waarden: #FFAAFF. Dit produceert een lichtroze kleur. Werkt perfect!
Tot nu toe hebben we geleerd hoe je de meest eenvoudige kleuren kunt maken, maar in de meeste toepassingen zal deze kennis niet nuttig zijn voor een project. Dat is waar dit tweede deel in het spel komt.
Om een mooie kleur te creëren, moeten we af gaan van wat we al weten en op een logische manier nadenken over wat we proberen te creëren. Laten we een scenario maken; we willen een subtiele oranje kleur maken die bij onze behoeften past - een beetje als een iets donkerdere tint oranje soda.
We beginnen met wat we al weten te maken en dat is geel: # FFFF00. We moeten het een beetje dichter bij het oranje gebied brengen, dus om dat te doen, zouden we wat van de groene "aantrekkingskracht" verlichten, zoals ik het graag noem. Hierdoor neemt de hoeveelheid rood toe. Ik heb ervoor gekozen om dit te wijzigen in # FF5500. Dit snelle en eenvoudige voorbeeld geeft u een idee van hoe u een kleur gaat maken. Het laatste dat ik wil vermelden, is dat je je misschien afvraagt waarom ik niet begon toe te voegen aan de blauwe hoeveelheid, die we met een waarde van 00 hebben achtergelaten. De reden hiervoor is, dat wanneer je begint langzaam blauw toe te voegen in stappen van 11, 22, 33, et cetera, ziet het er nog steeds redelijk oranje uit. Zodra u echter ouder bent dan 55, ziet u enkele problemen. Vooral als we het helemaal verhogen naar iets als # FF5599. Wat er gebeurt, is dat het een echt roze kleur wordt. Waarom is dit? Denk goed terug aan toen we oorspronkelijk roze maakten. De code was # FF00FF. Het rood is maximaal en het blauw is maximaal. Dus, in onze oranje kleur, wanneer u begint met het wijzigen van # FF5500 in # FF5599, zijn onze rode en groene waarden niet langer de prominente waarden. In plaats daarvan is het rood en blauw, wat roze oplevert. Op deze manier zou de 55-waarde voor groen gewoon onze roze tint verlichten in plaats van deze naar het oranje gebied te verplaatsen.
Opmerking voor de lezer: het creëren van complexe kleurcodes is weliswaar vrij onpraktisch. In de tijd dat het u zou kosten om een voldoende kleur te creëren, had u gemakkelijk enkele goede kleuren uit een kleurenkiezer kunnen halen. Voor een complexe kleur, zou je het beste niet proberen om het zelf te maken. Laat het in plaats daarvan gewoon aan de beproefde, en bespaar jezelf kostbare tijd. U zullen, U wilt echter uw vaardigheden gebruiken om een eenvoudige taak uit te voeren, zoals een kleur snel donkerder of lichter maken wanneer u onderweg bent.
Dus je ziet deze mooie kleurencode, je in het gezicht starend, maar je hebt geen idee welke kleur het echt is. Super goed! Dit is waarschijnlijk waar het meeste plezier in komt. De beste manier om je te leren hoe je dit moet doen, is door een eenvoudige test uit te voeren. Ik werd eens de volgende paar vragen gesteld over een test in een van mijn lessen informatietechnologie.
Hopelijk was je in staat om al deze uit te zoeken! Vooral de eerste twee. Je had moeten weten dat het antwoord op nummer één zwart was, of B. Voor de tweede vraag was het antwoord ook vrij eenvoudig. Volgens het schema van rood, groen en blauw weten we dat omdat elke waarde behalve groen is ingesteld op 00, de kleur een beetje groen zal zijn. Omdat de waarde voor groen FF (of 255) is, weten we dat deze kleur puur groen is. Het antwoord zal dus A zijn.
Het lijkt erop dat de enige moeilijk te ontcijferen kleur hier nummer drie is, # FFCC66. Dit is begrijpelijk. Omdat de blauwe waarde (die 66 is) zoveel kleiner is dan de andere twee getallen, kan deze als relatief irrelevant worden beschouwd. Je zou het dus kunnen vergelijken met de kleur voor geel, # FFFF00. Tussen die twee lijken ze enigszins op elkaar. Met deze methode kunt u de eerste drie antwoorden wegstrepen, aangezien geen van hen op afstand in de buurt van geel is. Daarom is het antwoord D. De afgenomen groene waarde van CC zal de kleur iets lichter maken, en de toename van blauw zal de kleur naar veel meer gelijkend op goud duwen.
Het proces van het decoderen van kleurcodes omvat voornamelijk het doordenken en vergelijken met kleuren die u al kent!
Hier is nog een laatste snelle tip over hoe je sneller een kleur kunt maken met behulp van het hexadecimale systeem. Met deze methode kunt u enkele kleurcodes inkorten van zeven tekens tot vier (bijvoorbeeld # _ _ _ _ _ _ tot # _ _ _). Deze methode wordt "color-term" genoemd en het idee erachter is dat het de waarde van elk van de drie hoofdpersonen zal aannemen en ze onzichtbaar dupliceert. Wat ik hiermee bedoel is dit: als je de kleurcode # 123 had, zou dat het equivalent zijn van # 112233. U kunt dit doen voor elke kleurcode waarbij elke hexadecimale waarde voor rood, groen en blauw exact hetzelfde teken is. Enkele meer algemene shorthands zijn:
Hopelijk heeft dit artikel je geholpen meer te weten te komen over hoe kleurencodes echt werken. In veel programma's, zoals Photoshop, zal het weliswaar het gemakkelijkst zijn om de ingebouwde kleurkiezers te gebruiken. Het kerngebied waar deze vaardigheid van pas zal komen, is wanneer je door een CSS-broncode kijkt en gewoon wilt uitvinden wat voor soort kleur het is zonder dat je naar een andere bron hoeft te zoeken. Ongeacht welke methode sneller is, als webontwikkelaars en ontwerpers, dit zijn dingen die we zouden moeten weten! Heel erg bedankt voor het lezen. Dit is een begrijpelijk moeilijk onderwerp, dus laten we meer in de commentaren praten!
Accentsconagua