Für HTML-Seiten Farben werden hauptsächlich hexadezimal angegeben. Hierzu werden zwei Arten der Codeaufzeichnung verwendet – vollständig oder abgekürzt. Um die HTML-Farbe vollständig korrekt anzuzeigen, müssen Sie nach dem Rautezeichen sechs Zeichen (Zahlen und/oder englische Buchstaben) schreiben. Schwarz wird beispielsweise so geschrieben: #000000. Kurzform der Anleitung HTML-Farben besteht aus einer Raute und drei Zahlen und/oder Buchstaben dahinter. Dabei dieser Typ Reserven können nur verwendet werden, wenn der vollständige Eintrag einer bestimmten Farbe aus identischen Symbolen nach dem Rautezeichen besteht. Dieselbe schwarze Farbe kann beispielsweise so geschrieben werden: #000. angeben HTML-Farben Sie können sowohl große als auch kleine Zeichen verwenden, da die Groß- und Kleinschreibung nicht beachtet wird.

Jedes nach „#“ geschriebene Zeichen entspricht einem bestimmten Anteil der Farben Rot, Grün und Blau. Alle Monitore bestehen wiederum aus einer riesigen Anzahl von Pixeln (mikroskopisch kleinen Punkten), die jeweils drei sogenannte „Taschenlampen“ (Lichtquellen) enthalten: Rot, Grün und Blau. Durch Anpassen der Intensität des von diesen „Taschenlampen“ ausgestrahlten Lichts zeigt der Monitor dann die von uns benötigte Farbe an.

Durch die Kombination der Emissionsintensität von rotem, blauem und grünem Licht (von 0 bis 256) können Monitore 16.000.000 verschiedene Farbtöne darstellen.

Außerdem können Farben für Websites verbal oder im RGB-Code angegeben werden.

Heute können 147 Farben verbal geschrieben werden. Es ist wichtig zu wissen, dass einige unterschiedliche Namen die gleichen Farben bedeuten können, zum Beispiel sind „Grau“ und „Grau“ die Farbe Grau (#808080).

Sichere Farben für Websites.

Nicht jeder Monitor und Browser kann alle 16 Millionen HTML-Farben korrekt darstellen.

Sollten Sie beispielsweise auf eine Farbe stoßen, die der Browser nicht korrekt darstellen kann, dann:

1. Der Browser ersetzt es durch dasjenige, das ihm am ähnlichsten ist und erfolgreich reproduziert werden kann;
2. Zur korrekten Darstellung kann der Browser mehrere Farben mischen und das Ergebnis reproduzieren.

Um sicherzustellen, dass die Ausgabe in jedem Browser und auf jedem Monitor die Farbe hat, die Sie im Code angegeben haben, wird empfohlen, „Sichere Farben“ zu verwenden. Sie wurden nicht manuell oder durch den Wunsch eines anderen bestimmt, sondern mathematisch. Dies sind 100 % sichere Farben für HTML-Dokumente es sind 216. Und obwohl die heutige Technologie so weit ist, dass moderne Monitore und Browser Millionen von Farbtönen erkennen, empfehlen wir die Verwendung dieser sicheren Farben, um eine Farbwiedergabe zu gewährleisten.

Diese Tabelle enthält 216 sichere HTML-Farbcodes. Jede Farbe hat einen RGB-Wert, um die Farbe zu definieren Grafikeditoren und HEX, um die Farbe auf HTML-Seiten festzulegen.

Farbcodes in CSS werden zur Angabe von Farben verwendet. Typischerweise werden Farbcodes oder Farbwerte verwendet, um die Farbe entweder für die Vordergrundfarbe eines Elements (z. B. Textfarbe, Linkfarbe) oder die Hintergrundfarbe eines Elements (Hintergrundfarbe, Blockfarbe) festzulegen. Sie können auch verwendet werden, um die Farbe einer Schaltfläche, eines Rahmens, einer Markierung, eines Hovers und anderer dekorativer Effekte zu ändern.

Sie können Ihre Farbwerte in verschiedenen Formaten angeben. IN Folgende Tabelle Alle möglichen Formate werden aufgelistet:

Nachfolgend werden die aufgeführten Formate näher beschrieben.

CSS-Farben – Hex-Codes

Hexadezimaler Farbcode ist eine sechsstellige Darstellung der Farbe. Die ersten beiden Ziffern (RR) stehen für den Rotwert, die nächsten beiden für den Grünwert (GG) und die letzten beiden für den Blauwert (BB).

CSS-Farben – Kurze Hex-Codes

Kurzer Sechskant-Farbcode ist eine kürzere Form der Sechs-Zeichen-Notation. In diesem Format wird jede Ziffer wiederholt, um einen entsprechenden sechsstelligen Farbwert zu erzeugen. Beispiel: #0F0 wird zu #00FF00.

Der Hexadezimalwert kann aus jeder Grafik übernommen werden Software, wie zum Beispiel Adobe Photoshop, Kernzug ​​usw.

Jedem hexadezimalen Farbcode in CSS wird ein Rautezeichen „#“ vorangestellt. Nachfolgend finden Sie Beispiele für die Verwendung hexadezimaler Notationen.

CSS-Farben – RGB-Werte

RGB-Wert ist ein Farbcode, der mithilfe der Eigenschaft rgb() festgelegt wird. Diese Eigenschaft nimmt drei Werte an: jeweils einen für Rot, Grün und Blau. Der Wert kann eine Ganzzahl von 0 bis 255 oder ein Prozentsatz sein.

Notiz: Nicht alle Browser unterstützen die Farbeigenschaft rgb(), daher wird ihre Verwendung nicht empfohlen.

Unten sehen Sie ein Beispiel, das mehrere Farben mit RGB-Werten zeigt.

Farbcodegenerator

Mit unserem Service können Sie Millionen von Farbcodes erstellen.

Browsersichere Farben

Nachfolgend finden Sie eine Tabelle mit 216 Farben, die am sichersten und computerunabhängigsten sind. Diese Farben in CSS reichen von 000000 bis FFFFFF Hexadezimalcode. Sie sind sicher in der Anwendung, da sie sicherstellen, dass alle Computer beim Arbeiten mit der 256-Farben-Palette die Farben korrekt anzeigen.

HEX/HTML

HEX-Farbe ist nichts anderes als eine hexadezimale Darstellung von RGB.

Farben werden als drei Gruppen von Hexadezimalziffern dargestellt, wobei jede Gruppe für ihre eigene Farbe verantwortlich ist: #112233, wobei 11 Rot, 22 Grün und 33 Blau ist. Alle Werte müssen zwischen 00 und FF liegen.

Viele Anwendungen erlauben eine verkürzte Form der hexadezimalen Farbschreibweise. Wenn jede der drei Gruppen die gleichen Zeichen enthält, zum Beispiel #112233, dann können sie als #123 geschrieben werden.

1. h1 ( Farbe: #ff0000; ) /* rot */
2. h2 ( Farbe: #00ff00; ) /* grün */
3. h3 ( Farbe: #0000ff; ) /* blau */
4. h4 ( Farbe: #00f; ) /* dasselbe Blau, Kurzschrift */

RGB

Der RGB-Farbraum (Rot, Grün, Blau) besteht aus allen möglichen Farben, die durch die Mischung von Rot, Grün und Blau erzeugt werden können. Dieses Modell ist in der Fotografie, im Fernsehen und in der Computergrafik beliebt.

RGB-Werte werden als Ganzzahl von 0 bis 255 angegeben. Beispielsweise wird rgb(0,0,255) als blau angezeigt, da der blaue Parameter auf seinen höchsten Wert (255) und die anderen auf 0 gesetzt sind.

Einige Anwendungen (insbesondere Webbrowser) unterstützen die prozentuale Aufzeichnung von RGB-Werten (von 0 % bis 100 %).

1. h1 ( Farbe: rgb(255, 0, 0); ) /* rot */
2. h2 ( Farbe: rgb(0, 255, 0); ) /* grün */
3. h3 ( Farbe: rgb(0, 0, 255); ) /* blau */
4. h4 ( Farbe: rgb(0%, 0%, 100%); ) /* gleiches Blau, Prozenteingabe */

RGB-Farbwerte werden in allen gängigen Browsern unterstützt.

RGBA

In letzter Zeit haben moderne Browser gelernt, mit dem RGBA-Farbmodell zu arbeiten – einer Erweiterung von RGB mit Unterstützung für einen Alphakanal, der die Deckkraft eines Objekts bestimmt.

Der RGBA-Farbwert wird angegeben als: rgba(rot, grün, blau, alpha). Der Alpha-Parameter ist eine Zahl im Bereich von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig).

1. h1 ( Farbe: rgb(0, 0, 255); ) /* Blau in regulärem RGB */
2. h2 ( color: rgba(0, 0, 255, 1); ) /* das gleiche Blau in RGBA, weil Deckkraft: 100 % */
3. h3 ( Farbe: rgba(0, 0, 255, 0.5); ) /* Deckkraft: 50 % */
4. h4 ( Farbe: rgba(0, 0, 255, .155); ) /* Deckkraft: 15,5 % */
5. h5 ( Farbe: rgba(0, 0, 255, 0); ) /* völlig transparent */

RGBA wird in IE9+, Firefox 3+, Chrome, Safari und Opera 10+ unterstützt.

HSL

Das HSL-Farbmodell ist eine Darstellung des RGB-Modells in einem Zylinderkoordinatensystem. HSL stellt Farben intuitiver und besser lesbar dar als typisches RGB. Das Modell wird häufig in verwendet Grafikanwendungen, in Farbpaletten und zur Bildanalyse.

HSL steht für Hue (Farbe/Farbton), Saturation (Sättigung), Lightness/Luminance (Helligkeit/Helligkeit/Leuchtkraft, nicht zu verwechseln mit Helligkeit).

Farbton gibt die Position der Farbe im Farbkreis an (von 0 bis 360). Sättigung ist der prozentuale Wert der Sättigung (von 0 % bis 100 %). Helligkeit ist ein Prozentsatz der Helligkeit (von 0 % bis 100 %).

1. h1 ( Farbe: hsl(120, 100 %, 50 %); ) /* grün */
2. h2 ( Farbe: hsl(120, 100 %, 75 %); ) /* hellgrün */
3. h3 ( Farbe: hsl(120, 100 %, 25 %); ) /* dunkelgrün */
4. h4 ( Farbe: hsl(120, 60 %, 70 %); ) /* pastellgrün */

HSL wird in IE9+, Firefox, Chrome, Safari und Opera 10+ unterstützt.

HSLA

Ähnlich wie RGB/RGBA verfügt HSL über einen HSLA-Modus, der einen Alphakanal unterstützt, um die Deckkraft eines Objekts anzuzeigen.

Der HSLA-Farbwert wird angegeben als: hsla(Farbton, Sättigung, Helligkeit, Alpha). Der Alpha-Parameter ist eine Zahl im Bereich von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig).

1. h1 ( Farbe: hsl(120, 100 %, 50 %); ) /* grün in normalem HSL */
2. h2 ( color: hsla(120, 100%, 50%, 1); ) /* das gleiche Grün in HSLA, weil Deckkraft: 100 % */
3. h3 ( Farbe: hsla(120, 100 %, 50 %, 0,5); ) /* Deckkraft: 50 % */
4. h4 ( Farbe: hsla(120, 100 %, 50 %, .155); ) /* Deckkraft: 15,5 % */
5. h5 ( Farbe: hsla(120, 100%, 50%, 0); ) /* völlig transparent */

CMYK

Das CMYK-Farbmodell wird häufig mit Farbdruck und -druck in Verbindung gebracht. CMYK ist (im Gegensatz zu RGB) ein subtraktives Modell, was bedeutet, dass höhere Werte mit dunkleren Farben verbunden sind.

Farben werden durch das Verhältnis von Cyan (Cyan), Magenta (Magenta), Gelb (Yellow) mit dem Zusatz von Schwarz (Key/BlacK) bestimmt.

Jede der Zahlen, die eine Farbe in CMYK definieren, stellt den Prozentsatz der Tinte einer bestimmten Farbe dar, aus der die Farbkombination besteht, oder genauer gesagt, die Größe des Rasterpunkts, der auf einem Fotosatzgerät auf einem Film einer bestimmten Farbe (oder direkt) angezeigt wird An gedrucktes Formular im Fall von CTP).

Um beispielsweise die Farbe PANTONE 7526 zu erhalten, würden Sie 9 Teile Cyan, 83 Teile Magenta, 100 Teile Gelb und 46 Teile Schwarz mischen. Dies kann wie folgt bezeichnet werden: (9,83,100,46). Manchmal werden die folgenden Bezeichnungen verwendet: C9M83Y100K46, oder (9 %, 83 %, 100 %, 46 %), oder (0,09/0,83/1,0/0,46).

HSB/HSV

HSB (auch als HSV bekannt) ähnelt HSL, es handelt sich jedoch um zwei unterschiedliche Farbmodelle. Sie basieren beide auf einer zylindrischen Geometrie, HSB/HSV basiert jedoch auf dem „Hexcone“-Modell, während HSL auf dem „Bi-Hexcone“-Modell basiert. Künstler bevorzugen häufig die Verwendung dieses Modells. Es ist allgemein anerkannt, dass das HSB/HSV-Gerät der natürlichen Farbwahrnehmung näher kommt. Insbesondere das HSB-Farbmodell wird in Adobe Photoshop verwendet.

HSB/HSV steht für Hue (Farbe/Farbton), Saturation (Sättigung), Brightness/Value (Helligkeit/Wert).

Farbton gibt die Position der Farbe im Farbkreis an (von 0 bis 360). Sättigung ist der prozentuale Wert der Sättigung (von 0 % bis 100 %). Helligkeit ist ein Prozentsatz der Helligkeit (von 0 % bis 100 %).

XYZ

Das XYZ-Farbmodell (CIE 1931 XYZ) ist ein rein mathematischer Raum. Im Gegensatz zu RGB, CMYK und anderen Modellen sind bei XYZ die Hauptkomponenten „imaginär“, was bedeutet, dass Sie X, Y und Z keinem zu mischenden Farbsatz zuordnen können. XYZ ist das Vorbild für fast alle anderen Farbmodelle, die in technischen Bereichen verwendet werden.

LABOR

Das LAB-Farbmodell (CIELAB, „CIE 1976 L*a*b*“) wird aus dem CIE-XYZ-Raum berechnet. Das Designziel von Lab bestand darin, einen Farbraum zu schaffen, in dem Farbänderungen im Hinblick auf die menschliche Wahrnehmung (im Vergleich zu XYZ) linearer wären, d erzeugen das gleiche Gefühl der Farbveränderung.

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 % Maximalwert 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 sie heller; extreme Werte 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!

Ergebnis dieses Beispiel in Abb. dargestellt. 2.

Reis. 2. Farben auf der Webseite

Die Farbe kann in CSS eingestellt werden verschiedene Wege:

• namentlich,
• durch Hexadezimalwert,
• im RGB- und RGBA-Format,
• im HSL- und HSLA-Format.

Farbe nach Namen festlegen

Browser unterstützen die Angabe einiger Farben für Elemente nach Namen. Diese Tabelle enthält einige Schlüsselwörter (englische Farbnamen), die zur Angabe von Farbeigenschaften, RGB-Code, Hexadezimalcode (HEX) und HSL-Code verwendet werden.

Dies ist ein Beispiel für die Verwendung von Farbnamen, die Farbnamen werden aus der erweiterten Tabelle übernommen.

So funktioniert dieser Code:

Farbe mit RGB einstellen

RGB ist ein additives Farbmodell. An Englische Sprache Zusatz- Ergänzung. RGB ist eine Abkürzung der englischen Wörter: Red, Green, Blue – rot, grün, blau). Daraus wird deutlich, dass im RGB-Modell Farben durch Addition dreier Farben (Rot, Grün, Blau) in unterschiedlichen Mengen synthetisiert werden.

Durch das Mischen der Farben Rot, Grün und Blau können mehrere Millionen Farbtöne erzielt werden. Alle möglichen Kombinationen werden im Computerspeicher gespeichert.

Komm zum Punkt.

Um Eigenschaften in diesem Format festzulegen, verwenden Sie die Notation rgb(r, g, b) , wobei r, g, b die drei Kanäle für jede Farbe (Rot, Grün, Blau) sind. Die Werte für jeden Kanal liegen im Bereich von 0 bis 255.

Beispielcode.

Zur Verdeutlichung hier ein Codebeispiel:

So sollte dieses Beispiel funktionieren:

Erklärungen zum Beispiel.

Am Anfang der Seite erstellen wir die Klasse div.rgb, sie wird für Blöcke benötigt, die durch das Tag erstellt werden

wurden in der erforderlichen Größe angezeigt: 240 x 40 Pixel. Wir weisen der Eigenschaft line-height einen Wert von 40 Pixel zu, d. h. gleich der Höhe des Blocks. Dadurch können Sie Text im Block anzeigen

in der vertikalen Mitte. Wir zentrieren den Text horizontal mit der Regel ( Textausrichtung: Mitte ;).

Als nächstes legen wir den Code fest Hintergrundfarbe Block

Verwenden des Stilattributs, Verwenden der Hintergrundeigenschaft und Zuweisen von Werten zu rgb(255, 0, 0) , rgb(0, 255, 0) und rgb(0, 0, 255) . Das heißt, wir machen abwechselnd einen Kanal so gesättigt wie möglich und die restlichen Kanäle werden nicht für die Synthese verwendet, da ihr Wert Null ist.

Versuchen Sie, dieses Beispiel zu bearbeiten und Ihre eigenen Werte anzugeben, zum Beispiel rgb(100, 100, 100) .

Farbe mit RGBA einstellen

Erschien in CSS3 neues Werkzeug zum Arbeiten mit Farbe - RGBA-Format. Man kann es als Weiterentwicklung des RGB-Modells bezeichnen, jedoch mit der Hinzufügung eines neuen Kanals – des A- oder Alpha-Kanals. Dieser Kanal legt die Transparenz der Farbe fest. Seine Werte liegen im Bereich von 0 bis 1. Ein Wert von 0 entspricht voller Transparenz, 1 – voller Deckkraft (die Farbe ist dieselbe, wie sie in den ersten drei RGB-Kanälen angegeben wurde) und Zwischenwerten ​wie 0,4 oder 0,6 – Transluzenz in unterschiedlichem Maße.

Beispielcode.

So wird es funktionieren:

Dieser Code ähnelt optisch dem folgenden, der das RGB-Modell verwendet, um einen Farbwert anzugeben:

Hier ist sein Ergebnis:

Ein Alphakanalwert gleich Null macht jede Farbe unsichtbar – absolut transparent; ein Wert gleich eins übersetzt die Farbe im RGB-Code ohne Änderungen. Die Eigenschaft rgba(255,0,0,1.0) zeigt die Farbe Rot rgb(255, 0, 0) an.

Nach Hexadezimalwert (HEX-Code)

Im Alltag verwenden wir das dezimale Zählsystem. Sein Ursprung ist sehr einfach: Wir haben zehn Finger an unseren Händen und das Abzählen an unseren Fingern ist im Leben praktisch. Wenn das Dezimalsystem zehn Ziffern hat: von 0 bis 9, und die Zahl 10 die nächste Ziffer ist, dann hat das hexadezimale Zahlensystem 16 Ziffern und die nächste Ziffer ist die Zahl 16.

Um Farbcodes anzuzeigen, werden gewöhnliche Dezimalziffern von 0 bis 9 als Hexadezimalziffern verwendet, und lateinische Buchstaben von A bis F werden verwendet, um Zahlen von 10 bis 15 anzugeben, d. h. (0, 1, 2, 3, 4, 5). , 6, 7, 8, 9, A, B, C, D, E, F). Der Übersichtlichkeit halber stellen wir dies in eine Tabelle:

Zur Aufnahme Hexadezimalzahlen mehr als F (15 im Dezimalsystem) verwenden wie im Dezimalsystem auch die Vereinigung zweier Ziffern, jedoch im Hexadezimalformat, was offensichtlich ist. Um die Dezimalzahl 255 in hexadezimaler Notation zu schreiben, verwenden Sie daher die FF-Notation.

Das Hexadezimalsystem ist für den Computer besser verständlich und verarbeitet die durch Hexadezimalwerte festgelegten Werte schneller.

Um eine Farbe im Hexadezimalformat anzugeben, stellen Sie dem numerischen Wert ein „#“-Zeichen voran, Beispiel: #FFC0CB. Der Wert #FFC0CB selbst besteht aus drei hexadezimalen Ziffern FF, C0 und CB. Die Bedeutung dieses Eintrags ist dieselbe wie die Einstellung der Farbe im RGB-Format (rgb(r, g, b)) – jede hexadezimale Ziffer im HEX-Code gibt die Farbsättigung in ihrem Kanal des RGB-Modells an.

#FF0000

#00FF00

#0000FF

Dieser Code zeigt die folgenden Elemente an:

Und hier ist ein Bild mit dem Ergebnis aus dem Abschnitt „Farben mit RGB einstellen“ auf dieser Seite oben.

Abb.1. Farben in RGB.

Wir sehen, dass die Farben identisch sind.

Eine verkürzte Schreibweise des HEX-Farbcodes ist zulässig: Eine 6-stellige Zahl kann als 3-stellige Zahl geschrieben werden. Dies gilt nur, wenn sich zwei Ziffern im Farbwert eines Kanals wiederholen.

Das heißt, die folgende Abkürzung ist akzeptabel:

Beispielsweise kann die Farbe #ff22aa als #f2a geschrieben werden, oder die Farbe #44aa22 kann als #4a2 geschrieben werden.

Farbe mit HSL einstellen

Erschien in CSS3 neues Format um Farbe anzuzeigen.

Das HSL-Format ist eine Abkürzung für die englischen Wörter: Hue (Farbton), Saturate (Sättigung) und Lightness (Helligkeit).

Der Farbton in HSL ist der Wert einer Farbe auf einem speziellen Farbkreis (Abbildung 2) und wird in Grad angegeben. Ziehen wir Analogien zum RGB-Modell, dann entspricht 0° Rot, 120° Grün und 240° Blau.

Der Farbtonwert ändert sich im Bereich von 0 bis 359.

Abbildung 2. HSL-Farbrad.

Der zweite Wert – die Sättigung (Saturate) – wird als Prozentsatz eingestellt. Bei 100 % Sättigung ist die Farbe so „saftig“ wie möglich; wenn sich der Sättigungsindikator in Richtung 0 % bewegt, wird die Farbe stumpfer und geht ins Grau über.

Der dritte Wert, die Helligkeit, wird ebenfalls in Prozent angegeben. Je höher der Prozentsatz, desto heller wird die Farbe. Die Extremwerte 0 % und 100 % zeigen schwarze (kein Licht) bzw. weiße (überbelichtete) Farben an, wobei es keine Rolle spielt, welche Farbe Farbkreis wurde im ersten Kanal ausgewählt. Der optimale Farbhelligkeitswert liegt bei 50 %.

Festlegen der Farbe mit HSLA

Das HSLA-Format ist mit HSL verwandt, ebenso wie RGB mit RGBA. Im HSLA-Format wird wie im RGBA ein Alphakanal hinzugefügt, der für die Farbtransparenz verantwortlich ist.

Die im HSL-Format angegebene Farbe ist einfacher zu lesen. Wir können sagen, dass es intuitiv ist. Beispielsweise kann der Code hsl(120,60%,50%) die endgültige Farbe darstellen, wenn ein Bild des HSL-Farbkreises im Speicher vorhanden ist. Das Gleiche gilt nicht für die RGB- und HEX-Formate; der in diesen Formaten angegebene Farbcode wird erst klar, wenn er auf dem Monitor angezeigt wird.

Neue Formate in CSS3 (HSL, HSLA und RGBA) funktionieren in Browsern ab Versionen: IE 9.0, Opera 10.0 Firefox 3.0. Wie kann ich dafür sorgen, dass Stile in älteren Browsern funktionieren?

Somebloсk (Hintergrundfarbe: rgb(255,50,50); Hintergrundfarbe: rgba(255,50,50,0.85) )

Wenn Sie diesen Code in älteren Browsern verwenden, wird die Hintergrundfarbe für die .somebloсk-Klasse im RGB-Format angezeigt, obwohl sie keinen Alphakanal verwendet.

Lesen Sie auch...

• Einen K-Line-Adapter mit eigenen Händen herstellen
• Nero Free (Nero) auf Russisch Laden Sie Nero für die Audioaufnahme herunter
• Was tun, wenn AirDrop iPhone, iPad, Mac nicht erkennt?
• So öffnen Sie Pages-Dateien in Microsoft Word

Freunde unterscheiden sich von Freunden oder So beschränken Sie den Zugriff auf persönliche Daten auf Facebook Eingeschränkte Freunde

So bewerben Sie eine Seite in OK

OpenOffice: Ein Buch im fb2-Format erstellen

Das Beste auf der Website

1

Vorlesung: Arithmetische und logische Grundlagen des Computerbetriebs

2

Dropmefiles – Teilen Sie große Dateien sofort ohne Registrierung

3

So entfernen Sie Mozilla Firefox vollständig von Ihrem Computer. Löschen Sie Firefox-Daten

4

Was macht das Routing-Protokoll (IP)?

5

Windows erkennt USB-Gerät nicht

Neu

Elektronische digitale Signatur für das Rosprirodnadzor-Portal

Anwendungsschutzschlüssel nicht gefunden

Was Sie mit Farbe zeichnen können, Werkzeuge und Farben Wie Sie mit der Maus gut in Farbe zeichnen können

So steuern Sie Ihren Fernseher von Ihrem Android-Telefon aus mit Apps zur universellen TV-Fernbedienung online

Einfache Möglichkeiten zum Installieren von IPA-Dateien auf Apple-Gadgets. Installieren von IPA auf dem iPhone

Testbericht zum MSI K9N Neo V2-Motherboard

Einen K-Line-Adapter mit eigenen Händen herstellen

Nero Free (Nero) auf Russisch Laden Sie Nero für die Audioaufnahme herunter