06. Color

⬅️ CSS

• 🔗 from here

Hex

• you can add alpha values to hex codes! #00000080 (black with 50% transparency)
• 0% alpha—which is fully transparent—is 00: #00000000
• 50% alpha is 80: #00000080
• 75% alpha is BF: #000000BF

rgb

• rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5)
  (or, more supported:)
• rgba(0, 0, 0, 50%) or rgba(0, 0, 0, 0.5)
• Commas were removed from the rgb() and hsl() notation because newer color functions, such as lab() and lch() use spaces instead of commas as a delimiter (new color types).

HSL

• HSL stands for hue, saturation and lightness
• Hue describes the value on the color wheel
• Saturation is how vibrant the selected hue is (saturation 0% is grayscale)
• Lightness describes the scale from black to white (100% is white)
• hsl(0 0% 0%) or hsl(0deg 0% 0%)
• to add alpha: hsl(0 0% 0% / 50%) or hsl(0 0% 0% / 0.5).
• Using the hsla() function: hsla(0, 0%, 0%, 50%) or hsla(0, 0%, 0%, 0.5).

Color keywords

• There are 148 named colors in CSS.
• all color keywords are case-insensitive
• transparent is a fully transparent color. It is also the initial value of background-color
• currentColor is the contextual computed dynamic value of the color property.

Where?

• color
• text-shadow
• text-decoration-color
• background
• background-color
• linear-gradient
• border-color
• outline-color
• box-shadow