? Colors in CSS — Complete Overview

Colors are essential in CSS to style text, backgrounds, borders, shadows, and more.

Ways to Specify Colors in CSS

1. Color Keywords

• Named colors like red, blue, green, salmon, orange.

• Easy to remember and use.

color: navy;background-color: lightyellow;

2. Hexadecimal (Hex) Colors

• Format: #RRGGBB or shorthand #RGB.

• Values are hexadecimal (0–9, A–F).

color: #ff5733;background-color: #0f0; /* shorthand for #00ff00 */

3. RGB Colors

• Format: rgb(red, green, blue)

• Each value is between 0–255.

color: rgb(255, 165, 0); /* orange */

4. RGBA Colors

• RGB + alpha for opacity.

• Alpha ranges 0 (transparent) to 1 (opaque).

color: rgba(255, 0, 0, 0.5); /* semi-transparent red */

5. HSL Colors

• Format: hsl(hue, saturation%, lightness%)

• Hue: 0-360 degrees on color wheel.

• Saturation and lightness in percentages.

color: hsl(120, 100%, 50%); /* green */

6. HSLA Colors

• HSL + alpha for transparency.

color: hsla(240, 100%, 50%, 0.3); /* semi-transparent blue */

7. Transparent Keyword

background-color: transparent;

Using Colors in CSS Properties

• color — text color

• background-color — background fill

• border-color — border color

• box-shadow — shadow color

• text-shadow — shadow for text

Example:

button {  color: white;  background-color: #007bff;  border: 2px solid #0056b3;  box-shadow: 0 4px 6px rgba(0,0,0,0.1);}

Tips for Working with Colors

• Use contrast for readability.

• Use opacity (rgba/hsla) for layering effects.

• Use CSS variables for consistent theming:

:root {  --primary-color: #3498db;}button {  background-color: var(--primary-color);}

If you'd like, I can help you create a color palette, show color contrast checking, or generate CSS for gradients and effects!