TIL5 - CSS - Colors

CSS Colors

1. Color in CSS

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)

2. Color Keywords

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

3. RGB

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

4. HSL

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

5. Opacity

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)