KandZ – Tuts

We like to help…!

CSS 4 💻 colors and color properties

everything about colors and color properties in CSS
color, background-color, filter, border-color, rgb, hsl, rgba and more

Colors in CSS can be specified by predefined names →
red, blue, green, yellow, orange, purple, black, white, gray and more
by hexadecimal values → #00FF00, by rgb → rgb(0,0,0) and hsl → (0, 100%, 50%)
rgb uses red, green, blue values from 0 to 255
hsl uses hue (around the color wheel), saturation(how vibrant is it) ...
...and lightness( how much white or black is in it)
you can also use rgba and hsla to specify the opacity, 0 → fully transparent and 1 → fully opaque
rgba(255, 0, 0, 0.5) and hsla(22, 55%, 64%, 0.7)

color → sets the text color
background-color → sets tje background color
border-color → sets the border color
text-shadow → adds shadow to a text and you can specify the color too
box-shadow → adds shadow to an element and you can specify the color too
opacity → specifies the element's opacity values can be from 0 to 1
caret-color → is used to set the color of the text input cursor

CSS supports gradients backgrounds
background-image → adds a background image, but you can also specify a color
linear-gradient → defines a linear-falling gradient from left to right, top to bottom etc.
radial-gradient → creates a radial gradient like a circle or an ellipse
conic-gradient → creates a conical gradient from the centre towards a specific angle
you can also have repeating gradients. For that exist the properties...
repeating-linear-gradient, repeating-radial-gradient

filter → applies graphical effects like blur , contrast and more
hue-rotate → rotates the color wheel by a specified angle
brightness → changes the brightness
contrast → changes the brightness
grayscale → convets an image to a grayscale
saturate → changes the saturation
invert → inverts the colors
sepia → converts an image to sepia tones

Leave a Reply