CSS Colors

Introduction to CSS Colors

Adding color is one of the simplest ways to bring life to your web pages. In CSS, you can set colors using different formats such as color names, hex codes, RGB values, and HSL values. Let’s break each one down:

1. Color Names

CSS supports predefined color names for many standard colors like red, blue, green, and more. These are the easiest to remember and use.

Example:

h1 { color: red; }

This would make the heading text red.

2. Hex Codes

A hex code represents color using a combination of hexadecimal values. It starts with a # followed by six characters (numbers or letters from A to F). The first two characters represent red, the next two represent green, and the last two represent blue.

Example:

body { background-color: #f0f0f0; }

This sets a light gray background. Hex codes offer more precision compared to predefined color names.

3. RGB Values

RGB (Red, Green, Blue) values specify colors by setting each of the red, green, and blue components on a scale from 0 to 255.

Example:

p { color: rgb(255, 0, 0); }

This sets the paragraph text color to pure red (rgb(255, 0, 0) means 255 units of red, 0 green, and 0 blue).

You can also add transparency using RGBA where the A stands for alpha (opacity) ranging from 0 (fully transparent) to 1 (fully opaque).

Example:

div { background-color: rgba(0, 0, 255, 0.5); }

This sets a semi-transparent blue background.

4. HSL Values

HSL stands for Hue, Saturation, and Lightness. The hue represents the color’s angle on a color wheel (0-360), saturation defines the intensity (0% is grayscale, 100% is full color), and lightness sets the brightness (0% is black, 100% is white).

Example:

h2 { color: hsl(120, 100%, 50%); }

This sets the color to a bright green. The hsl(120, 100%, 50%) means a green hue (120 degrees), fully saturated (100%), and a 50% lightness (normal brightness).

Request more information

CSS Colors