In CSS, the color
data type represents a color in the sRGB color space.
Color can be defined in any of the following 3 ways:
1. Color Keyword
2. RGB
3. HSL
There are two main color properties in CSS:
color
--> foreground color (for text)background-color
--> background color (for background)
CSS has a set of 147 built-in color keywords that can be used to define a color.
The list of all 147 color keywords can be found in the CSS documentation page for colors:
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
Red, Green, Blue
2 methods of denoting RGB colors:
- #-hexadecimal
- rgb()
#-hexadecimal
- format: '#' + 6 characters, with 3 pairs of 2 characters each representing r, g, and b
- if each pair of characters have the same characters, the format can be reduced to '#' + 3 characters, 1 character for each r, g, and b
- the hexadecimal system uses a 16-digit system (0-15)
> numbers 10-15 are represented by A-F
> thus the hexadecimal system used both numbers and letters A-F- ex)
<image source: codecademy.com>
rgb()
- format: rgb(r, g, b), where 'r', 'g', and 'b' are each a number between 0-255
- ex)
rgb(255, 255, 255) rgb(0, 0, 0) rgb(143, 188, 143)
Whether you use the #-hexadecimal or rgb() system, they represent the same set of color scheme
Hue, Saturation, Lightness
HSL is different from RGB and has follows the following system:
<image source: codecademy.com>
- format: hsl(h, s, l) where
> 'h' is a number between 0 and 360, representing the degree of Hue
> 's' is a percentage (0-100%), representing the Saturation of the hue
> 'l' is a percentage (0-100%), representing the Lightness of the hue- Hue is the actual color
- Saturation is the intensity or purity of the color
> as saturation goes to 100%, the color becomes more rich
> as saturation goes to 0%, the color becomes more gray- Lightness is how light or dark a color is
> 50% lightness is the normal color for the particular hue
> as lightness goes to 100%, the color becomes lighter. 100% lightness results in white
> as lightness goes to 0%, the color becomes darker. 0% lightness results in black
You can also control the transparency of the color with opacity
rgba() and hsla()
- for both rgb and hsl color systems, you can add a fourth 'alpha' value to also control the color's opacity
- the alpha value is a percentage value between 0 and 1
> 0% or 0.0 represents full transparency (zero opacity)
> 100% or 1.0 represents zero transparency (full opacity)- ex)
rgba(255, 255, 255, 0.7) hsla(240, 80%, 60%, 0.3)