CSS Colors Values Basic

Category: Web Development & Approved by devanshchakravarti83@gmail.com On January-16-2021 17:41:28

CSS Colors Values Basic



Using colors in CSS is pretty much easy. There are different ways to use colors values in CSS, all the various color formats in CSS, including Hex color codes, HTML color names, and RGB and HSL values.

Color Names
In CSS, a color can be specified by using a predefined color name, and this is the easier to understand. You have to use colors name as value in CSS color properties.
Currently 140 color names are supported in all latest version of browsers.
Example:
p {
color: orange;
}

Hex Color Codes
In CSS, Hex Color Code is the common method of adding color to HTML document. It is also refer as hexadecimal code, value of colors is written in form:
#rrggbb

Where ”rr” is for red, ”gg” is for green, and ”bb” is for blue. The values of these color lies between ”00” and ”ff”, where ”00” is the lowest value and ”ff” is the highest value.
The colors code in hexadecimal are as follows:
#ff0000 – red
#00ff00 – green
#0000ff – blue
#000000 – black
#ffffff – white
Similarly for other colors.

Example:
p {
color: #ff4500; // OrangeRed
}

RGB color values
RGB stands for ”Red, Green and Blue”. In CSS, RGB colors can be used by wrapping the values in parentheses and prefixing them with a lowercase 'rgb'.
rgb(red, green, blue)

Where each color density lies between ”0” and ”255”, and ”0” is the lowest value of color and ”255” is the highest value of color.
The colors code values in rgb format are as follows:
rgb(255,0,0) – red
rgb(0,255,0) – green
rgb(0,0,255) – blue
rgb(0,0,0) – black
rgb(255,255,255) – white
Similarly for other colors,

Example:
p {
color: rgb(255, 69, 0); // OrangeRed
}

RGBA color values
RGBA stands for ”Red, Green, Blue, and Alpha”. In RGB color values Alpha part is also added where Alpha value specify the opacity of a color.
rgba(red, green, blue, alpha)

Alpha value is a number between ”0.0” and ”1”, and rgba ”0.0” value is the fully transparent and ”1” value is the not transparent.

Example:
p {
color: rgb(255, 69, 0, 0.2); // OrangeRed with 20% transparency
}

HSL color values
HSL, which stands for Hue, Saturation and Lightness, another color system used in many applications. Hue is measured in degrees from 0 – 360, while Saturation and Lightness use a scale of 0% – 100%. In CSS, HSL can be easily implemented following a syntax similar to RGB but prefixed instead with 'hsl'.
hsl(hue, saturation, lightness)

When Hue value is 0 – red, 120 – green and 240 – blue, for saturation value at 0% - shade of gray and 100% - full color, and last lightness value at 0% - black, 50% - neither light nor dark and 100% - white.

Example:
p {
color: hsl(0, 100%, 50%); // red
}

HSLA color values
HSLA, which stands for Hue, Saturation, Lightness and Alpha, similarly as Alpha added to RGB.
hsla(hue, saturation, lightness, alpha)

Alpha value is a number between ”0.0” and ”1”, and rgba ”0.0” value is the fully transparent and ”1” value is the not transparent.

Example:
p {
color: hsl(0, 100%, 50%, 0.5); // red with 50% transparency.
}


We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here

Note: content data are taken from various documentation files



Comments

Share your thoughts about this post
web counter