06b. Kolor - hex, rgb, rgba, hsl, hsla

CSS Wynik działania
Określenie koloru poprzez nazwę
p{
    background-color:yellow;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.

Określenie koloru poprzez wartości hex
p{
    background-color:#ffff00;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.

Określenie koloru poprzez określenie wartości rgb
p{
    background-color:rgb(255,255,0);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.

Określenie koloru poprzez określenie wartości rgba (nieprzezroczystość)
p{
    background-color:rgba(255,255,0,1);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.

Określenie koloru poprzez określenie wartości rgba (brak przezroczystości)
p{
    background-color:rgba(255,255,0,1);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.

Określenie koloru poprzez określenie wartości rgba (półprzezroczystość)
p{
    background-color:rgba(255,255,0,.5);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.

Określenie koloru poprzez określenie wartości rgba (pełna przezroczystość)
p{
    background-color:rgba(255,255,0,0);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.

Określenie koloru poprzez określenie wartości hsl
p{
    background-color:hsl(60,100%,50%);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.

Określenie koloru poprzez określenie wartości hsla (brak przezroczystości)
p{
    background-color:hsla(60,100%,50%,1);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.

Określenie koloru poprzez określenie wartości hsla (półprzezroczystość)
p{
    background-color:hsla(60,100%,50%,.5);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.

Określenie koloru poprzez określenie wartości hsla (pełna przezroczystości)
p{
    background-color:hsla(60,100%,50%,0);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor turpis. Nulla facilisi. Maecenas viverra id dolor vel hendrerit. Integer sed pulvinar leo, vitae venenatis enim.