Farben, Color, Farbnamen und Farbcodes
Farben werden in CSS entweder durch die Englischen Farbnamen oder durch die Definition
der sRGB-Werte definiert, mit Hilfe von hexadezimalen Zahlen.
Farbgebung mit Hilfe von Farbnamen
Die folgenden Farben werden von allen Browsern erkannt und in CSS durch "color" definiert: aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red, yellow
Beispiel - Definition in css
div.farbname {
background-color:aqua;color:aqua;
background-color:lime;color:lime;
background-color:black;color:black;
background-color:magenta;color:magenta;
background-color:blue;color:blue;
background-color:red;color:red;
background-color:cyan;color:cyan;
background-color:white;color:white;
background-color:fuchsia;color:fuchsia;
background-color:yellow;color:yellow;
}
background-color:aqua;color:aqua;
background-color:lime;color:lime;
background-color:black;color:black;
background-color:magenta;color:magenta;
background-color:blue;color:blue;
background-color:red;color:red;
background-color:cyan;color:cyan;
background-color:white;color:white;
background-color:fuchsia;color:fuchsia;
background-color:yellow;color:yellow;
}
Und so schaut es aus
| aqua | lime | ||
| black | magenta | ||
| blue | red | ||
| cyan | white | ||
| fuchsia | yellow |
Farbgebung mit Hilfe von hexadezimalen Zahlen
In CSS werden Farben im sRGB-Farbraum als hexadezimale Zahlen angegeben z.B. "color:#ff0000;"" beschreibt die Farbe "Rot".
Beispiel - Definition in css
div.hexfarben {
background-color:#000000;color:#000000;
background-color:#808080;color:#808080;
background-color:#005ba6;color:#005ba6;
background-color:#00c621;color:#00c621;
background-color:#626b00;color:#626b00;
background-color:#f50073;color:#f50073;
background-color:#7c0066;color:#7c0066;
background-color:#e4e700;color:#e4e700;
background-color:#ff0000;color:#ff0000;
background-color:#ff7800;color:#ff7800;
}
background-color:#000000;color:#000000;
background-color:#808080;color:#808080;
background-color:#005ba6;color:#005ba6;
background-color:#00c621;color:#00c621;
background-color:#626b00;color:#626b00;
background-color:#f50073;color:#f50073;
background-color:#7c0066;color:#7c0066;
background-color:#e4e700;color:#e4e700;
background-color:#ff0000;color:#ff0000;
background-color:#ff7800;color:#ff7800;
}
Und so schaut es aus
| #000000 | #808080 | ||
| #005ba6 | #00c621 | ||
| #626b00 | #f50073 | ||
| #7c0066 | #e4e700 | ||
| #ff0000 | ff7800 |
Verschaff Dir einen Überblick
Wissenswertes, Hilfestellung und Lösungen rund um das Thema CSS:A
Absolute und relative MaßeAbgerundete Ecken
Anordnung
B
background-attachmentbackground-position
C
cm (Zentimeter)Color
Contextual Selectors
CSS Formatierungen
CSS-Sprites
D
Definition mehrerer TagsE
Ebenen / LayerEcke / Eckenrundung
Einbindung CSS
em
ex
Externe CSS-Datei
F
FarbenFarbcodes
Farbnamen
Farbverlauf
Fixierter, fester Hintergrund
G
GradientGrundlagen
H
HintergrundbildHintergrundbild Positionierung
Hover-Effekt über Hintergrundbild
I
IDsin (Inch)
Interne CSS-Datei
K
KlassenKlassifizierung
L
Layer / EbenenListen
P
pcPosition
Positionierung Hintergrundbild
pt (Pica)
px (Pixel)
R
Rahmen FormatierungReihenfolge von Elementen
Relative und absolute Maße
repeat Möglichkeiten
Runde Ecken
S
SchriftformatierungScrollbarer Hintergrund
Sichtbarkeit
Sprites
Stylesheet
T
TextflussTextgestaltung
U
Überhängende InhalteÜbereinander liegende Elemente
V
VererbungVerlauf / Verläufe















