CSS Colors | Border | Background

CSS Color property is used to set the color of HTML elements. This property is used to set font color, background color etc.

Color of an element can be defined in the following ways:

• Built-In Color
• RGB Format
• RGBA Format
• Hexadecimal Notation
• HSL
• HSLA 

Built-In Color: These are a set of predefined colors that are used by its name. For example: red, blue, green etc.

Syntax:

h2 {

  color: red;

}

See the Pen CSS Colors by PANKAJ (@pankkap) on CodePen.

RGB Format: The RGB(Red, Green, Blue) format is used to define the color of an HTML element by specifying the R, G, B values range between 0 to 255. For example: RGB value of Red color is (255, 0, 0), Green color is (0, 255, 0), Blue color is (0, 0, 255) etc.
Syntax:

h1 {

  color: rgb(150, 0, 0);

}

RGBA Format: The RGBA format is similar to the RGB, but the difference is RGBA contains A (Alpha) which specify the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents not transparent.
Syntax:

h1 {

  color: rgba(150, 0, 0, 0.5);

}

Hexadecimal Notation: The hexadecimal notation begins with # symbol followed by 6 characters each range from 0 to F. For example: Red #FF0000, Green #00FF00, Blue #0000FF etc.
Syntax:

h1 {

  color: #960000;

}

HSL: HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical coordinate system.

• Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120 represents green and 240 represents blue color.
• Saturation: It takes percentage value, where 100% represents completely saturated, while 0% represents completely unsaturated (gray).
• Lightness: It takes percentage value, where 100% represents white, while 0% represents black.

Syntax:

h1 {

  color: hsl(0, 100%, 29%);

}

HSLA: The HSLA color property is similar to HSL property, but the difference is HSLA contains A (Alpha) which specify the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents not transparent.
Syntax:

h1 {

  color: hsla(0, 100%, 29%, 0.5);

}

Text Color: It is used to set the color of the text.

Syntax:

h1 {

  color: color_name;

}

Background Color: It is used to set the background color of an HTML element.

Syntax:

h2 {

  background-color: color_name;

}

See the Pen Background-Color by PANKAJ (@pankkap) on CodePen.

Border Color: It is used to set the border color of an element. Border-style is used to set the border type.

Syntax:

h2 {

    border-style:solid/dashed/dotted;

    border-color:color_name;

}

See the Pen CSS Border by PANKAJ (@pankkap) on CodePen.

CSS border-radius

The border-radius property defines the radius of the element's corners. This property allows you to add rounded corners to elements! This property can have from one to four values. Here are the rules:

• Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):
• Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):
• Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):
• One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally:

See the Pen Background-Size by PANKAJ (@pankkap) on CodePen.

 

List of Colors: Following is the list of few CSS colors.

COLOR NAME	#HEX(RGB)	DECIMAL(RGB)	COLOR
Red	#FF0000	255, 0, 0
Pink	#FFC0CB	255, 192, 203
Orange	#FFA500	255, 165, 0
Yellow	#FFFF00	255, 255, 0
Violet	#EE82EE	238, 130, 238
Green	#008000	0, 128, 0
Aqua	#00FFFF	0, 255, 255
Blue	#0000FF	0, 0, 255
Brown	#A52A2A	165, 42, 42
White	#FFFFFF	255, 255, 255
Gray	#808080	128, 128, 128
Black	#000000	0, 0, 0

Color Picker

Select Color

Note: This color picker will help you to select RGB, HSL, and Hex Colors.

CSS Backgrounds

The CSS background properties are used to define the background effects for elements. In this section, you will learn about the following CSS background properties:

• background-color and Opacity

• background-image

• background-repeat

• background-attachment

• background-position

• background-size

CSS background-color with Opacity / Transparency

The background-color property specifies the background color of an element. The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent.

See the Pen Background-color | opacity by PANKAJ (@pankkap) on CodePen.

CSS Background Image

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

See the Pen Background-image by PANKAJ (@pankkap) on CodePen.

CSS background-repeat

By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, or they will look strange, like this:

See the Pen Background No-repeat by PANKAJ (@pankkap) on CodePen.

CSS Background Position

Determines the position of the background image. For more information, see background-position. The css syntax is:

background-position: value;

See the Pen Background-Position by PANKAJ (@pankkap) on CodePen.

CSS Background Size

The background-size property specifies the size of the background images.

There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma). The CSS Syntax:

background-size: auto|length|cover|contain|initial|inherit; 

See the Pen Background-Size by PANKAJ (@pankkap) on CodePen.

CSS Background Attachment

Determines whether or not the background image scrolls with the outer container. For more information, see background-attachment. The background image is fixed - it doesn't scroll with its outer container. The CSS Syntax:

background-attachment: scroll|fixed|local|initial|inherit;

See the Pen Background-Attachmrnt by PANKAJ (@pankkap) on CodePen.