Share
HTML-Farbcodes sind ein gängiges und wichtiges Element des modernen Webdesigns. Während die meisten Websites heutzutage größtenteils aus Bildern bestehen, sind Farben besonders wichtig, wenn Sie während der Codierung einen Hex-Wert für die Farbe festlegen müssen. In diesem Leitfaden lernen wir die Grundlagen der Farbcodierung kennen und geben Ihnen die Möglichkeit, ohne Farbwähler Farben zu erzielen.
Wie Sie vielleicht wissen, gibt es zwei Möglichkeiten, eine Farbe im Webdesign zu definieren:
Beide werden meistens mit CSS oder HTML implementiert, wie Sie im Folgenden lesen können:
Text hier Text hier
.foo color: rgb (111,222,111);
Im ersten Codebeispiel würde jeder Text "Text hier" hellgrau angezeigt. Wir werden später darüber sprechen, warum das so ist. Beachten Sie jedoch, dass, obwohl die Farbmethoden recht unterschiedlich erscheinen, sie tatsächlich die gleiche Farbe haben.
Im zweiten Beispiel haben wir nur einen kurzen CSS-Code. Es ist ziemlich einfach - alles, was eine Klasse "foo" hat, hat eine Textfarbe von rgb (111,222,111). Für Neugierige wäre das eine limonengrüne Farbe.
Bisher sollte das meiste davon für Sie sinnvoll sein. Lassen Sie uns nun näher darauf eingehen, wie wir von diesen relativ kryptischen Codes zu etwas konkreterem gehen.
In RGB kann jeder Wert zwischen den Kommas eine Zahl zwischen 0 und 255 sein. Beispiel:
rgb (10.137,29)
Da RGB für "Red Green Blue" steht, bedeutet dies, dass für Rot ein Wert von 10, für Grün 137 und für Blau 29 angegeben wird. Zwangsläufig handelt es sich dabei um eine Art irreduzibler Fraktion. Somit:
Je höher die Zahl, desto mehr Farbe wird im Endergebnis vorhanden sein.
Bei der Einstellung Null ist diese Farbe nicht vorhanden. Bei 255 erweist sich das Gegenteil natürlich als wahr. Deshalb:
Dies gilt, da das RGB-Farbsystem auf Farbe basiert Licht. Dies unterscheidet sich wesentlich davon, wie Sie normalerweise Farben erstellen würden, z. B. mit Farbe oder Buntstiften. Wenn Sie eine Kombination aus rgb (255,255,255) mit Farbe hätten, würden Sie wahrscheinlich so etwas wie düsteres Braun herausbringen, aber ganz bestimmt nicht weiß!
Hexadezimalfarben sind im Allgemeinen schwieriger zu erklären als RGB. Grundsätzlich sind sie gleich. Die Funktionsweise von Hexadezimal ist jedoch zweifellos komplizierter.
Um die hexadezimale Farbe zu erklären, müssen wir zuerst in ein binäres und in das Basis-Sechzehn-Zahlensystem zurückfallen, um zu verstehen, was so etwas wirklich zu sagen versucht:
# 554BFF
Für diejenigen von Ihnen, die nicht wissen, wie eine dieser Arbeiten funktioniert oder was sie sind, hier eine kurze Anleitung:
Wenn das etwas verwirrend war, schlage ich vor, es noch einmal zu lesen. Wenn es danach immer noch keinen Sinn ergibt, ist das völlig in Ordnung - die folgenden Beispiele werden Ihr Verständnis unterstützen.
Wie der Name schon sagt, liefert Hexadezimal sechzehn verwendbare "Werte" für eine Zahl, die angenommen werden kann. Wie Sie vielleicht bereits bemerkt haben, können Sie mit einem "Nibble" eine beliebige Zahl zwischen 0 und 15: sechzehn Werte angeben!
Angenommen, wir haben folgendes:
1111
Und zu wissen, dass die binären Werte jedes Bits wie folgt werden:
8 4 2 1
Der binäre Wert von 1111 wird zu:
8 + 4 + 2 + 1
welches ist…
fünfzehn
Wenn die Binärzahl 0000 gewesen wäre, wäre das Endergebnis gleich Null gewesen, da 0 + 0 + 0 + 0 gleich 0 ist.
binär: 0101
Die Werte für jedes Bit sind 8,4,2 und 1 (in Reihenfolge). Addieren Sie die binären Werte der beiden:
0 + 4 + 0 + 1
Gleich 5.
Hoffentlich sind diese schnellen Beispiele hilfreich. Ich möchte Sie dazu ermutigen, andere schnell selbst auszuprobieren. Ich gebe dir sogar eins:
Konvertierung von binär nach dezimal: 1010
Hinweis: Es ist zwischen 9 und 11 Uhr.
Es mag sich anfühlen, als würde es in Bezug auf Webentwicklung nirgendwo hin, aber glauben Sie mir, wir sind fast da.
Im Hexadezimalbereich gibt es sechzehn verschiedene Darstellungen für eine binäre Folge: 0,1,2,3,4,5,6,7,8,9, A, B, C, D, E und F. Diese wiederum , repräsentieren die Zahlen 0-15 (insgesamt 16 Zahlen). Beide repräsentieren dieselbe Binärzahl. Aber schnell - aufhören und nachdenken - #FFFFFF ergibt weiß, richtig? In einem HTML-Farbcode kann nie ein Buchstabe höher als F sein. Merk dir das.
Hier ist ein kurzes Diagramm, das die Beziehung zwischen binär, dezimal und hexadezimal darstellt:
Wenn Sie also die Nummer 15 erstellen möchten, können Sie F hexadezimal oder 1111 binär schreiben. Wenn Sie beispielsweise 10 erstellen möchten, schreiben Sie A hexadezimal oder 1010 binär.
Nun sind wir ein bisschen näher dran, wie Hexadezimalwerte genau funktionieren. Lassen Sie uns schnell ein Beispiel für einen HTML-Farbcode vorstellen, der in drei Teile unterteilt ist:
# 006699 an -> # 00,66,99
Nun, das sieht ein bisschen vertraut aus. Wenn Sie denken, was ich denke, haben Sie recht. Hexadezimal ist genauso organisiert wie RGB: Es hat einen Wert für jedes Rot, Grün und Blau. Der Hauptunterschied ist:
Wir werden nun prüfen, wie Sie einen Wert bis zu 255 erstellen können, da wir bisher nur gelernt haben, wie Sie Zahlen bis zu 15 erstellen können.
Binär: 0110 Bit-Werte: 128 64 32 16 Addieren Sie alle zutreffenden Werte: 0 + 64 + 32 + 0 Renditen: 96
Wir haben festgestellt, dass das erste Nibbeln auf der rechten Seite sechs ergibt. Und jetzt haben wir herausgefunden, dass das zweite Nibbeln auf der linken Seite 96 entspricht. Was machen Sie damit? Fügen Sie sie einfach hinzu! 96 + 6 = 102. Daher ist der Hexadezimalwert von 66 im normalen Dezimalsystem 102.
Dies bedeutet, dass im Hexadezimalwert das RGB-Äquivalent von 66 (in Hex) 102 ist. Dementsprechend ist # 666666 gleich rgb (102,102,102)..
Lassen Sie uns noch eine Hex-Dezimal-Konvertierung durchführen:
Hexadezimal: FF Binär: 1111 1111 Bitwerte: 128 64 32 16 8 4 2 1 Add: 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1 Ausbeuten: 255
255 ist der Maximalwert für jede Farbe. Wenn wir also #FFFFFF hätten, von dem wir alle wissen, dass es weiß ist, wäre es rgb (255,255,255), was auch weiß ist.
Zum Verständnis führen wir eine abschließende Konvertierung durch. Dieses Mal konvertieren wir eine gesamte Hexadezimalfarbe in RGB. Unsere Farbe ist # 6AB4FF.
6A ------ Binär: 0110 1010 Add: 64 + 32 + 8 + 2 96 + 10 Ausbeuten: 106 ------ B4 ------ Binär: 1011 0100 Add: 128 + 32 + 16 + 4 176 + 4 Renditen: 180 ------ FF ------ (Wir haben dies bereits getan, also wissen wir, dass es 255 ist)
Schlussfolgerung: # 6AB4FF entspricht rgb (106.180.255).
Nun fragen Sie sich vielleicht, wie wir von diesen Werten zu einer tatsächlichen Farbe gelangen, die wir uns in unserem Kopf vorstellen können. Der nächste Abschnitt wird dazu beitragen. Nun, da wir wissen, wie Hexadezimal und RGB zusammenhängen, und jetzt wissen, wie Hexadezimal tatsächlich funktioniert, werden wir nun prüfen, wie Sie in Ihrem eigenen Code eine Farbe schnell finden können, und Ihnen dabei helfen, diese zu erstellen Farbe, ohne jemals einen Farbwähler verwenden zu müssen.
Schneller Spaß Fakt: Da jeder Wert von Rot, Grün und Blau 8 Bit enthält, bedeutet dies, dass insgesamt 24 Bit in einer RGB-Farbe vorhanden sind (8 * 3 = 24). Hier kommt der Begriff 24-Bit-Farbe, oft als "True Color" bezeichnet..
Mit 24-Bit-Farben können wir bis zu 16.777.216 - über sechzehn Millionen - Farben erstellen. Dies ist normalerweise für jedes Projekt mehr als zufriedenstellend. 32-Bit-Farben haben jedoch zunehmend an Bedeutung gewonnen, jedoch nicht unbedingt im Bereich des Webdesigns. Weitere Informationen zur Farbtiefe bei Wikipedia.org finden Sie in diesem Artikel. Außerdem können Sie hier ein Bild aller ~ 16 Millionen Farben in einem Bild anzeigen (David Naylor Blog). Es ist wirklich faszinierend! Die Bildgröße von 4096x4096 ist sinnvoll, da 4096 die Quadratwurzel von 16.777.216 ist.
Damit dieses Wissen für uns von Nutzen sein kann, müssen Sie lernen, wie Sie Ihre eigenen Farben schnell und einfach erstellen können. Wir fangen so einfach wie möglich an und bewegen uns dann in schwierig zu artikulierenden Farben.
Nehmen wir an, wir wollen eine graue Farbe machen. Graustufen-Farben sind üblich und in vielen Fällen am nützlichsten. Bisher wissen wir Folgendes: # 000000 entspricht schwarz,
und #FFFFFF ist weiß. Daher werden die Graustufen-Farben üblicherweise Inkremente zwischen diesen beiden Werten sein. Um einen Grauton darzustellen, würden wir Werte zwischen Weiß und Schwarz festlegen.
Logischerweise ist ein Wert, der näher an #FFFFFF liegt, ein hellerer Grauton, und ein Wert, der näher an # 000000 liegt, wird dunkler. Lassen Sie uns vor diesem Hintergrund eine ziemlich hellgraue Farbe erstellen. Einige kurze Überlegungen geben uns die folgende Auflösung: #DDDDDD ist bequem genug weit weg von Weiß, sodass es für uns eindeutig ein helles Grau sein wird.
Wir wollen später ein dunkleres Grau machen. Wieder einfach. Tun Sie einfach etwas wie # 333333. Wie Sie sehen können, sind Grauwerte sehr einfach. Wenn Sie feststellen, dass Sie einen noch spezifischeren Grauton benötigen, sollten Sie dies als Faustregel beachten,
Wenn jeder Wert für Rot, Grün und Blau alle gleich ist oder fast gleich ist, wird er grau angezeigt. Ein Beispiel dafür ist die Farbe "Gainsboro" mit dem Farbcode #DCDCDC. Dies bedeutet, dass in jedem Wert von Rot, Grün und Blau nur eine Farbe weniger ist als in unserer #DDDDDD-Farbe. Sie werden wahrscheinlich nicht in der Lage sein, zwischen den beiden zu unterscheiden, aber das Inkrementieren oder Dekrementieren um 1 ergibt ein bisschen mehr "graue Präzision".
Der zweitkleinste Satz von Farben, den Sie erstellen können, ist (natürlich) Rot, Grün und Blau. Verwenden wir Rot als Beispiel. Wenn wir reines RGB-Rot erzeugen möchten, geben wir den Farbwert an
der Maximalwert von Rot, mit 0 Grün und 0 Blau. Das macht Sinn, richtig? Um in hexadezimaler Farbe rot zu machen, geben wir einfach # FF0000 ein. Jetzt haben wir rot.
Das Erstellen von Grün und Blau folgt demselben Prinzip. Um grün zu machen: # 00FF00 (alles grün, sonst nichts). Um rein blau zu machen: # 0000FF (alles blau, sonst nichts).
Einfach genug; Diese Farben sind jedoch in den meisten Fällen absolut abscheulich, wenn sie in einem Webdesign verwendet werden. Um diese Farben einsetzen zu können, müssen wir sie daher entsprechend schattieren.
Glücklicherweise ist auch das Shading einfach. Verwenden wir für dieses Beispiel Blau. Wir haben bereits # 0000FF für uns eingerichtet. Um den Farbton unseres blauen Werts zu ändern, müssen wir lediglich die letzten beiden Zeichen des hexadezimalen Farbcodes ändern. Da FF das höchstmögliche Blau ist, können wir es an diesem Punkt wirklich nur dunkler machen. Lass uns genau das tun:
Durch Ändern von # 0000FF in # 000055 (Verringern des Schwarzanteils, wodurch das Blau näher an Schwarz gebracht wird), erhält man ein dunkleres Blau.
Wie Sie sehen, ist die Schattierung von Rot, Grün und Blau alles andere als schwierig - es geht einfach darum, die Menge einer bestimmten Farbe zu verringern. Die gleiche Regel gilt für Rot und Grün, nicht nur für Schwarz. Daher ist # 005500 ein dunklerer Grünton und # 550000 ein dunklerer Rotton. (Natürlich können Sie niedriger oder höher als 55 gehen, wenn Sie möchten).
Ich denke, Sie denken wahrscheinlich: Was ist mit Gelb, Lila und all den anderen Farben? Zum Glück ist es etwas komplizierter als die großen drei von RGB. Beginnen wir mit gelb.
Um Gelb zu erzeugen, müssen wir zuerst in Bezug auf das Farbspektrum denken. Ein kleiner Gedanke, den die Leute gerne verwenden, ist "Roy G. Biv", der für "Rot, Orange, Gelb, Grün, Blau, Indigo, Violett" steht. Jetzt ist die Logik etwas verwirrend, aber versuchen Sie, bei mir zu bleiben. Um Gelb zu erhalten, verwenden wir die beiden Hauptfarben Rot, Grün und Blau auf beiden Seiten von Gelb. In diesem Fall wären es Rot und Grün. Wenn wir also # FFFF00 schreiben, hätten wir Gelb. Fantastisch!
Es gibt nur wenige andere mögliche Kombinationen mit dieser Methode, daher werden wir sie schnell durchgehen. Zwischen rot und blau in einem Farbkreis wäre der Code # FF00FF, und wir würden Pink oder Magenta erhalten, wie es traditionell heißt. Als Nächstes zwischen grün und blau (# 00FFFF) haben wir Cyan. Und jetzt sind das leider alle einfachen Kombinationen, die wir machen können. Der Rest erfordert einige Überlegungen, die wir gleich besprechen werden. Lassen Sie uns zunächst herausfinden, wie Sie diese Farben schattieren können.
Einfach genug, beginnen wir diesmal mit der Schattierung von Cyan, was, wie wir uns erinnern, # 00FFFF ist. Und… Sie haben es wahrscheinlich erraten, aber um Gelb, Cyan oder Pink zu schattieren, müssen Sie lediglich die FF-Werte auf einen kleineren Wert ändern. In diesem Beispiel können Sie Cyan bis zu einer viel dunkleren Variante abschattieren. Dies könnte beispielsweise mit # 005555 geschehen. Einer der offiziellen HTML-Farbnamen, DarkCyan, ist # 008B8B, so dass einer etwas heller wäre als der, den wir gerade erstellt haben. So haben wir es: wie man Gelb, Cyan und Rosa schattiert.
Um eine Farbe heller zu machen, ist es so einfach wie die niedrigen Werte (normalerweise die 00-Werte). größer und das FF (oder andere Hauptfarben) alleine lassen. Wenn wir zum Beispiel Grün hätten und es leichter machen wollten, würden wir mit # 00FF00 anfangen. Um es leichter zu machen, würden wir einfach die 00-Werte erhöhen. #AAFFAA erzeugt eine schöne Frühlingsfarbe Grün.
Um # FF00FF (Pink) leichter zu machen, ist es derselbe Vorgang. Erhöhen Sie die niedrigen Werte: #FFAAFF. Dies ergibt eine hellrosa Farbe. Klappt wunderbar!
Bislang haben wir gelernt, wie einfachste Farben erstellt werden können. In den meisten Anwendungen ist dieses Wissen jedoch für ein Projekt nicht hilfreich. Hier kommt dieser zweite Teil ins Spiel.
Um eine schön aussehende Farbe zu erzeugen, müssen wir das, was wir bereits wissen, ausarbeiten und darüber nachdenken, was wir auf logische Weise zu schaffen versuchen. Lassen Sie uns ein Szenario erstellen. Wir möchten eine dezente orange Farbe schaffen, die unseren Bedürfnissen entspricht - wie eine etwas dunkle orangefarbene Limonade.
Wir fangen mit dem an, was wir bereits wissen, und das ist gelb: # FFFF00. Wir müssen es etwas näher an den orangefarbenen Bereich heranbringen, um das zu tun, lindern wir etwas von dem grünen "Ziehen", wie ich es gerne nenne. Dadurch erhöht sich die Rotmenge. Ich entschied mich, es in # FF5500 zu ändern. Dieses schnelle und einfache Beispiel gibt Ihnen eine Vorstellung davon, wie Sie eine Farbe erstellen würden. Das letzte, was ich erwähnen möchte, ist, dass Sie sich vielleicht fragen, warum ich nicht angefangen habe, die blaue Menge zu erhöhen, die wir bei einem Wert von 00 belassen haben. Der Grund dafür ist, dass Sie langsam Blau in Schritten von 11, 22, 33 und so weiter, sieht es immer noch ziemlich orange aus. Sobald Sie jedoch 55 erreicht haben, werden Sie einige Probleme sehen. Vor allem, wenn wir es bis zu etwas wie # FF5599 erhöhen. Was passiert ist, dass es sich wirklich rosa färbt. Warum ist das? Denken wir zurück an die Zeit, als wir Pink kreiert haben. Der Code war # FF00FF. Das Rot ist maximal und das Blau ist maximal. Wenn Sie also in unserer orange Farbe # FF5500 in # FF5599 ändern, sind unsere roten und grünen Werte nicht mehr die herausragenden Werte. Stattdessen sind es Rot und Blau, die Rosa ergeben. Auf diese Weise würde der 55-Wert für Grün einfach unsere Rosatöne aufhellen, anstatt sie in Richtung des orangefarbenen Bereichs zu bewegen.
Hinweis für den Leser: Das Erstellen komplexer Farbcodes ist allerdings ziemlich unpraktisch. In der Zeit, in der Sie eine ausreichende Farbe erzeugen müssten, hätten Sie problemlos mehrere gute Farben aus einem Farbwähler herausholen können. Für eine komplexe Farbe ist es am besten, sie nicht selbst zu erstellen. Überlassen Sie es einfach dem Bewährten und sparen Sie wertvolle Zeit. Sie werden, Sie möchten jedoch Ihre Fähigkeiten nutzen, um eine einfache Aufgabe wie das Abdunkeln oder Aufhellen einer Farbe schnell zu erledigen.
Sie sehen also diesen schönen Farbcode, der Ihnen ins Gesicht starrt, aber Sie haben keine Ahnung, um welche Farbe es sich wirklich handelt. Großartig! Hier macht wahrscheinlich der größte Spaß. Der beste Weg, um Ihnen beizubringen, wie man das macht, ist ein einfacher Test. Ich habe einmal die folgenden Fragen zu einem Test in einem meiner Informatikkurse gestellt.
Hoffentlich konnten Sie all das herausfinden! Vor allem die ersten beiden. Sie hätten herausfinden können, dass die Antwort auf Nummer eins schwarz oder B war. Für die zweite Frage war die Antwort auch recht einfach. Nach dem Schema von Rot, Grün und Blau wissen wir, dass, da jeder Wert mit Ausnahme von Grün auf 00 eingestellt ist, die Farbe eine gewisse Grüntöne aufweist. Da der Wert für Grün FF (oder 255) ist, wissen wir außerdem, dass diese Farbe reines Grün ist. Die Antwort lautet also A.
Es scheint, als wäre die einzige Farbe, die hier schwer zu entschlüsseln ist, die Nummer drei, # FFCC66. Das ist verständlich. Da der Blauwert (der 66 ist) so viel kleiner als die beiden anderen Zahlen ist, könnte er als relativ irrelevant angesehen werden. Daher können Sie es mit der Farbe für Gelb, # FFFF00, vergleichen. Zwischen diesen beiden sehen sie etwas ähnlich aus. Mit dieser Methode können Sie die ersten drei Antworten herausgreifen, da sich keine von ihnen in der Nähe von Gelb befindet. Daher lautet die Antwort D. Der verringerte Grünwert von CC wird die Farbe etwas abschatten, und die Zunahme von Blau wird dazu führen, dass die Farbe dem Gold viel ähnlicher wird.
Das Dekodieren von Farbcodes umfasst in erster Linie das Nachdenken und Vergleichen mit bereits bekannten Farben!
Hier noch ein kurzer Tipp, wie Sie mit dem Hexadezimalsystem schneller eine Farbe erstellen können. Mit dieser Methode können Sie einige Farbcodes von sieben Zeichen auf vier reduzieren (z. B. # _ _ _ _ _ bis # _ _ _. Diese Methode wird als Farbkurzschrift bezeichnet. Die Idee dahinter ist, dass sie den Wert jedes der drei Hauptzeichen übernimmt und unsichtbar dupliziert. Was ich damit meine ist: Wenn Sie den Farbcode # 123 hätten, wäre dies das Äquivalent von # 112233. Sie können dies für jeden Farbcode tun, bei dem jeder Hexadezimalwert für Rot, Grün und Blau das gleiche Zeichen ist. Einige häufigere Abkürzungen sind:
Ich hoffe, dieser Artikel hat Ihnen geholfen zu erfahren, wie Farbcodes wirklich funktionieren. In vielen Programmen, wie z. B. Photoshop, ist es jedoch am einfachsten, die integrierten Farbwähler zu verwenden. Der Kernbereich, in dem sich diese Fertigkeit als nützlich erweisen wird, ist, wenn Sie durch einen CSS-Quellcode blättern und einfach herausfinden möchten, welche Art von Farbe es ist, ohne auf eine andere Ressource zurückgreifen zu müssen. Unabhängig davon, welche Methode schneller ist, als Webentwickler und Designer sollten wir dies wissen! Vielen Dank fürs Lesen. Dies ist ein verständlich schwieriges Thema, sprechen wir in den Kommentaren mehr darüber!
Accentsconagua