Farbcodes: Was ist der Unterschied zwischen Hex, RGB und HSL?

Coduri de culoare: Care este diferența dintre Hex, RGB și HSL?
⏱️ 6 min read

Wenn es darum geht, Farbe auf den Bildschirm zu spritzen, gibt es verschiedene Möglichkeiten, dies mit der Codierung zu tun. Hex, RGBA und HSLA sind drei der am häufigsten verwendeten Farbcodesysteme.

Wahrscheinlich sind Sie in der Vergangenheit auf Hex-Codes und RGB gestoßen, aber HSL war zwar noch besser lesbar, aber möglicherweise noch nicht auf Ihrem Radar. Jede Art, Farben aufzuschreiben, ist in verschiedenen Situationen sinnvoll, und Sie benötigen lediglich ein grundlegendes Verständnis für jeden Typ, um eine fundierte Entscheidung zu treffen. Hier erklären wir die Unterschiede zwischen RGB, HEX und HSL.

Was ist RGB (Rot, Grün, Blau)

Es ist sinnvoll, mit RGB-Werten zu beginnen, da rot, Grün, und Blau sind die drei Farben, mit denen Bildschirme so ziemlich jede andere Farbe erzeugen können. Dies geschieht mithilfe der „additiven Farbmischung“, aber Sie müssen sich nicht mit der Wissenschaft befassen, um RGB zu verstehen.

Farbmodelle Rgba

rgb(255, 0, 0) ist rot, da das R maximal ist. Wenn Sie entweder G oder B auf 255 einstellen, erhalten Sie volles Grün oder volles Blau. Wenn Sie sie alle auf 255 gleichzeitig einstellen, erhalten Sie Weiß (die Summe aller Farben), während das Nullsetzen Schwarz ergibt. Wenn Sie einen vierten Wert hinzufügen (den Alphakanal zwischen 0 und 1), erhalten Sie auch Transparenz: rgba(0, 0, 0, .5) übersetzt in ein halbtransparentes Schwarz.

Es ist einfach, ja, aber nicht so intuitiv. Die RGB-Balance kann sich erheblich ändern, selbst wenn Sie nur den Farbton ändern, was es für Menschen sehr schwierig macht, manuelle Anpassungen ohne eine Art RGB-Generator vorzunehmen (von denen es glücklicherweise viele gibt).

Was sind hexadezimale Farbcodes?

Farbmodelle Transparent Hex

Hexes sind nur eine andere Art, RGB-Werte zu schreiben. Etwas wie #6a79f7 (Kornblumenblau) Karten direkt zu rgb(106, 121, 247). 6a ist die rot79 ist die Grünund f7 ist das Blau.

Zunächst sollten Sie wissen, dass im Hex-Farbsystem die Buchstaben „af“ die Zahlen zehn bis fünfzehn darstellen. Zweitens ist es hexadezimalDas heißt, alles ist in Basis 16. 21 ist 2 * 10 + 1 in Basis 10, aber hexadezimal wäre es 2 * 16 + 1. Multiplizieren Sie einfach die erste Zahl mit 16 und addieren Sie die zweite Zahl – so einfach ist das! 6a = 6 * 16 + 10 oder 106. 79 = 7 * 16 + 9 oder 121.

Farbmodelle Hex-Diagramm

Während die Mathematik Spaß macht, macht sie Hexadezimalcodes für Menschen offensichtlich noch schmerzhafter als RGB, obwohl sie einfach zu kopieren und einzufügen sind und unvergessliche Buchstaben- / Zahlenkombinationen aufweisen können.

Sie können Hex-Codes auch transparenter machen, indem Sie am Anfang einen Wert eingeben, der einem Prozentsatz von 255 entspricht: #806a79f7. 80 in hexadezimal = 126, was nahezu 50% des Maximalwerts von 255 entspricht.

Was ist HSL (Farbton, Sättigung, Leichtigkeit)

Farbmodelle Hsl

HSL wurde so gut wie für die menschliche Lesbarkeit entwickelt und erfreut sich zunehmender Beliebtheit, insbesondere als RGB-Alternative. Es funktioniert so:

Farbton bedeutet Farbe und verwendet die Grade des Farbrads, um Ihnen zu sagen, auf welcher Farbe Sie sich befinden. Wenn Sie das Farbrad und die Positionen dieser Hauptfarben kennen, sollten Sie in der Lage sein zu erkennen, dass 45 orange und 270 lila aussehen, wenn Sie nur eine Sekunde darüber nachdenken.

RGB Farbrad
  • 0 = rot
  • 60 = gelb
  • 120 = grün
  • 180 = Cyan
  • 240 = blau
  • 300 = Magenta

Sättigung ist im Wesentlichen, wie bunt die Farbe ist. 0% Sättigung bedeutet, dass die Farbe nur ein Grauton ist, während 100% bedeutet, dass sie die volle Stärke zeigt. Wenn Sie Ihre Farbe stummschalten oder etwas mehr zum Platzen bringen möchten, können Sie diesen Wert einfach ändern.

Leichtigkeit zeigt an, wie dunkel oder hell die Farbe ist. 0% Helligkeit bedeutet, dass Ihre Farbe unabhängig von den Einstellungen für Farbton oder Sättigung schwarz ist und 100% Helligkeit weiß. Wie Sie vielleicht erraten haben, erhalten Sie mit 50% die genaueste Farbe.

Farbmodelle Hsla

Mit diesen Informationen sollten Sie sofort erkennen können, was hsl(0, 100%, 50%) meint. Es ist nur rot! Willst du ein dunkleres, satteres Rot? Versuchen 0, 70%, 40%. Vielleicht willst du das, aber in blau? Ändern Sie einfach 0 auf 240 und Sie haben es! Es hat auch Transparenz – es funktioniert genau wie RGB: Fügen Sie einfach einen vierten Wert (zwischen 0 und 1) hinzu, wie folgt: hsla(240, 70%, 40%, .5).

HSV / HSB und HSI

Farbmodelle Hsv

Was? Weitere Farbmodelle? Wann endet es? Für die meisten Menschen, die auf Computern mit Farben arbeiten, ist es bereits vorbei. Hex, RGB und HSL sind bei weitem die gebräuchlichsten Methoden, um Farben zu notieren. Wenn Sie sich jedoch in einem Bereich mit vielen Bildern und Farben befinden, z. B. Grafikdesign oder maschinelles Lernen von Bildern, können Sie Personen begegnen, die eines dieser esoterischeren Farbmodelle oder sogar eines der anderen hier nicht aufgeführten verwenden.

HSB steht für „Hue Saturation Brightness“ und HSVs für Hue Saturation Value. Sie sind eigentlich nur verschiedene Namen für dasselbe Modell, und ihr größter Unterschied zu HSL besteht darin, wie sie die Sättigung definieren. HSI (Hue Saturation Intensity) unterscheidet sich geringfügig von HSB / HSV, ist jedoch nicht weit verbreitet. Daher werden Sie es wahrscheinlich nicht sehr häufig in freier Wildbahn sehen.

Welches Farbmodell soll ich verwenden?

Im Allgemeinen ist die Auswahl eines Farbmodells eine eher geringfügige Designentscheidung, aber mit vielen kleinen Entscheidungen werden gute Dinge getroffen. Im Allgemeinen erleichtern Hex-Codes das Einfügen von Kopien und eignen sich hervorragend für Situationen, in denen Menschen wahrscheinlich nicht sehr involviert sind. RGB / RGBA ist für die Lesbarkeit angemessen und wird am besten verwendet, wenn es schön wäre, wenn ein Mensch manchmal die Transparenz optimieren könnte. Wenn ein Mensch die Farbe manuell ändern muss, wählen Sie HSL / HSLA. Davon abgesehen ist es so ziemlich eine Frage der Präferenz, obwohl die Leute im Team HSL dazu neigen, schlauer und besser auszusehen.

Bildnachweis: HSL Farbe Vollzylindersättigung Grau, Additive Farbe, XTerm-Farbkarte, HSL und HSV, Munsell 1943

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Das könnte dich auch interessieren …

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x