HTML-Farbschema. Farben in Stilen können auf unterschiedliche Weise angegeben werden: per Hexadezimalwert, per Name, im RGB-, RGBA-, HSL-, HSLA-Format. Standardisierte Farbnamen

Zur Angabe von Farben werden hexadezimale Zahlen verwendet. Das Hexadezimalsystem basiert im Gegensatz zum Dezimalsystem, wie der Name schon sagt, auf der Zahl 16. Die Zahlen lauten wie folgt: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Zahlen von 10 bis 15 werden durch lateinische Buchstaben ersetzt. Zahlen größer als 15 im Hexadezimalsystem werden durch die Kombination zweier Zahlen zu einer gebildet. Beispielsweise entspricht die Zahl 255 im Dezimalformat der Zahl FF im Hexadezimalformat. Um Verwirrung bei der Bestimmung des Zahlensystems zu vermeiden, wird der Hexadezimalzahl ein Rautenzeichen # vorangestellt, zum Beispiel #666999. Jede der drei Farben – Rot, Grün und Blau – kann Werte von 00 bis FF annehmen. Somit ist das Farbsymbol in drei Komponenten #rrggbb unterteilt, wobei die ersten beiden Symbole die rote Komponente der Farbe angeben, die mittleren beiden - Grün und die letzten beiden - Blau. Es ist erlaubt, die Kurzform #rgb zu verwenden, wobei jedes Zeichen verdoppelt werden sollte. Daher sollte der Eintrag #fe0 als #ffee00 betrachtet werden.

Namentlich

Browser unterstützen einige Farben anhand ihres Namens. In der Tabelle 1 zeigt die Namen, Hexadezimalcode, RGB, HSL-Werte und Beschreibung.

Verwendung von RGB

Sie können Farben mithilfe der Rot-, Grün- und Blauwerte in Dezimalzahlen definieren. Jede der drei Farbkomponenten nimmt einen Wert von 0 bis 255 an. Es ist auch zulässig, die Farbe als Prozentsatz anzugeben, wobei 100 % der Zahl 255 entspricht. Geben Sie zunächst das Schlüsselwort rgb an und geben Sie dann die Farbkomponenten in Klammern an , durch Kommas getrennt, zum Beispiel rgb(255 , 128, 128) oder rgb(100 %, 50 %, 50 %).

RGBA

Das RGBA-Format ähnelt in der Syntax RGB, enthält jedoch einen Alphakanal, der die Transparenz des Elements angibt. Ein Wert von 0 ist vollständig transparent, 1 ist undurchsichtig und ein Zwischenwert wie 0,5 ist halbtransparent.

RGBA wurde zu CSS3 hinzugefügt, daher muss der CSS-Code anhand dieser Version validiert werden. Es ist zu beachten, dass sich der CSS3-Standard noch in der Entwicklung befindet und sich einige Funktionen ändern können. Beispielsweise wird eine zur Eigenschaft „Hintergrundfarbe“ hinzugefügte Farbe im RGB-Format validiert, eine zur Eigenschaft „Hintergrund“ hinzugefügte Farbe ist jedoch nicht mehr gültig. Gleichzeitig verstehen Browser die Farbe für beide Eigenschaften ganz richtig.

HSL

Der Name des HSL-Formats leitet sich aus der Kombination der Anfangsbuchstaben Hue (Farbton), Saturate (Sättigung) und Lightness (Helligkeit) ab. Der Farbton ist der Farbwert im Farbkreis (Abb. 1) und wird in Grad angegeben. 0° entspricht Rot, 120° Grün und 240° Blau. Der Farbtonwert kann zwischen 0 und 359 variieren.

Reis. 1. Farbrad

Die Sättigung ist die Intensität einer Farbe und wird als Prozentsatz von 0 % bis 100 % gemessen. Ein Wert von 0 % bedeutet keine Farbe und einen Grauton, 100 % ist der Maximalwert für die Sättigung.

Die Helligkeit gibt an, wie hell die Farbe ist und wird als Prozentsatz von 0 % bis 100 % angegeben. Niedrige Werte machen die Farbe dunkler und hohe Werte machen die Farbe heller; Extremwerte von 0 % und 100 % entsprechen Schwarz und Weiß.

HSLA

Das HSLA-Format ähnelt in der Syntax HSL, enthält jedoch einen Alphakanal, um die Transparenz des Elements festzulegen. Ein Wert von 0 ist vollständig transparent, 1 ist undurchsichtig und ein Zwischenwert wie 0,5 ist halbtransparent.

RGBA-, HSL- und HSLA-Farbwerte werden zu CSS3 hinzugefügt. Überprüfen Sie daher bitte Ihren Code auf Versionsgültigkeit, wenn Sie diese Formate verwenden.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Warnung

Alle auf der Website aufgeführten Methoden zum Fangen von Löwen sind theoretisch und basieren auf rechnerischen Methoden. Die Autoren übernehmen keine Garantie für Ihre Sicherheit bei der Verwendung und lehnen jegliche Verantwortung für die Ergebnisse ab. Denken Sie daran, ein Löwe ist ein Raubtier und ein gefährliches Tier!

Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 2.

Reis. 2. Farben auf der Webseite

HTML-Farben werden durch sechs Zeichen nach dem Schrägstrich angezeigt, zum Beispiel #000000. Diese sechs Symbole stellen die Anteile der verschiedenen Farben (Rot, Grün, Blau) in der endgültigen Farbe dar. Auf Ihrem Computermonitor besteht das Bild aus einer großen Anzahl von Punkten, sogenannten Pixeln. Jedes Pixel ist eine kleine Lichtquelle, nennen wir es eine „Taschenlampe“, die wiederum aus drei Taschenlampen besteht – Rot, Grün und Blau. Indem wir die Intensität des Leuchtens einzelner farbiger Taschenlampen verringern oder erhöhen, erhalten wir die gewünschte Farbe.

HTML-Farbcodes

Farben in HTML werden durch eine hexadezimale (HEX) Notation von Rot, Blau und Grün (RGB) dargestellt.

Der kleinste Farbwert ist 0 (hexadezimal 00). Der höchste Farbwert ist 255 (hex FF).

Der hexadezimale Farbwert besteht aus drei Ziffern, beginnend mit dem #-Zeichen.

Farbcodes (Bedeutungen)

16 Millionen Farbtöne

Durch die Kombination von Rot, Blau und Grün mit Werten zwischen 0 und 255 für den Prozentsatz jeder Farbe ergeben sich insgesamt über 16 Millionen Farbtöne (256 x 256 x 256).

Die meisten modernen Monitore sind in der Lage, mindestens 16.384 verschiedene Farbtöne darzustellen (LCD-Monitore können im Allgemeinen 262.16 Millionen darstellen). (aktualisiert Oktober 2013) Farben und CRT-Monitore können eine praktisch unbegrenzte Anzahl von Farben darstellen).

Die folgende Farbtabelle zeigt die Veränderung des Rotanteils von 0 auf 255 mit Nullwerten für Blau und Grün:

Grautöne

Um Grautöne zu erhalten, werden gleiche Anteile aller Farben verwendet. Um Ihnen die Wahl des richtigen Farbtons zu erleichtern, stellen wir Ihnen Grauton-Codes zur Verfügung

Browserübergreifende (alle Browser) HTML-Farbnamen

Eine Sammlung von 150 Farbnamen in HTML, die in allen Browsern unterstützt wird.

Standardisierte Farbnamen

Das W3C listet 16 gültige Farbnamen für HTML und CSS auf: Aqua, Schwarz, Blau, Fuchsia, Grau, Grün, Limette, Maroon (Kastanie), Marine (Ultramarin), Olive (Oliv), Lila (Lila), Rot (Rot). , Silber (Silber), Blaugrün (Grau), Weiß (Weiß) und Gelb (Gelb).

Bei Verwendung von Farben, die nicht in dieser Liste enthalten sind, ist es korrekter, deren Hexadezimalcode (HEX) oder RGB-Code zu verwenden.

Sichere Farben

Vor einigen Jahren, als Computer maximal 256 verschiedene Farben unterstützen konnten, wurde eine Liste mit 216 „Web-sicheren Farben“ vorgeschlagen, wobei 40 Farben für das System reserviert waren.

Diese 216-Farben-Palette wurde erstellt, um Farben im 256-Farben-Palettenmodus korrekt anzuzeigen.

Das spielt keine Rolle, da die meisten Computer auf der Welt Millionen von Farbtönen unterstützen. Auf jeden Fall finden Sie hier eine Liste dieser Farben:

Es gibt verschiedene Möglichkeiten, Farben im Webdesign darzustellen.

HEX ist ein hexadezimales Farbdarstellungssystem, das auf der Basis 16 basiert. Für dieses System werden arabische Dezimalziffern von 0 bis 9 und lateinische Buchstaben von A bis F verwendet, um die digitale Zahl zu 16 zu ergänzen. Für Webdesign 16 Primärfarben (Schlüsselfarben). Verwendet wird der sogenannte hexadezimale Farbcode #RRGGBB, wobei jedes Paar für seinen Anteil an der Farbe verantwortlich ist: RR – Rot, GG – Grün und BB – Blau. Jeder Farbanteil reicht von 00 bis FF.

Zwei weitere Darstellungen von Farben im Webdesign sind: in Form von RGB(*,*,*), wobei jeder „*“-Bruch einer Farbe durch Dezimalstellen von 0 bis 255 und durch Farbnamen auf Englisch dargestellt wird.

Bei der Erstellung eines Farbbildes besteht das Hauptproblem in der korrekten Wiedergabe der Farben auf verschiedenen Computertypen, Monitoren und Browsern. Wenn der Browser eine Farbe nicht richtig darstellen kann, wählt er eine ähnliche aus oder mischt mehrere Farben. Und manchmal kann es durch eine völlig andere Farbe ersetzt werden.

Tisch 16 Primärfarben, die in allen Browsern verwendet werden

Tisch lila Farben und ihre Schattierungen

Tisch grau Farben und ihre Schattierungen

Das CSS-Farbmodul enthält detaillierte Werte, mit denen Autoren die Farben und die Deckkraft von HTML-Elementen sowie die Werte der Farbeigenschaft definieren können.

Farbeigenschaft

1. Prioritätsfarben: Farbeigenschaft

Die Eigenschaft gibt die Schriftfarbe unter Verwendung verschiedener Farbwiedergabesysteme an. Die Eigenschaft beschreibt die Farbe des Textinhalts des Elements. Darüber hinaus wird es verwendet, um einen potenziellen indirekten Wert (currentColor) für alle anderen Eigenschaften bereitzustellen, die Farbwerte akzeptieren.

Die Immobilie wird vererbt.

2. Farbwerte

2.1. Hauptschlüsselwörter

Die Liste der Hauptschlüsselwörter umfasst folgende Bedeutungen:

Bei Farbnamen wird die Groß-/Kleinschreibung nicht beachtet.

Syntax

Farbe: blaugrün;

2.2. Numerische Farbwerte

2.2.1. RGB-Modellfarben

Das Hexadezimalformat eines RGB-Werts ist ein #-Zeichen, direkt gefolgt von drei oder sechs Hexadezimalzeichen. Die dreistellige RGB-Notation #rgb wird in die sechsstellige Form #rrggbb umgewandelt, indem die Ziffern kopiert und keine Nullen hinzugefügt werden. Beispielsweise wird #fb0 zu #ffbb00 erweitert. Dadurch wird sichergestellt, dass weißes #ffffff im kurzen #fff-Eintrag angegeben werden kann und alle Abhängigkeiten von der Farbtiefe der Anzeige beseitigt werden.

Das Format eines RGB-Werts in funktionaler Notation ist rgb (gefolgt von einer durch Kommas getrennten Liste von drei numerischen Werten (entweder drei ganzzahligen Werten oder drei Prozentwerten), gefolgt von einem Symbol). Der ganzzahlige Wert 255 entspricht 100 % und F oder FF in hexadezimaler Schreibweise:

RGB(255.255.255) = RGB(100 %, 100 %, 100 %) = #FFF

Um numerische Werte herum sind Leerzeichen zulässig.