CSS färger

CSS-stöd 140+ färgnamnoch hexadesimala värden, RGB-värden, RGBA-värden, HSL-värden, HSLA-värden och opacitet.

RGBA-färg

RGBA-färgvärden är en utökning av RGB-färgvärden, med en alpha-kanal - denna kanal bestämmer färgens opacitet.

RGBA-färgvärden definieras enligt: rgba(red, green, blue, alpha) alpha Parametrarna är siffror mellan 0.0 (fullt genomskinlig) och 1.0 (inte genomskinlig).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Följande exempel definierar olika RGBA-färger:

Exempel

#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ärg

HSL står för färgton, saturation och ljushet (Hue, Saturation samt Lightness).

HSL-färgvärden definieras enligt: hsl(hue, saturation, lightness).

Färgton är vinkeln på färgcirkeln (från 0 till 360):

  • 0 (eller 360) är röd
  • 120 är grön
  • 240 är blå

Färgton är en procentvärde: 100% är färgfyllt.

Ljusheten är också en procentvärde: 0% är mörk färg (svart), medan 100% är vit.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Nedanstående exempel definierar olika HSL-färger:

Exempel

#p1 {background-color: hsl(120, 100%, 50%);}  /* Grönt */
#p2 {background-color: hsl(120, 100%, 75%);}  /* Ljust grönt */
#p3 {background-color: hsl(120, 100%, 25%);}  /* Mörkt grönt */
#p4 {background-color: hsl(120, 60%, 70%);}   /* Ljust grönt */

Prova själv

HSLA-färger

HSLA-färgvärden är en utökning av HSL-färgvärden med Alpha-kanal - den specificerar färgens ogenomskinlighet.

HSLA-färgvärden definieras av följande parametrar: hsla(hue, saturation, lightness, alpha)，där alpha-parametern definierar ogenomskinlighet. Alpha-parametern är ett nummer mellan 0.0 (fullt genomskinligt) och 1.0 (inte genomskinligt).

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Nedanstående exempel definierar olika HSLA-färger:

Exempel

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* Grönt med ogenomskinlighet */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* Ljust grönt med ogenomskinlighet */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* Mörkt grönt med ogenomskinlighet */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Ljust grönt med ogenomskinlighet */

Prova själv

Ogenomskinlighet

CSS opacity Egenskapsinställningen sätter hela elementets ogenomskinlighet (både bakgrundsfärg och text kommer att vara genomskinlig/ogenomskinlig).

opacity Egenskapsvärdet måste vara ett nummer mellan 0.0 (fullt genomskinligt) och 1.0 (inte genomskinligt).

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

Observera att texten ovan kommer också att vara transparent/genomskinlig!

Följande exempel visar olika element med genomskinlighet:

Exempel

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* Röd med genomskinlighet */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* Grön med genomskinlighet */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* Blå med genomskinlighet */

Prova själv