Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Ihre Suchergebnisse

    Farben

    Achtung: Dieser Artikel ist möglicherweise veraltet.

    Übersicht

    Viele CSS Eigenschaften, wie zum Beispiel color, background-color oder border-color akzeptieren Farbwerte.

    HTML/SVG/X11  Farbnamen

    Farbnamen wie zum Beispiel red, blue, brown, lightseagreen etc.  Siehe auch CSS3 Color.

    (Mausover zum Anzeigen der Farbnamen)                                                                               !!                                                                                        !!                                           !!                                                                      !!    !!                                                                                                                !!                              

    Hinweis: Im Internet Explorer gibt es Unterschiede bei der Schreibweise:
    grey, darkgrey, darkslategrey, dimgrey, lightgray, lightslategrey
    gray, darkgray, darkslategray, dimgray, lightgrey, lightslategray

    transparent Keyword

    Komplett durchsichtig. Der berechnete Wert ist rgba(0,0,0,0).
    In CSS 2.1 ist transparent nur für background und border erlaubt.
    In CSS 3 gilt dieser Wert auch für color und andere Eigenschaften.
    Siehe auch: Browser Kompatibilität.

    currentColor Keyword

    Der Wert der color Eigenschaft eines Elementes.
    Bespiel:

    <div style="color:darkred">
     Dieser Text ist dunkelrot mit einer dunkelroten Linie darunter.
      <div style="background:currentcolor; height:1ex"></div>
     Noch mehr Text.
    </div> 
    
    Dieser Text ist dunkelrot mit einer dunkelroten Linie darunter.
    .
    Noch mehr Text.

     

    rgb()

    Hexadezimale Schreibweise #RRGGBB und #RGB
    "#", gefolgt von sechs hexadezimalen Zeichen (0-9, A-F).
    "#", gefolgt von drei hexadezimalen Zeichen (0-9, A-F).
    Die Schreibweise mit drei Zeichen (#RGB) und die mit sechs Zeichen (#RRGGBB) sind gleich.
    Beispiel: #f03 und #ff0033 ergeben die gleiche Farbe.
    Funktionale Schreibweise rgb(R,G,B)
    "rgb", gefolgt von drei Ganzzahlen oder drei prozentualen Werten.
    Der Wert 255 bezieht sich auf 100% und auf F oder FF in der hexadezimalen Notation.
    /* Die folgenden Beispiele setzen alle die gleiche Farbe fest */
     
     #f03
     #F03
     #ff0033
     #FF0033
     rgb(255,0,51)
     rgb(255, 0, 51)
     rgb(255, 0, 51.2) /* Kommazahlen sind nicht möglich. */ 
     rgb(100%,0%,20%)
     rgb(100%, 0%, 20%)
     rgb(100%, 0, 20%) /* Ganzzahlen und prozentuale Werte dürfen nicht gemischt in einer rgb() Funktion auftreten. */
    

    hsl()

    Der Vorteil der HSL-Schreibweise gegenüber der RGB-Schreibweise ist, dass es z.B. einfacher ist, mehrere Farben zu definieren, die den gleichen Farbton (hue) haben, sich aber durch unterschiedliche Helligkeit (lightness) und Sättigungen (saturation) unterscheiden sollen.

    Der Farbton (hue) wird durch einen Winkel (ohne Einheit) angegeben und bezieht sich auf den Farbkreis.
    Definitionsgemäß ist rot=0=360, grün=120, und blau=240. Die weiteren Farben verteilen sich entsprechend. Negative Werte und solche die größer als 360 sind werden umgerechnet (-120=240 und 480=120).

    Sättigung und Helligkeit werden durch Prozentzahlen angegeben.
    100% bedeutet volle Sättigung, und 0% bedeutet eine Abstufung von grau.
    100% Helligkeit ist weiß, 0% Helligkeit ist schwarz, und 50% Helligkeit ist "normal".

    hsl(0,  100%,50%)    /* red */   
    hsl(30, 100%,50%)                 
    hsl(60, 100%,50%)                
    hsl(90, 100%,50%)                
    hsl(120,100%,50%)    /* green */ 
    hsl(150,100%,50%)                
    hsl(180,100%,50%)                
    hsl(210,100%,50%)                
    hsl(240,100%,50%)    /* blue */  
    hsl(270,100%,50%)                
    hsl(300,100%,50%)                
    hsl(330,100%,50%)                
    hsl(360,100%,50%)    /* red */   
    
    hsl(120,100%,25%)    /* dark green */  
    hsl(120,100%,50%)    /* green */       
    hsl(120,100%,75%)    /* light green */ 
    
    hsl(120,100%,50%)    /* green */  
    hsl(120, 67%,50%)                 
    hsl(120, 33%,50%)                 
    hsl(120,  0%,50%)                 
    
    hsl(120, 60%,70%)    /* pastel green */ 
    

    rgba()

    Erweitert das RGB Farbmodell um "alpha", um die Deckkraft einer Farbe festzulegen.
    a steht für die Deckkraft: 0=durchsichtig; 1=deckend;

    rgba(255,0,0,0.1)    /* 10% deckendes rot */  
    rgba(255,0,0,0.4)    /* 40% deckendes rot */  
    rgba(255,0,0,0.7)    /* 70% deckendes rot */  
    rgba(255,0,0,  1)    /* komplett deckendes rot */ 
    

    hsla()

    Erweitert das HSL Farbmodell um "alpha", um die Deckkraft einer Farbe festzulegen.
    a steht für die Deckkraft: 0=durchsichtig; 1=deckend;

    hsla(240,100%,50%,0.05)   /* 5% deckendes blau */   
    hsla(240,100%,50%, 0.4)   /* 40% deckendes blau */  
    hsla(240,100%,50%, 0.7)   /* 70% deckendes blau */  
    hsla(240,100%,50%,   1)   /* komplett deckendes blau */ 
    

    Systemfarben

    Nicht alle Systemfarben werden auf allen Systemen unterstützt. Eine Benutzung auf öffentlichen Webseiten ist missbilligt (deprecated).

    ActiveBorder
    Rahmenfarbe eines aktiven Fensters
    ActiveCaption
    Titelleistenfarbe eines aktiven Fensters
    AppWorkspace
    Hintergrundfarbe einer Anwendung mit Multiple Document Interfaces
    Background
    Desktop Hintergrundfarbe
    ButtonFace
    Farbe der Fläche eines 3-Dimensionalen Elements
    ButtonHighlight
    Dunkle Schattenfarbe für 3-Dimensionale Elemente
    ButtonShadow
    Schattenfarbe für 3-Dimensionale Elemente
    ButtonText
    Textfarbe von Buttons
    CaptionText
    Textfarbe in Fenstertiteln
    GrayText
    Graue (deaktivierte) Textfarbe
    Highlight
    Farbe der ausgewählten Einträge in einem Bedienelement
    HighlightText
    Textarbe ausgewählter Einträge in einem Bedienelement
    InactiveBorder
    Rahmenfarbe eines inaktiven Fensters
    InactiveCaption
    Titleleistenfarbe eines inaktiven Fensters
    InactiveCaptionText
    Textfarbe von Titeln inaktiver Fenstern
    InfoBackground
    Hintergrundfarbe von Tooltipps
    InfoText
    Textfarbe für Tooltipps
    Menu
    Menü Hintergrundfarbe
    MenuText
    Textfarbe in Menüs
    Scrollbar
    Graue Scrollbarbereichsfarbe
    ThreeDDarkShadow
    Dunkle Schattenfarbe für 3-Dimensionale Elemente (für Seiten die dem Licht abgewandt sind)
    ThreeDFace
    Hintergrundfarbe der Fläche für 3-Dimensionale Elemente
    ThreeDHighlight
    Hervorhebungsfarbe für 3-Dimensionale Elemente
    ThreeDLightShadow
    Helle Schattenfarbe für 3-Dimensionale Elemente (für Seiten die dem Licht zugewandt sind)
    ThreeDShadow
    Schattenfarbe für 3-Dimensionale Elemente
    Window
    Fensterhintergrund
    WindowFrame
    Hintergrund eines Frames im Fenster
    WindowText
    Farbe des Texts in Fenstern

    Mozilla Erweiterungen

    -moz-ButtonDefault
    Rahmenfarbe eines DefaultButtons in einer Dialogbox
    -moz-ButtonHoverFace
    Hintergrundfarbe eines gehoverten Buttons
    -moz-ButtonHoverText
    Textfarbe eines gehoverten Buttons
    -moz-CellHighlight
    Hintergrundfarbe für ausgewählte Items in einem Verzeichnisbaum
    -moz-CellHighlightText
    Textfarbe für ausgewählte Items in einen Verzeichnisbaum
    -moz-Combobox
    Hintergrundfarbe für Comboboxen
    -moz-ComboboxText
    Textfarbe für Comboboxen
    -moz-Dialog
    Hintergrundfarbe für Dialogboxen
    -moz-DialogText
    Textfarbe für Dialogboxen
    -moz-dragtargetzone
    ???
    -moz-EvenTreeRow
    Hintergrundfarbe für gerade nummerierte Zeilen in einem Baum
    -moz-Field
    Textfeld Hintergrundfarbe
    -moz-FieldText
    Textfeld Vordergrundfarbe
    -moz-html-CellHighlight
    Hintergrundfarbe für ein markiertes Item in einer HTML Auswahl
    -moz-html-CellHighlightText
    Textfarbe für ein markiertes Item in einer HTML Auswahl
    -moz-mac-accentdarkestshadow
    -moz-mac-accentdarkshadow
    -moz-mac-accentface
    -moz-mac-accentlightesthighlight
    -moz-mac-accentlightshadow
    -moz-mac-accentregularhighlight
    -moz-mac-accentregularshadow
    -moz-mac-chrome-active
    -moz-mac-chrome-inactive
    -moz-mac-focusring
    -moz-mac-menuselect
    -moz-mac-menushadow
    -moz-mac-menutextselect
    -moz-MenuHover
    Hintergrundfarbe für gehoverte Menuitems
    -moz-MenuHoverText
    Vordergrundfarbe für gehoverte Menuitems
    -moz-MenuBarText
    Textfarbe in Menubars
    -moz-MenuBarHoverText
    Vordergrundfarbe für gehoverte Menubars
    -moz-nativehyperlinktext
    Standard Hyperlink Farbe
    -moz-OddTreeRow
    Hintergrundfarbe für ungerade nummerierte Zeilen in einem Baum
    -moz-win-communicationstext
    Textfarbe von Objekten mit appearance:-moz-win-communications-toolbox
    -moz-win-mediatext
    Textfarbe von Objekten mit appearance:-moz-win-media-toolbox

    Mozilla Erweiterungen: Bevorzugte Benutzerfarben

    -moz-activehyperlinktext
    Bevorzugte Benutzerfarbe für die Textfarbe von aktiven Links
    -moz-hyperlinktext
    Bevorzugte Benutzerfarbe für unbesuchte Links
    -moz-visitedhyperlinktext
    Bevorzugte Benutzerfarbe für besuchte Links

    Spezifikation

    Browser Kompatibilität

    Browser #RRGGBB | #RGB rgb(R,G,B) hsl(H,S,L) rgba(R,G,B,a) hsla(H,S,L,a) currentColor transparent
    Internet Explorer 3.0 4.0 --- --- --- --- [*]
    Firefox (Gecko) 1.0 (1.0) 1.0 (1.0) 1.0 (1.5) 3.0 (1.9) 3.0 (1.9) 1.5 (1.8) 3.0 (1.9)
    Opera 3.5 3.5 9.5 10.0 10.0 9.5 10.0
    Safari (WebKit) 1.0 (85) 1.0 (85) 3.1 (525) 3.1 (525) 3.1 (525) 4.0 (528) 3.1 (525)

    [*]  Der Internet Explorer ab Version 7.0 unterstützt den Wert transparent, gemäß CSS 2.1 Standard, nur für background und border. Wenn color:transparent angegeben wird, wird schwarz dargestellt.

    Siehe auch

    color, background-color, border-color, opacity

    Schlagwörter des Dokuments und Mitwirkende

    Schlagwörter: 
    Mitwirkende an dieser Seite: SJW, fscholz, Michael2402, Jürgen Jeka
    Zuletzt aktualisiert von: SJW,
    Seitenleiste ausblenden