Understanding CSS Colors

RGB (Red, Green, Blue) is an additive color model where colors are created by combining different intensities of red, green, and blue light:

• Each component ranges from 0 to 255
• rgb(255,0,0) is pure red
• rgb(0,255,0) is pure green
• rgb(0,0,255) is pure blue
• rgb(255,255,255) is white
• rgb(0,0,0) is black

RGBA adds an alpha channel for transparency (0 = fully transparent, 1 = fully opaque)

Hexadecimal colors are a way to represent RGB values using base-16 numbers:

• Values range from 00 to FF (0-255 in decimal)
• #FF0000 is pure red
• #00FF00 is pure green
• #0000FF is pure blue
• Can be shortened to 3 digits if each pair is the same (#FF0000 → #F00)

HSL (Hue, Saturation, Lightness) is a more intuitive way to specify colors:

• Hue: Color wheel degree (0-360)
• Saturation: Color intensity (0% = gray, 100% = full color)
• Lightness: Brightness (0% = black, 100% = white)
• Common hue values: 0/360° = red, 120° = green, 240° = blue

currentColor: A dynamic value that represents the current color value of an element:

• Inherits the color property value from its parent or own color property
• Useful for maintaining color consistency across properties
• Can be used in borders, backgrounds, and other color properties

transparent: Represents a fully transparent color:

• Equivalent to rgba(0, 0, 0, 0)
• Commonly used for creating invisible backgrounds or borders
• Useful in animations and transitions

CSS provides various properties to apply colors to different aspects of elements:

• color: Sets text color
• background-color: Sets background color
• border-color: Sets border color
• outline-color: Sets outline color
• box-shadow: Can include color values
• text-shadow: Can include color values