CSS Colors

Visual Examples

What are CSS Colors?

CSS Colors define the appearance of elements on a web page. You can specify colors using named colors (e.g., red), hexadecimal codes (e.g., #ff0000), RGB, HSL, and even CSS color functions like rgba() for transparency. Colors enhance the design and user experience, guiding attention and creating mood.

CSS supports gradients, color variables, and wide-gamut color spaces for modern web designs. Combining colors effectively improves readability and visual hierarchy.

Example Colors

Red
Green
Blue
Yellow

Key Points

  • Use named colors, hex, RGB, or HSL formats for defining colors.
  • rgba() allows you to define transparency.
  • CSS gradients can create color transitions.
  • CSS Variables (--color-name) simplify color theming.
  • Modern CSS supports wide-gamut color spaces like color(display-p3 ...).