Gyldige CSS-farveværdier

CSS color

Farver i CSS kan specificeres på følgende måde:

  • Hexadecimal farve
  • HEX-farver med gennemsigtighed
  • RGB-farver
  • RGBA-farve
  • HSL-farve
  • HSLA-farver
  • Prædefinerede/oversærbrowsere farvenavne
  • Brug currentcolor Nøgleord

Hexadecimal farve

Brug #RRGGBB til at specificere en hexadecimal farve, hvor RR (rød), GG (grøn) og BB (blå) er hexadecimala hele tal, der specificerer farvekomponenterne (komponenter). Alle værdier skal være mellem 00 og FF.

For eksempel, værdien #0000ff vises som blå, fordi blå komponenten er sat til sin højeste værdi (ff), mens de andre komponenter er sat til 00.

Eksempel

Definerer forskellige HEX-farver:

#p1 {background-color: #ff0000;}   /* Rød */
#p2 {background-color: #00ff00;}   /* Grøn */
#p3 {background-color: #0000ff;}   /* Blå */

Prøv det selv

HEX-farver med gennemsigtighed

Brug #RRGGBB til at specificere en hexadecimal farve. For at øge gennemsigtigheden, tilføj to ekstra cifre mellem 00 og FF.

Eksempel

Definerer HEX-farver med gennemsigtighed:

#p1a {background-color: #ff000080;}   /* Rød med gennemsigtighed */
#p2a {background-color: #00ff0080;}   /* Grøn med gennemsigtighed */
#p3a {background-color: #0000ff80;}   /* Blå med gennemsigtighed */

Prøv det selv

RGB-farver

RGB-farveværdier består af rgb() funktionenSpecificer, syntaxen er som følger:

rgb(red, green, blue)

Hver parameter (red, green, blueDefinerer intensiteten af farven, som kan være et heltal mellem 0 og 255 eller en procentværdi (fra 0% til 100%).

For eksempel, værdien rgb(0,0,255) vises som blå, fordi blue-tilstanden er sat til sin højeste værdi (255), mens de andre parametre er sat til 0.

Derudover definerer følgende værdier den samme farve: rgb(0,0,255) og rgb(0%,0%,100%).

Eksempel

Definere forskellige RGB-farver:

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

Prøv det selv

RGBA-farve

RGBA-farveværdien er en udvidelse af RGB-farveværdien, den har en Alpha-kanal - specificerer objektets uigennemskinnelighed.

RGBA-farver gennem rgba() funktionenSpecificer, syntaxen er som følger:

rgba(red, green, blue, alpha)

alpha Parametrene er tal mellem 0.0 (fuldstændig gennemsigtig) og 1.0 (fuldstændig uigennemskinnelig).

Eksempel

Definere forskellige RGB-farver med uigennemskinnelighed:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* Rød med uigennemskinnelighed */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* Grøn med uigennemskinnelighed */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* Blå med uigennemskinnelighed */

Prøv det selv

HSL-farve

HSL refererer til farvetone (hue), satuation (saturation) og lysstyrke (lightness) - en cirkulær koordinatsystem repræsentation af farve.

Brug hsl() funktionenSpecificer HSL-farveværdien, syntaxen for denne funktion er som følger:

hsl(hue, saturation, lightness)

Farvetone er graderne på farvetonen (fra 0 til 360) - 0 (eller 360) er rød, 120 er grøn, 240 er blå.

Saturationsværdien er en procentværdi; 0% repræsenterer grå skygger, mens 100% er fuldfarve.

Lysstyrken er også en procentværdi; 0% er sort, 100% er hvid.

Eksempel

Definere forskellige HSL-farver:

#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%);}    /* Blød grøn */

Prøv det selv

HSLA-farver

HSLA-farveværdier er en udvidelse af HSL-farveværdier, der har en Alpha-kanal - der specificerer objektets uigennemskinnelighed.

HSLA-farveværdier består af hsla() funktionSpecificer, syntaxen for denne funktion er som følger:

hsla(hue, saturation, lightness, alpha)

alpha Parametrene er tal mellem 0.0 (fuldstændig gennemsigtig) og 1.0 (fuldstændig uigennemskinnelig).

Eksempel

Definer forskellige HSL-farver med uigennemskinnelighed:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* Uigennemskinnelig grøn */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* Uigennemskinnelig lys grøn */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* Uigennemskinnelig mørke grøn */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* Uigennemskinnelig blød grøn */

Prøv det selv

Prædefinerede/oversærbrowsere farvenavne

HTML og CSS farve规范中 prædefinerer 140 farvenavne.

For eksempel:blue、red、coral、brown osv.:

Eksempel

Definer forskellige farvenavne:

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

Prøv det selv

Listen over alle prædefinerede navne kan findes i vores referencehåndbog over farvenavne.

currentcolor nøgleord

currentcolor Nøgleord henviser til elementets color egenskab.

Eksempel

Følgende <div>-elementets kantfarve vil være blå, fordi <div>-elementets tekstfarve er blå:

#myDIV {
  color: blue; /* Blå tekstfarve */
  border: 10px solid currentcolor; /* Blå kantfarve */
}

Prøv det selv