Kleure Tutoriaal
Kleure word vertoon deur ROOI, GROEN en BLOU lig te kombineer.
Kleur Name
Met CSS kan kleure gestel word deur kleurname te gebruik:
Voorbeeld
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
CSS-kleurwaardes
Met CSS kan kleure op verskillende maniere gespesifiseer word:
- Deur kleurname
- As RGB-waardes
- As heksadesimale waardes
- As HSL-waardes (CSS3)
- As HWB-waardes (CSS4)
- Met die
currentcolorsleutelwoord
RGB-kleure
RGB-kleurwaardes word in alle blaaiers ondersteun.
'n RGB-kleurwaarde word gespesifiseer met: rgb( ROOI , GROEN , BLOU ).
Elke parameter definieer die intensiteit van die kleur as 'n heelgetal tussen 0 en 255.
Byvoorbeeld, rgb(0,0,255) word as blou weergegee, want die blou parameter is op sy hoogste waarde (255) gestel en die ander is op 0 gestel.
Voorbeeld
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
Skakerings van grys word dikwels gedefinieer deur gelyke waardes vir al die 3 ligbronne te gebruik:
Voorbeeld
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Heksadesimale kleure
Heksadesimale kleurwaardes word ook in alle blaaiers ondersteun.
'n Heksadesimale kleur word gespesifiseer met: # RR GG BB .
RR (rooi), GG (groen) en BB (blou) is heksadesimale heelgetalle tussen 00 en FF wat die intensiteit van die kleur spesifiseer.
Byvoorbeeld, #0000FF word as blou vertoon, want die blou komponent is op sy hoogste waarde (FF) gestel en die ander is op 00 gestel.
Voorbeeld
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Skakerings van grys word dikwels gedefinieer deur gelyke waardes vir al die 3 ligbronne te gebruik:
Voorbeeld
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
Hoofletters of Kleinletters?
Jy kan hoofletters of kleinletters gebruik om heksadesimale waardes te spesifiseer.
Kleinletters is makliker om te skryf. Hoofletters is makliker om te lees.
Kleur Name
CSS ondersteun 140 standaard kleurname.
In die volgende hoofstuk sal jy 'n volledige alfabetiese lys van kleurname met heksadesimale waardes vind:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
Die huidige kleur sleutelwoord
Die currentcolorsleutelwoord verwys na die waarde van die kleureienskap van 'n element.
Voorbeeld
Die randkleur van die volgende <div>-element sal blou wees, want die tekskleur van die <div>-element is blou:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}