CSS Color

Colors in CSS

The CSS color property specifies the color of the text. One method of specifying the color of the text is using a color name: like red, green, blue, etc. We can define the color of an element by using the following ways-              

i. RGB format
ii. RGBA format inColor
iii. Hexadecimal notation in CSS Color
iv. HSL
v. HSLA
vi. Built-in color


1. RGB Format in CSS color

RGB defines the individual values for Red, Green, and Blue. It’s range is from 0 to 250.

Syntax :              

color: rgb(R, G, B);

2. RGBA Format

It is almost similar to RGB format except that RGBA contains A (Alpha) that specifies the element’s transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 is for fully transparent, and 1.0 is for not transparent.

Syntax:

color:rgba(R, G, B, A);

3. Hexadecimal notation:

Hexadecimal can be defined as a six-digit color representation. This notation starts with the # symbol followed by six characters ranges from 0 to F. In hexadecimal notation, the first two digits represent the red (RR) color value, the next two digits represent the green (GG) color value, and the last two digits represent the blue (BB) color value.

Syntax:

color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

4. Short Hex codes:

It is a short form of hexadecimal notation in which every digit is recreated to arrive at an equivalent hexadecimal value.

The black color notation in short hex is #000, and the white color notation in short hex is #FFF. Some of the codes in short hex are #F00, #0F0, #0FF, #FF0, and many more.


5. Hue, Saturation, Lightness (HSL)

It is a short form of Hue, Saturation, and Lightness. Let’s understand them individually.</p>

a. Hue

It can be defined as the degree on the color wheel from 0 to 360. 0 represents red, 120 represents green, 240 represents blue.

b. Saturation

It takes value in percentage in which 100% represents fully saturated, i.e., no shades of gray, 50% represent 50% gray, but the color is still visible, and 0% represents fully unsaturated, i.e., completely gray, and the color is invisible.

c. Lightness:

The lightness of the color can be defined as the light that we want to provide the color in which 0% represents black (there is no light), 50% represents neither dark nor light, and 100% represents white (full lightness).

Syntax:

color:hsl(H, S, L);

6. HSLA in CSS Color

It is entirely similar to HSL property, except that it contains A (alpha) that specifies the element’s transparency. The value of alpha is in the range 0.0 to 1.0, in which 0.0 indicates fully transparent, and 1.0 indicates not transparent.

Syntax:

color:hsla(H, S, L, A);

7. Built-in Color

As its name implies, built-in color means the collection of previously defined colors that are used by using a name such as red, blue, green, etc.

Syntax:

color: color-name;

Let’s see the list of built-in colors along with their decimal and hexadecimal values.

S.no.Color nameHexadecimal ValueDecimal Value or rgb() value
1.Red#FF0000rgb(255,0,0)
2.Orange#FFA500rgb(255,165,0)
3.Yellow#FFFF00rgb(255,255,0)
4.Pink#FFC0CBrgb(255,192,203)
5.Green#008000rgb(0,128,0)
6.Violet#EE82EErgb(238,130,238)
7.Blue#0000FFrgb(0,0,255)
8.Aqua#00FFFFrgb(0,255,255)
9.Brown#A52A2Argb(165,42,42)
10.White#FFFFFFrgb(255,255,255)
11.Gray#808080rgb(128,128,128)
12.Black#000000rgb(0,0,0)
List of built-in colors along with their decimal and hexadecimal values

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *