Web Development

CSS3 Colors

Defining colors in CSS

Color Formats

color: red; # named color
color: #ff0000; # hex color
color: #f00; # short hex
color: rgb(255, 0, 0); # RGB
color: rgba(255, 0, 0, 0.5); # RGB with alpha

HSL Colors

color: hsl(0, 100%, 50%); # hue, saturation, lightness
color: hsla(0, 100%, 50%, 0.5); # HSL with alpha

Gradients

background: linear-gradient(to right, red, blue); # linear
background: linear-gradient(45deg, red, blue); # angled
background: radial-gradient(circle, red, blue); # radial

CSS Variables

:root { # define variables
    --main-color: #3498db;
    --text-color: #333;
}
color: var(--main-color); # use variable