CSS Colors Tutorial
1. Color Names:
| Color | Description | Example Usage |
|---|---|---|
| Red | Red color using color name |
Red
|
| Blue | Blue color using color name |
Blue
|
| Green | Green color using color name |
Green
|
2. Hexadecimal Notation:
| Color | Description | Example Usage |
|---|---|---|
| #FF0000 | Red color using hexadecimal notation |
#FF0000
|
| #00FF00 | Green color using hexadecimal notation |
#00FF00
|
| #0000FF | Blue color using hexadecimal notation |
#0000FF
|
| #FFFFFF | White color using hexadecimal notation |
#FFFFFF
|
| #000000 | Black color using hexadecimal notation |
#000000
|
3. RGB and RGBA Notation:
| Color | Description | Example Usage |
|---|---|---|
| rgb(255, 0, 0) | Red color using RGB notation |
rgb(255, 0, 0)
|
| rgb(255, 255, 0) | Yellow color using RGB notation |
rgb(255, 255, 0)
|
| rgba(0, 0, 255) | Blue color using RGBA notation |
rgba(0, 0, 255)
|
| rgba(0, 0, 0) | Black color using RGBA notation |
rgba(0, 0, 0)
|
| rgba(255, 255, 255) | White color using RGBA notation |
rgba(255, 255, 255)
|
| rgba(255, 0, 0, 0.5) | Semi-transparent red color |
rgba(255, 0, 0, 0.5)
|
| rgba(255, 88, 60, 0.1) | Semi-transparent orange color |
rgba(255, 88, 60, 0.1)
|
4. HSL and HSLA Color Model:
HSL stands for Hue, Saturation, and Lightness, and it is a color model used in CSS to define colors. Here’s how HSL works:
Hue (H):
The hue represents the color itself and is measured in degrees on a color wheel. It ranges from 0 to 360, where 0 and 360 represent red, 120 represents green, and 240 represents blue. The hues in between create different colors.
Saturation (S):
The saturation represents the intensity or purity of the color. It is measured as a percentage from 0% to 100%. A saturation of 0% results in grayscale, while 100% provides full color intensity.
Lightness (L):
The lightness determines the overall lightness or darkness of the color. It is also measured as a percentage, ranging from 0% (black) to 100% (white). A lightness of 50% represents the color at its normal level of brightness.
Alpha value (A):
It represents the color’s transparency. It is specified as a number between 0 and 1, where 0 is fully transparent (completely see-through) and 1 is fully opaque (completely solid). By adjusting the alpha value, you can control the level of transparency for the color.
| Color | Description | Example Usage |
|---|---|---|
| hsl(0, 100%, 50%) | Red color using HSL notation |
hsl(0, 100%, 50%)
|
| hsl(120, 100%, 50%) | Green color using HSL notation |
hsl(120, 100%, 50%)
|
| hsl(240, 100%, 50%) | Blue color using HSL notation |
hsl(240, 100%, 50%)
|
| hsla(0, 100%, 50%, 0.8) | Semi-transparent red color using HSLA notation |
hsla(0, 100%, 50%, 0.8)
|
| hsla(120, 100%, 50%, 0.5) | Semi-transparent green color using HSLA notation |
hsla(120, 100%, 50%, 0.5)
|
| hsla(240, 100%, 50%, 0.1) | Semi-transparent blue color using HSLA notation |
hsla(240, 100%, 50%, 0.1)
|
5. Custom Color Examples:
| Color | Description | Example Usage |
|---|---|---|
| #FF8800 | Orange color using hexadecimal notation |
#FF8800
|
| rgb(128, 64, 0) | Brown color using RGB notation |
rgb(128, 64, 0)
|
| rgba(0, 255, 0, 0.3) | Semi-transparent green color using RGBA notation |
rgba(0, 255, 0, 0.3)
|
| hsl(240, 50%, 70%) | Light blue color using HSL notation |
hsl(240, 50%, 70%)
|
| hsla(180, 100%, 25%, 0.8) | Semi-transparent dark orange color using HSLA notation |
hsla(180, 100%, 25%, 0.8)
|