CSS Colors

CSS-ondersteuning 140 verschillende kleurnamenen ook hexadecimale waarden, RGB-waarden, RGBA-waarden, HSL-waarden, HSLA-waarden en ondoorzichtigheid.

RGBA-kleuren

RGBA-kleurenwaarde is een uitbreiding van RGB-kleurenwaarden, met een alpha-kanaal - dit kanaal bepaalt de ondoorzichtigheid van de kleur.

RGBA-kleurenwaarde is gedefinieerd als: rgba(rood, groen, blauw, alpha) alpha De parameter is een getal tussen 0.0 (volledig doorschijnend) en 1.0 (volledig ondoorzichtig).

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

Hier is een voorbeeld die verschillende RGBA-kleuren definieert:

Voorbeeld

#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 verwijst naar kleurtoon, verzadiging en helderheid (Hue, Saturation en Lightness).

De HSL-kleurenwaarde is gedefinieerd als: hsl(hue, saturation, lightness).

De kleurtoon is het graden op de kleurenhoek (van 0 tot 360):

  • 0 (of 360) is rood
  • 120 is groen
  • 240 is blauw

De verzadiging is ook een percentagewaarde: 100% is volledig kleur.

De helderheid is ook een percentagewaarde: 0% is donker (zwart), terwijl 100% wit is.

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

Hier zijn enkele voorbeelden van verschillende HSL-kleuren:

Voorbeeld

#p1 {achtergrondkleur: hsl(120, 100%, 50%);}  /* Groene kleur */
#p2 {achtergrondkleur: hsl(120, 100%, 75%);}  /* Lichte groene kleur */
#p3 {achtergrondkleur: hsl(120, 100%, 25%);}  /* Donkere groene kleur */
#p4 {achtergrondkleur: hsl(120, 60%, 70%);}   /* Fijne groene kleur */

Probeer het zelf

HSLA-kleur

De HSLA-kleur is een uitbreiding van de HSL-kleur met een Alpha-kanaal - het bepaalt de ondoorzichtigheid van de kleur.

De waarde van de HSLA-kleur wordt bepaald door de volgende parameters: hsla(hue, saturation, lightness, alpha)，waarbij de alpha parameter de ondoorzichtigheid definieert. De alpha parameter is een getal tussen 0.0 (volledig doorzichtig) en 1.0 (geen doorzichtigheid).

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

Hier zijn enkele voorbeelden van verschillende HSLA-kleuren:

Voorbeeld

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

Probeer het zelf

Ondoorzichtigheid

CSS opacity De eigenschap stelt de ondoorzichtigheid van het hele element in (de achtergrondkleur en de tekst zullen ondoorzichtig/doorzichtig zijn).

opacity De waarde van het eigenschap moet een getal zijn tussen 0.0 (volledig doorzichtig) en 1.0 (geen doorzichtigheid).

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

Let op, de tekst hierboven zal ook transparant/ondoorzichtig zijn!

De volgende voorbeelden tonen verschillende elementen met ondoorzichtigheid:

Voorbeeld

#p1 {achtergrondkleur:rgb(255,0,0);doorzichtigheid:0.6;}  /* Rood met ondoorzichtigheid */
#p2 {achtergrondkleur:rgb(0,255,0);doorzichtigheid:0.6;}  /* Groen met ondoorzichtigheid */
#p3 {achtergrondkleur:rgb(0,0,255);doorzichtigheid:0.6;}  /* Blauw met ondoorzichtigheid */

Probeer het zelf