CSS
Farben

Syntax

• Farbe: #rgb
• Farbe: #rrggbb
• Farbe: rgb [a] (<rot>, <grün>, <blau> [, <alpha>])
• Farbe: hsl [a] (<Farbton>, <Sättigung%>, <Helligkeit%> [, <Alpha>])
• Farbe: colorkeyword / * grün, blau, gelb, orange, rot, .. etc * /

Farbe Schlüsselwörter

Die meisten Browser unterstützen die Verwendung von Farbschlüsselwörtern, um eine Farbe anzugeben. Um beispielsweise die color eines Elements auf Blau zu setzen, verwenden Sie das blue Schlüsselwort:

.some-class {
    color: blue;
}

Bei CSS-Schlüsselwörtern wird die Groß- und Kleinschreibung nicht #0000FF . blue , Blue und BLUE führen zu #0000FF .

Farbe Schlüsselwörter

Name der Farbe	Hex-Wert	RGB-Werte	Farbe
Alice blau	# F0F8FF	rgb (240.248.255)
Altweiß	# FAEBD7	rgb (250,235,215)
Aqua	# 00FFFF	rgb (0,255,255)
Aquamarin	# 7FFFD4	rgb (127,255,212)
Azurblau	# F0FFFF	rgb (240,255,255)
Beige	# F5F5DC	rgb (245,245,220)
Bisque	# FFE4C4	rgb (255,228,196)
Schwarz	# 000000	rgb (0,0,0)
Blanchierte Mandel	#FFEBCD	rgb (255,235,205)
Blau	# 0000FF	rgb (0,0,255)
Blau Violett	# 8A2BE2	rgb (138,43,226)
Braun	# A52A2A	rgb (165,42,42)
Kräftiges Holz	# DEB887	rgb (222, 184, 135)
Kadettenblau	# 5F9EA0	rgb (95,158,160)
Chartreuse	# 7FFF00	rgb (127,255,0)
Schokolade	# D2691E	rgb (210,105,30)
Koralle	# FF7F50	rgb (255,127,80)
Kornblumenblau	# 6495ED	rgb (100,149,237)
Cornsilk	# FFF8DC	rgb (255,248,220)
Crimson	# DC143C	rgb (220,20,60)
Cyan	# 00FFFF	rgb (0,255,255)
Dunkelblau	# 00008B	rgb (0,0,139)
DarkCyan	# 008B8B	rgb (0,139,139)
DarkGoldenRod	# B8860B	rgb (184,134,11)
Dunkelgrau	# A9A9A9	rgb (169,169,169)
Dunkelgrau	# A9A9A9	rgb (169,169,169)
Dunkelgrün	# 006400	rgb (0,100,0)
DarkKhaki	# BDB76B	rgb (189.183.107)
DarkMagenta	# 8B008B	rgb (139,0,139)
DarkOliveGreen	# 556B2F	rgb (85,107,47)
Dunkelorange	# FF8C00	rgb (255,140,0)
DarkOrchid	# 9932CC	rgb (153,50,204)
Dunkelrot	# 8B0000	rgb (139,0,0)
DarkSalmon	# E9967A	rgb (233,150,122)
DarkSeaGreen	# 8FBC8F	rgb (143,188,143)
DarkSlateBlue	# 483D8B	rgb (72,61,139)
DarkSlateGray	# 2F4F4F	rgb (47,79,79)
DarkSlateGrey	# 2F4F4F	rgb (47,79,79)
DarkTurquoise	# 00CED1	rgb (0,206,209)
Dunkelviolett	# 9400D3	rgb (148,0,211)
Dunkelrosa	# FF1493	rgb (255,20,147)
DeepSkyBlue	# 00BFFF	rgb (0,191,255)
DimGray	# 696969	rgb (105,105,105)
DimGrey	# 696969	rgb (105,105,105)
DodgerBlue	# 1E90FF	rgb (30.144.255)
FireBrick	# B22222	rgb (178,34,34)
FloralWhite	# FFFAF0	rgb (255,250,240)
Waldgrün	# 228B22	rgb (34,139,34)
Fuchsie	# FF00FF	rgb (255,0,255)
Gainsboro	#DCDCDC	rgb (220,220,220)
GhostWhite	# F8F8FF	rgb (248,248,255)
Gold	# FFD700	rgb (255,215,0)
Goldrute	# DAA520	rgb (218,165,32)
Grau	# 808080	rgb (128,128,128)
Grau	# 808080	rgb (128,128,128)
Grün	# 008000	rgb (0,128,0)
Grün Gelb	# ADFF2F	rgb (173,255,47)
Honigtau	# F0FFF0	rgb (240,255,240)
HotPink	# FF69B4	rgb (255,105,180)
IndianRed	# CD5C5C	rgb (205,92,92)
Indigo	# 4B0082	rgb (75,0,130)
Elfenbein	# FFFFF0	rgb (255,255,240)
Khaki	# F0E68C	rgb (240,230,140)
Lavendel	# E6E6FA	rgb (230.230.250)
LavenderBlush	# FFF0F5	rgb (255,240,245)
Rasengrün	# 7CFC00	rgb (124.252,0)
ZitronenChiffon	#FFFACD	rgb (255,250,205)
Hellblau	# ADD8E6	rgb (173,216,230)
LightCoral	# F08080	rgb (240,128,128)
LightCyan	# E0FFFF	rgb (224,255,255)
LightGoldenRodYellow	# FAFAD2	rgb (250,250,210)
Hellgrau	# D3D3D3	rgb (211,211,211)
Hellgrau	# D3D3D3	rgb (211,211,211)
Hellgrün	# 90EE90	rgb (144.238.144)
Hell-Pink	# FFB6C1	rgb (255.182.193)
LightSalmon	# FFA07A	rgb (255,160,122)
LightSeaGreen	# 20B2AA	rgb (32.178.170)
LightSkyBlue	# 87CEFA	rgb (135,206,250)
LightSlateGray	# 778899	rgb (119,136,153)
LightSlateGrey	# 778899	rgb (119,136,153)
LightSteelBlue	# B0C4DE	rgb (176,196,222)
Hellgelb	# FFFFE0	rgb (255,255,224)
Limette	# 00FF00	rgb (0,255,0)
LimeGreen	# 32CD32	rgb (50,205,50)
Leinen	# FAF0E6	rgb (250,240,230)
Magenta	# FF00FF	rgb (255,0,255)
Kastanienbraun	800000	rgb (128,0,0)
MediumAquaMarine	# 66CDAA	rgb (102,205,170)
Mittelblau	# 0000CD	rgb (0,0,205)
MediumOrchid	# BA55D3	rgb (186,85,211)
MediumPurple	# 9370DB	rgb (147,112,219)
MediumSeaGreen	# 3CB371	rgb (60,179,113)
MediumSlateBlue	# 7B68EE	rgb (123,104,238)
MediumSpringGreen	# 00FA9A	rgb (0,250,154)
MediumTurquoise	# 48D1CC	rgb (72,209,204)
MediumVioletRed	# C71585	rgb (199,21,133)
Mitternachtsblau	# 191970	rgb (25, 25, 112)
MintCream	# F5FFFA	rgb (245,255,250)
MistyRose	# FFE4E1	rgb (255,228,225)
Mokassin	# FFE4B5	rgb (255,228,181)
NavajoWeiß	#FFDEAD	rgb (255,222,173)
Marine	# 000080	rgb (0,0,128)
OldLace	# FDF5E6	rgb (253,245,230)
Olive	# 808000	rgb (128.128,0)
Olivgrün	# 6B8E23	rgb (107,142,35)
Orange	# FFA500	rgb (255,165,0)
Orange Rot	# FF4500	rgb (255,69,0)
Orchidee	# DA70D6	rgb (218,112,214)
PaleGoldenRod	# EEE8AA	rgb (238,232,170)
Blasses Grün	# 98FB98	rgb (152,251,152)
PaleTurquoise	#AFEEEE	rgb (175,238,238)
PaleVioletRed	# DB7093	rgb (219,112,147)
PapayaWhip	# FFEFD5	rgb (255,239,213)
PeachPuff	# FFDAB9	rgb (255,218,185)
Peru	# CD853F	rgb (205,133,63)
Rosa	# FFC0CB	rgb (255,192,203)
Pflaume	# DDA0DD	rgb (221,160,221)
PowderBlue	# B0E0E6	rgb (176,224,230)
Lila	# 800080	rgb (128,0,128)
RebeccaPurple	# 663399	rgb (102,51,153)
rot	# FF0000	rgb (255,0,0)
RosyBrown	# BC8F8F	rgb (188,143,143)
Königsblau	# 4169E1	rgb (65,105,225)
Sattelbraun	# 8B4513	rgb (139,69,19)
Lachs	# FA8072	rgb (250,128,114)
SandyBrown	# F4A460	rgb (244,164,96)
Meeresgrün	# 2E8B57	rgb (46,139,87)
Muschel	# FFF5EE	rgb (255,245,238)
Sienna	# A0522D	rgb (160,82,45)
Silber	# C0C0C0	rgb (192,192,192)
Himmelblau	# 87CEEB	rgb (135,206,235)
SlateBlue	# 6A5ACD	rgb (106,90,205)
Schiefer grau	# 708090	rgb (112.128.144)
Schiefergrau	# 708090	rgb (112.128.144)
Schnee	#FFFAFA	rgb (255,250,250)
Frühlingsgrün	# 00FF7F	rgb (0,255,127)
Stahlblau	# 4682B4	rgb (70,130,180)
Bräunen	# D2B48C	rgb (210,180,140)
Teal	# 008080	rgb (0,128,128)
Distel	# D8BFD8	rgb (216,191,216)
Tomate	# FF6347	rgb (255,99,71)
Türkis	# 40E0D0	rgb (64.224.208)
Violett	# EE82EE	rgb (238,130,238)
Weizen	# F5DEB3	rgb (245,222,179)
Weiß	#FFFFFF	rgb (255,255,255)
Weißer Rauch	# F5F5F5	rgb (245,245,245)
Gelb	# FFFF00	rgb (255,255,0)
Gelbgrün	# 9ACD32	rgb (154.205,50)

Zusätzlich zu den genannten Farben, gibt es auch das Schlüsselwort transparent , die einen voll-transparent schwarz darstellt: rgba(0,0,0,0)

Hexadezimalwert

Hintergrund

CSS-Farben können auch als Hex-Triplett dargestellt werden, wobei die Mitglieder die roten, grünen und blauen Komponenten einer Farbe darstellen. Jeder dieser Werte steht für eine Zahl im Bereich von 00 bis FF oder von 0 bis 255 in Dezimalschreibweise. Hexidecimal-Werte können in Groß- und / oder Kleinbuchstaben verwendet werden (dh #3fc = #3FC = #33ffCC ). Der Browser interpretiert #369 als #336699 . Wenn dies nicht das ist, was Sie beabsichtigten, sondern #306090 , wollten Sie dies explizit angeben.

Die Gesamtzahl der Farben, die mit Hex-Notation dargestellt werden können, beträgt 256 ^ 3 oder 16.777.216.

Syntax

color: #rrggbb;
color: #rgb

.some-class {
    /* This is equivalent to using the color keyword 'blue' */
    color: #0000FF;
}

.also-blue {
    /* If you want to specify each range value with a single number, you can!
       This is equivalent to '#0000FF' (and 'blue') */
    color: #00F;
}

Die Hexadezimalschreibweise wird verwendet, um Farbwerte im RGB-Farbformat gemäß den 'Numerischen Farbwerten' des W3C anzugeben.

Im Internet gibt es eine Vielzahl von Tools, mit denen Sie nach hexadezimalen (oder einfach hexadezimalen) Farbwerten suchen können.

Suchen Sie nach " Hex-Farbpalette " oder " Hex-Farbauswahl " mit Ihrem bevorzugten Webbrowser, um eine Reihe von Optionen zu finden!

Hexadezimalwerte beginnen immer mit einem Nummernzeichen (#), sind bis zu sechs "Ziffern" lang und unterscheiden nicht zwischen Groß- und Kleinschreibung. #FFC125 und #ffc125 haben dieselbe Farbe.

rgb () Notation

RGB ist ein additives Farbmodell, das Farben als Mischungen aus rotem, grünem und blauem Licht darstellt. Im Wesentlichen ist die RGB-Darstellung das dezimale Äquivalent der Hexadezimal-Notation. Im Hexadezimalbereich reicht jede Zahl von 00-FF, was 0 bis 255 in Dezimalzahlen und 0 bis 100% in Prozent entspricht.

.some-class {
    /* Scalar RGB, equivalent to 'blue'*/
    color: rgb(0, 0, 255);
}

.also-blue {
    /* Percentile RGB values*/
    color: rgb(0%, 0%, 100%);
}

Syntax

rgb(<red>, <green>, <blue>)

hsl () Notation

HSL steht für Farbton ("welche Farbe"), Sättigung ("wie viel Farbe") und Helligkeit ("wie viel Weiß").

Der Farbton wird als Winkel von 0 ° bis 360 ° (ohne Einheiten) dargestellt, während Sättigung und Helligkeit in Prozent dargestellt werden.

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

Syntax

color: hsl(<hue>, <saturation>%, <lightness>%);

Anmerkungen

• Eine Sättigung von 0% erzeugt immer eine Graustufenfarbe; Das Ändern des Farbtons hat keine Auswirkung.

• Eine Helligkeit von 0% erzeugt immer Schwarz, und 100% erzeugt immer Weiß; Das Ändern des Farbtons oder der Sättigung hat keine Auswirkung.

currentColor

currentColor gibt den berechneten Farbwert des aktuellen Elements zurück.

Verwenden Sie in demselben Element

Hier wird currentColor zu Rot ausgewertet, da die color auf red :

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

In diesem Fall ist die Angabe von currentColor für den Rahmen höchstwahrscheinlich redundant, da durch das Auslassen identische Ergebnisse erzielt werden. Verwenden Sie currentColor nur innerhalb der border-Eigenschaft innerhalb desselben Elements, wenn es ansonsten durch einen spezifischeren Selektor überschrieben würde.

Da es sich um die berechnete Farbe handelt, ist der Rand im folgenden Beispiel grün, da die zweite Regel die erste Regel überschreibt:

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

Vom übergeordneten Element geerbt

Die Farbe des übergeordneten Elements wird vererbt. Hier wird currentColor mit 'blue' bewertet, sodass die Rahmenfarbe des untergeordneten Elements blau ist.

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColor kann auch von anderen Regeln verwendet werden, die normalerweise nicht von der color -Eigenschaft erben würden, wie z. B. Hintergrundfarbe. Das folgende Beispiel zeigt die untergeordneten Elemente, deren Hintergrundfarbe die übergeordnete Farbe ist:

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}

Mögliches Ergebnis:

rgba () Notation

Ähnlich der rgb () - Notation , jedoch mit einem zusätzlichen Alpha-Wert (Opazität).

.red {
    /* Opaque red */
    color: rgba(255, 0, 0, 1);
}

.red-50p {
    /* Half-translucent red. */
    color: rgba(255, 0, 0, .5);
}

Syntax

rgba(<red>, <green>, <blue>, <alpha>);

hsla () Notation

Ähnlich der hsl () -Notation , jedoch mit zusätzlichem Alpha-Wert (Opazität).

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

Syntax

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);