So konvertieren Sie CSS-Farben

CSS-Farbtransformation

Bei Webdesign und -entwicklung ist Farbe ein sehr wichtiges Element. Ich glaube, viele Menschen sind auf die folgende Situation gestoßen: In einem Designentwurf gibt der Designer einen bevorzugten Farbwert an, dieser Farbwert kann jedoch nicht direkt in CSS verwendet werden. Zu diesem Zeitpunkt müssen wir einige Farbkonvertierungsvorgänge durchführen, um sie in CSS-Farbwerte umzuwandeln.

Im Folgenden werde ich gängige Farbkonvertierungsmethoden und deren Verwendung vorstellen.

1. RGB-Konvertierung

RGB ist eines der häufigsten Farbformate. Im Webdesign verwenden wir häufig das hexadezimale RGB-Format zur Darstellung von Farben.

In RGB sind die Farbwerte der drei Primärfarben Rot, Grün und Blau Zahlen zwischen 0 und 255, die unterschiedliche Farblichtintensitäten darstellen.

Zum Beispiel stellen wir die RGB-Werte von Rot als Rot (255,0,0), Grün (0,255,0), Blau (0,0,255) dar.

Um RGB in CSS-Farbwerte umzuwandeln, müssen wir den RGB-Wert durch 255 teilen und ihn dann in CSS in das RGB-Format (Rot, Grün, Blau) formatieren. Wie folgt:

rgb(255, 0, 0) /*红色*/
rgb(0, 255, 0) /*绿色*/
rgb(0, 0, 255) /*蓝色*/

2. Hex-Konvertierung

Ein weiteres gängiges Farbformat ist die Hexadezimalschreibweise (Hex). In der Hex-Notation werden Farbwerte mit sechs Hexadezimalziffern dargestellt. Verwenden Sie in CSS das #-Symbol.

In der Hex-Schreibweise stellt jede zweistellige Zahl den Helligkeitswert der drei Primärfarben Rot, Grün und Blau dar. Die Zahlen reichen von 00 bis FF und repräsentieren Werte von 0 bis 255. Beispielsweise ist der Hex-Wert von Rot #FF0000, der Hex-Wert von Grün ist #00FF00 und der Hex-Wert von Blau ist #0000FF.

Die Konvertierungsmethode ist sehr einfach. Entfernen Sie einfach das # und die sechs hexadezimalen Ziffern und drücken Sie sie im RGB-Format aus.

#FF0000 /*红色*/
#00FF00 /*绿色*/
#0000FF /*蓝色*/

3. HSL-Konvertierung

HSL ist ein sehr intuitives Farbformat, das drei Parameter umfasst: Farbton, Sättigung und Helligkeit.

Der Farbtonwert stellt die Position der Farbe auf der Farbplatte dar und der Wertebereich liegt zwischen 0 und 360. Die Sättigung stellt die Tiefe einer Farbe dar und reicht von 0 % bis 100 %. Helligkeit (Lightness) stellt die Helligkeit und Dunkelheit der Farbe dar, und der Wertebereich reicht ebenfalls von 0 % bis 100 %.

Die Konvertierungsmethode ist ebenfalls sehr einfach. Verwenden Sie einfach das HSL-Format (Farbton, Sättigung, Helligkeit), wie unten gezeigt:

hsl(0, 100%, 50%) /*红色*/
hsl(120, 100%, 50%) /*绿色*/
hsl(240, 100%, 50%) /*蓝色*/

4. HSLA-Konvertierung

HSLA ist eine erweiterte Version des HSL-Formats, das auch Folgendes enthält: Transparenzwert (Alpha). Der Transparenzwert reicht von 0 bis 1, wobei 0 für völlig transparent und 1 für völlig undurchsichtig steht.

Die Konvertierungsmethode ähnelt HSL, außer dass am Ende der Transparenzwert hinzugefügt werden muss, ausgedrückt im HSLA-Format (Farbton, Sättigung, Helligkeit, Alpha). Zum Beispiel:

hsla(0, 100%, 50%, 0.5) /*半透明红色*/
hsla(120, 100%, 50%, 0.5) /*半透明绿色*/
hsla(240, 100%, 50%, 0.5) /*半透明蓝色*/

Zusammenfassung

Beim Webdesign und der Webentwicklung müssen wir verschiedene Farbformate verwenden. Die Beherrschung dieser Farbkonvertierungsfähigkeiten kann nicht nur die Entwicklungseffizienz verbessern und die Möglichkeit von Fehlern verringern, sondern auch die Anforderungen von Designern besser erfüllen.

Die oben genannten Methoden sind die am häufigsten verwendeten Farbkonvertierungsmethoden. Ich hoffe, sie können Ihnen hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie CSS-Farben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!