JOSE GERVIC LABE, JR.
How To: Webpage Creation
<<< Previous · Entry List · Next >>>
#1066827 added March 24, 2024 at 6:23am
Restrictions: None
HTML Colors
HTML Colors
         
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.




Color Names
         
In HTML, a color can be specified by using a color name.


Example:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray


All modern browsers support the following 140 color names. This includes the following: Click this to view supported colors ▼


HTML Color Groups and Shades
         
Visit the page below to see all Color Groups and Color Shades:

 HTML Color Groups Open in new Window. [E]
HTML Color Groups
by GERVIC Author Icon




Colors RGB
         
RGB color values are supported in all browsers. An RGB color value is specified with:

rgb(red, green, blue)


Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).


Example:
<style>
div {
     background-color: rgb(0, 191, 255);
     color: rgb(255, 255, 255);
}
</style>




RGBA Color Values
         
RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color. An RGBA color value is specified with:


rgba(red, green, blue, alpha)


The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

Example:
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>




Colors HEX
         
Hexadecimal color values are supported in all browsers. A hexadecimal color is specified with:

#rrggbb


Where rr (red), gg (green) and bb (blue) are hexadecimal integers between 00 and ff, specifying the intensity of the color.

For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.

To display black, set all color parameters to 00, like this: #000000.

To display white, set all color parameters to ff, like this: #ffffff.


Example:
<style>
div {
     background-color: #00bfff;
     color: #ffffff;
}
</style>




HSL Colors
         
HSL color values are supported in Edge, Chrome, Firefox, Safari, Opera 10+, and in IE9+. HSL stands for Hue, Saturation, and Lightness. HSL color values are specified with:


hsl(hue, saturation, lightness)



Hue
Hue is a degree on the color wheel from 0 to 360. 0 (or 360) is red, 120 is green, 240 is blue.


Saturation
Saturation can be described as the intensity of a color. It is a percentage value from 0% to 100%.


100% is full color, no shades of gray.
50% is 50% gray, but you can still see the color.
0% is completely gray; you can no longer see the color.



Lightness
The lightness of a color can be described as how much light you want to give the color, where 0% means no light (dark), 50% means 50% light (neither dark nor light), and 100% means full light.


Example:
<h1 style="background-color:hsla(120, 100%, 50%, 0.2);">hsla(0, 100%, 50%, 0.2)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.4);">hsla(0, 100%, 50%, 0.4)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.6);">hsla(0, 100%, 50%, 0.6)</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.8);">hsla(0, 100%, 50%, 0.8)</h1>




Color Gradient

Example CSS Code:
div {
     background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}
© Copyright 2024 GERVIC (UN: gervic at Writing.Com). All rights reserved.
GERVIC has granted InkSpot.Com, its affiliates and its syndicates non-exclusive rights to display this work.
<<< Previous · Entry List · Next >>>
... powered by: Writing.Com
Online Writing Portfolio * Creative Writing Online