Legitieme CSS-kleurenwaarden

CSS Kleur

Kleuren in CSS kunnen worden gespecificeerd op de volgende manieren:

  • Hexadecimale kleuren
  • Hexadecimale kleuren met transparens
  • RGB-kleuren
  • RGBA-kleuren
  • HSL-kleuren
  • HSLA-kleuren
  • Vooraf gedefinieerde/kruisbrowserkleurnamen
  • Gebruik currentcolor Sleutelwoorden

Hexadecimale kleuren

Gebruik #RRGGBB om een hexadecimale kleur te specificeren, waarbij RR (rood), GG (groen) en BB (blauw) hexadecimale integers de componenten van de kleur specificeren. Alle waarden moeten tussen 00 en FF liggen.

Bijvoorbeeld, de waarde #0000ff wordt weergegeven als blauw, omdat de blauwe component is ingesteld op de hoogste waarde (ff), terwijl de andere componenten op 00 zijn ingesteld.

Voorbeeld

Definieer verschillende HEX-kleuren:

#p1 {background-color: #ff0000;}   /* Rood */
#p2 {background-color: #00ff00;}   /* Groen */
#p3 {background-color: #0000ff;}   /* Blauw */

Probeer het zelf

Hexadecimale kleuren met transparens

Gebruik #RRGGBB om een hexadecimale kleur te specificeren. Om de transparantie te verhogen, voeg twee extra cijfers toe tussen 00 en FF.

Voorbeeld

Definieer een HEX-kleur met transparens:

#p1a {background-color: #ff000080;}   /* Rood met透明度 */
#p2a {background-color: #00ff0080;}   /* Groen met透明度 */
#p3a {background-color: #0000ff80;}   /* Blauw met透明度 */

Probeer het zelf

RGB-kleuren

RGB-kleurenwaarden worden bepaald door De rgb() functieBepaal, de syntaxis is als volgt:

rgb(rood, groen, blauw)

Elke parameter (rood, groen, blauwDefinieert de intensiteit van de kleur, wat een integer of een procentwaarde tussen 0 en 255 kan zijn (van 0% tot 100%).

Bijvoorbeeld, de waarde rgb(0,0,255) wordt weergegeven als blauw, omdat de blauwe parameter is ingesteld op de hoogste waarde (255), terwijl de andere parameters op 0 zijn ingesteld.

Daarnaast definiëren de volgende waarden dezelfde kleur: rgb(0,0,255) en rgb(0%,0%,100%).

Voorbeeld

Definieer verschillende RGB-kleuren:

#p1 {achtergrondkleur: rgb(255, 0, 0);}   /* rood */
#p2 {achtergrondkleur: rgb(0, 255, 0);}   /* groen */
#p3 {achtergrondkleur: rgb(0, 0, 255);}   /* blauw */

Probeer het zelf

RGBA-kleuren

RGBA-kleurvaleuws zijn een uitbreiding van RGB-kleurvaleuws, die een Alpha-kanaal hebben - ze specificeren de ondoorzichtigheid van het object.

RGBA-kleuren worden bepaald door rgba() functieBepaal, de syntaxis is als volgt:

rgba(rood, groen, blauw, alpha)

alpha De parameters zijn getallen tussen 0.0 (compleet transparant) en 1.0 (geen ondoorzichtigheid).

Voorbeeld

Definieer verschillende RGB-kleuren met ondoorzichtigheid:

#p1 {achtergrondkleur: rgba(255, 0, 0, 0.3);}   /* rood met ondoorzichtigheid */
#p2 {achtergrondkleur: rgba(0, 255, 0, 0.3);}   /* groen met ondoorzichtigheid */
#p3 {achtergrondkleur: rgba(0, 0, 255, 0.3);}   /* blauw met ondoorzichtigheid */

Probeer het zelf

HSL-kleuren

HSL staat voor hue (kleurtoon), saturatie (saturatie) en helderheid (lichtigheid) - een cilindrische coördinatenvertaling van de kleur.

Gebruik hsl() functieSpecificeer de HSL-kleurvaleuws, de syntaxis van deze functie is als volgt:

hsl(kleurtoon, verzadiging, lichtheid)

Hue is het aantal graden op de kleurenhoek (van 0 tot 360) - 0 (of 360) is rood, 120 is groen, 240 is blauw.

Saturatie is een percentueel getal; 0% betekent grijs schaduw, terwijl 100% volledig kleur is.

Helderheid is ook een percentage; 0% is zwart, 100% is wit.

Voorbeeld

Definieer verschillende HSL-kleuren:

#p1 {achtergrondkleur: hsl(120, 100%, 50%);}   /* groen */
#p2 {achtergrondkleur: hsl(120, 100%, 75%);}   /* licht groen */
#p3 {achtergrondkleur: hsl(120, 100%, 25%);}   /* diep groen */
#p4 {achtergrondkleur: hsl(120, 60%, 70%);}    /* Zachte groene kleur */

Probeer het zelf

HSLA-kleuren

HSLA-kleurenwaarden zijn een uitbreiding van HSL-kleurenwaarden, die een Alpha-kanaal bevatten - het specificeert de ondoorzichtigheid van het object.

HSLA-kleurenwaarden bestaan uit hsla() functieSpecificeer, de syntaxis van deze functie is als volgt:

hsla(kleurtoon, verzadiging, lichtheid, alpha)

alpha De parameters zijn getallen tussen 0.0 (compleet transparant) en 1.0 (geen ondoorzichtigheid).

Voorbeeld

Definieer verschillende HSL-kleuren met ondoorzichtigheid:

#p1 {achtergrondkleur: hsla(120, 100%, 50%, 0.3);}   /* Groene kleur met ondoorzichtigheid */
#p2 {achtergrondkleur: hsla(120, 100%, 75%, 0.3);}   /* Lichtgroene kleur met ondoorzichtigheid */
#p3 {achtergrondkleur: hsla(120, 100%, 25%, 0.3);}   /* Diepgroene kleur met ondoorzichtigheid */
#p4 {achtergrondkleur: hsla(120, 60%, 70%, 0.3);}    /* Doofgroene kleur met ondoorzichtigheid */

Probeer het zelf

Vooraf gedefinieerde/kruisbrowserkleurnamen

In de HTML- en CSS-kleurenstandaard zijn 140 kleurnamen vooraf gedefinieerd.

Bijvoorbeeld:blauwenroodenkoraalenbruin enz.:

Voorbeeld

Definieer verschillende kleurnamen:

#p1 {achtergrondkleur: blauw;}
#p2 {achtergrondkleur: rood;}
#p3 {achtergrondkleur: koraal;}
#p4 {achtergrondkleur: bruin;}

Probeer het zelf

Een lijst van alle vooraf gedefinieerde namen kunt u vinden in onze kleurennaamhandleiding.

currentcolor-sleutelwoord

currentcolor Citeer de waarde van de color-eigenschap van het element.

Voorbeeld

De randkleur van het volgende <div>-element zal blauw zijn, omdat de tekstkleur van het <div>-element blauw is:

#myDIV {
  color: blue; /* 蓝色文本色 */
  border: 10px solid currentcolor; /* 蓝色边框色 */
}

Probeer het zelf