Colors in CSS

CSS allows us to set colors for elements in different ways. We can use color names, HEX codes, RGB/RGBA values, and HSL/HSLA formats.

Using Color Names

CSS recognizes more than 140 predefined color names, such as 'red', 'blue', 'green'. These provide a quick and easily understandable solution.

HEX Colors

HEX codes contain the red, green, and blue components of a color. Format: #RRGGBB, where each component is a hexadecimal number between 00 and FF.

RGB and RGBA Colors

The RGB color model defines color by mixing red, green, and blue. RGBA adds an alpha channel that defines transparency.

HSL and HSLA Colors

The HSL (Hue, Saturation, Lightness) model defines color based on hue, saturation, and lightness. HSLA also includes an alpha channel for transparency.

Color Examples

The following squares contain the color name, HEX code, and RGB code.

Red

#FF0000

rgb(255, 0, 0)

Green

#00FF00

rgb(0, 255, 0)

Blue

#0000FF

rgb(0, 0, 255)

Purple

#800080

rgb(128, 0, 128)

Orange

#FFA500

rgb(255, 165, 0)

Cyan

#00FFFF

rgb(0, 255, 255)

Pink

#FFC0CB

rgb(255, 192, 203)

Yellow

#FFFF00

rgb(255, 255, 0)

Comparison of Color Formats

The following examples show how we can achieve the same color using different formats.

Tips for Using Colors

The correct choice of colors is important for the appearance of websites and also for accessibility.

Always ensure proper contrast between text and background colors.
RGBA and HSLA colors provide transparency, which can be especially useful in modern designs.
In large projects, it is advisable to use a consistent color palette to maintain a unified design.