Zákonné hodnoty barev CSS
CSS barvy
Barvy v CSS lze zadat následujícími metodami:
- Hexadecimální barvy
- Hexadecimální barvy s průhledností
- RGB barvy
- RGBA barvy
- HSL barvy
- Barvy HSLA
- Názvy barev předdefinovaných/různých prohlížečů
- S
currentcolor
klíčovým slovem
Hexadecimální barvy
Hexadecimální barva je určena pomocí: #RRGGBB, kde RR (červená), GG (zelená) a BB (modrá) hexadecimální celá čísla určují složky barvy. Všechny hodnoty musí být mezi 00 a FF.
Například hodnota #0000ff je vykreslena jako modrá, protože modrá složka je nastavena na nejvyšší hodnotu (ff) a ostatní jsou nastaveny na 00.
Příklad
Definujte různé HEX barvy:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Hexadecimální Barvy S Průhledností
Hexadecimální barva je určena pomocí: #RRGGBB. Chcete-li přidat průhlednost, přidejte další dvě číslice mezi 00 a FF.
Příklad
Definujte různé HEX barvy s průhledností:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
Barvy RGB
Hodnota barvy RGB je určena funkcí rgb() , která má následující syntaxi:
rgb(red, green, blue)
Každý parametr (červená, zelená a modrá) definuje intenzitu barvy a může to být celé číslo mezi 0 a 255 nebo procentuální hodnota (od 0 % do 100 %).
Například hodnota rgb(0,0,255) je vykreslena jako modrá, protože modrý parametr je nastaven na nejvyšší hodnotu (255) a ostatní jsou nastaveny na 0.
Také následující hodnoty definují stejnou barvu: rgb(0,0,255) a rgb(0%,0%,100%).
Příklad
Definujte různé barvy RGB:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
Barvy RGBA
Hodnoty barev RGBA jsou rozšířením hodnot barev RGB o alfa kanál – který určuje neprůhlednost objektu.
Barva RGBA je určena funkcí rgba() , která má následující syntaxi:
rgba(red, green, blue, alpha)
Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).
Příklad
Definujte různé barvy RGB s neprůhledností:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
Barvy HSL
HSL je zkratka pro odstín, sytost a světlost – a představuje reprezentaci barev ve válcových souřadnicích.
Hodnota barvy HSL je určena funkcí hsl() , která má následující syntaxi:
hsl(hue, saturation, lightness)
Odstín je stupeň na barevném kole (od 0 do 360) - 0 (nebo 360) je červená, 120 je zelená, 240 je modrá. Sytost je procentuální hodnota; 0 % znamená odstín šedé a 100 % je plná barva. Lehkost je také procentuální; 0 % je černá, 100 % je bílá.
Příklad
Definujte různé barvy HSL:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Barvy HSLA
Hodnoty barev HSLA jsou rozšířením hodnot barev HSL o alfa kanál – který specifikuje neprůhlednost objektu.
Hodnota barvy HSLA je určena funkcí hsla() , která má následující syntaxi:
hsla(hue, saturation, lightness, alpha)
Parametr alfa je číslo mezi 0,0 (plně průhledné) a 1,0 (plně neprůhledné).
Příklad
Definujte různé barvy HSL s neprůhledností:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Názvy barev předdefinovaných/různých prohlížečů
Ve specifikaci barev HTML a CSS je předdefinováno 140 názvů barev.
Například: blue
, red
, coral
, brown
atd.:
Příklad
Definujte názvy různých barev:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Seznam všech předdefinovaných názvů naleznete v naší Referenční příručce názvů barev .
Klíčové slovo aktuální barva
Klíčové currentcolor
slovo 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 */
}