Návod na barvy
Barvy jsou zobrazeny kombinací ČERVENÉHO, ZELEného a MODRÉHO světla.
Názvy barev
Pomocí CSS lze barvy nastavit pomocí názvů barev:
Příklad
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
Hodnoty barev CSS
Pomocí CSS lze barvy specifikovat různými způsoby:
- Podle názvů barev
- Jako hodnoty RGB
- Jako hexadecimální hodnoty
- Jako hodnoty HSL (CSS3)
- Jako hodnoty HWB (CSS4)
- S
currentcolorklíčovým slovem
Barvy RGB
Hodnoty barev RGB jsou podporovány ve všech prohlížečích.
Hodnota barvy RGB je specifikována pomocí: rgb ( ČERVENÁ , ZELENÁ , MODRÁ ).
Každý parametr definuje intenzitu barvy jako celé číslo mezi 0 a 255.
Například rgb(0,0,255) je vykreslen jako modrý, protože modrý parametr je nastaven na nejvyšší hodnotu (255) a ostatní jsou nastaveny na 0.
Příklad
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
Odstíny šedé jsou často definovány pomocí stejných hodnot pro všechny 3 světelné zdroje:
Příklad
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Hexadecimální barvy
Hexadecimální hodnoty barev jsou také podporovány ve všech prohlížečích.
Hexadecimální barva je určena pomocí: # RR GG BB .
RR (červená), GG (zelená) a BB (modrá) jsou hexadecimální celá čísla mezi 00 a FF určující intenzitu barvy.
Například #0000FF se zobrazí jako modrá, protože modrá složka je nastavena na nejvyšší hodnotu (FF) a ostatní jsou nastaveny na 00.
Příklad
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Odstíny šedé jsou často definovány pomocí stejných hodnot pro všechny 3 světelné zdroje:
Příklad
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
Velká nebo malá písmena?
K zadání hexadecimálních hodnot můžete použít velká nebo malá písmena.
Malá písmena se píší snadněji. Velká písmena jsou lépe čitelná.
Názvy barev
CSS podporuje 140 standardních názvů barev.
V další kapitole najdete kompletní abecední seznam názvů barev s hexadecimálními hodnotami:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
Klíčové slovo aktuální barva
Klíčové currentcolorslovo odkazuje na hodnotu vlastnosti color prvku.
Příklad
Barva ohraničení následujícího prvku <div> bude modrá, protože barva textu prvku <div> je modrá:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}