Giltiga CSS-färgvärden
- Föregående sida CSS färger
- Nästa sida CSS standardvärden
CSS färger
Färger i CSS kan specificeras på följande sätt:
- Sexadekimala färger
- HEX-färger med genomskinlighet
- RGB-färg
- RGBA-färger
- HSL-färger
- HSLA-färg
- Fördefinierade/förbundsstandardiserade färgnamn
- Använd
currentcolor
Nyckelord
Sexadekimala färger
Ange sexadekimala färger med #RRGGBB, där RR (rött), GG (grönt) och BB (blått) är sexadekimala heltal som specificerar färgkomponenterna (komponenter). Alla värden måste vara mellan 00 och FF.
Till exempel, värdet #0000ff visas som blått, eftersom blå komponenten är satt till sitt högsta värde (ff), medan de andra komponenterna är satta till 00.
Exempel
Definiera olika HEX-färger:
#p1 {background-color: #ff0000;} /* Rött */ #p2 {background-color: #00ff00;} /* Grönt */ #p3 {background-color: #0000ff;} /* Blått */
HEX-färger med genomskinlighet
Ange sexadekimala färger med #RRGGBB. För att öka genomskinligheten, lägg till två extra siffror mellan 00 och FF.
Exempel
Definiera HEX-färger med genomskinlighet:
#p1a {background-color: #ff000080;} /* Rött med genomskinlighet */ #p2a {background-color: #00ff0080;} /* Grönt med genomskinlighet */ #p3a {background-color: #0000ff80;} /* Blått med genomskinlighet */
RGB-färg
RGB-färgvärden består av rgb() funktionenRegler, syntaxen är som följer:
rgb(red, green, blue)
Varje parameter (red, green, blueDefinierar färgintensiteten, vilket kan vara ett heltal mellan 0 och 255 eller en procentandel (från 0% till 100%).
Till exempel, värdet rgb(0,0,255) visas som blått, eftersom blue-argumentet är satt till sitt högsta värde (255), medan de andra argumenten är satta till 0.
Dessutom definieras följande värden som samma färg: rgb(0,0,255) och rgb(0%,0%,100%).
Exempel
Definiera olika RGB-färger:
#p1 {background-color: rgb(255, 0, 0);} /* Röd */ #p2 {background-color: rgb(0, 255, 0);} /* Grön */ #p3 {background-color: rgb(0, 0, 255);} /* Blå */
RGBA-färger
RGBA-färgvärden är en utökning av RGB-färgvärden, den har en Alpha-kanal - anger objektets opacitet.
RGBA-färger genom rgba() funktionenRegler, syntaxen är som följer:
rgba(red, green, blue, alpha)
alpha Parametrarna är nummer mellan 0.0 (helt transparent) och 1.0 (helt opacit).
Exempel
Definiera olika RGB-färger med opacitet:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* Röd med opacitet */ #p2 {background-color: rgba(0, 255, 0, 0.3);} /* Grön med opacitet */ #p3 {background-color: rgba(0, 0, 255, 0.3);} /* Blå med opacitet */
HSL-färger
HSL betyder hue (färgton), saturation (sättning) och lightness (ljushet) - en cylindrisk koordinatsystem för färg.
Använd hsl() funktionenAnge HSL-färgvärden, syntaxen för denna funktion är som följer:
hsl(nyans, mättnad, ljushet)
Hue är en vinkel på färgcirkeln (från 0 till 360) - 0 (eller 360) är röd, 120 är grön, 240 är blå.
Sättning är en procentandel; 0% representerar grå skugga, medan 100% är färgstark.
Ljushet är också en procentandel; 0% är svart, 100% är vitt.
Exempel
Definiera olika HSL-färger:
#p1 {background-color: hsl(120, 100%, 50%);} /* 绿色 */ #p2 {background-color: hsl(120, 100%, 75%);} /* 浅绿色 */ #p3 {background-color: hsl(120, 100%, 25%);} /* 深绿色 */ #p4 {background-color: hsl(120, 60%, 70%);} /* Mjukt grön */
HSLA-färg
HSLA-färgvärden är en utökning av HSL-färgvärden som har en Alpha-kanal - den specificerar objektets opacitet.
HSLA-färgvärden består av hsla() funktionSpecificera, syntaxen för denna funktion är som följer:
hsla(nyans, mättnad, ljushet, alpha)
alpha Parametrarna är nummer mellan 0.0 (helt transparent) och 1.0 (helt opacit).
Exempel
Definiera olika HSL-färger med opacitet:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* Grön med opacitet */ #p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* Ljust grön med opacitet */ #p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* Mörkgrön med opacitet */ #p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* Halvfärgad grön med opacitet */
Fördefinierade/förbundsstandardiserade färgnamn
HTML och CSS färgspecifikationer har fördefinierat 140 färgnamn.
Exempel:blue
ochred
ochcoral
ochbrown
med mera:
Exempel
Definiera olika färgnamn:
#p1 {background-color: blue;} #p2 {background-color: red;} #p3 {background-color: coral;} #p4 {background-color: brown;}
Listan över alla fördefinierade namn hittar du i vår Färgnamn-handbok.
currentcolor-nyckelord
currentcolor
Använda nyckelord för att referera till elementets color-attribut.
Exempel
Följande <div>-elementets kantfärg kommer att vara blå, eftersom <div>-elementets textfärg är blå:
#myDIV { color: blue; /* Blå textfärg */ border: 10px solid currentcolor; /* Blå kantfärg */ }
- Föregående sida CSS färger
- Nästa sida CSS standardvärden