Giltiga CSS-färgvä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 */

Prova själv

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 */

Prova själv

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å */

Prova själv

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 */

Prova själv

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 */

Prova själv

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 */

Prova själv

Fördefinierade/förbundsstandardiserade färgnamn

HTML och CSS färgspecifikationer har fördefinierat 140 färgnamn.

Exempel:blueochredochcoralochbrown med mera:

Exempel

Definiera olika färgnamn:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

Prova själv

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 */
}

Prova själv