Web Development - CSS Colors
CSS Colors
Colors make web pages vibrant and visually appealing. CSS provides several ways to specify colors for text, backgrounds, borders, and other elements.
Color Names
CSS supports more than 140 standard color names, like red, blue, green, and gold.
Example
Using color names:
h1 { color: red; }
p { color: green; }
div { background-color: lightblue; }
Try it Yourself »
HEX Values
Colors can also be defined using a hexadecimal (HEX) value that represents red, green, and blue intensity.
A HEX color starts with a # followed by six hexadecimal digits.
Example
Using HEX values:
h1 { color: #ff0000; } /* red */
p { color: #00ff00; } /* green */
div { background-color: #0000ff; } /* blue */
Try it Yourself »
You can also use shorthand HEX notation with three digits (e.g., #f00 is the same as #ff0000).
RGB Colors
The rgb() function defines colors using red, green, and blue values between 0 and 255.
Example
Using RGB:
h1 { color: rgb(255, 0, 0); }
p { color: rgb(0, 255, 0); }
div { background-color: rgb(0, 0, 255); }
Try it Yourself »
You can also use percentages instead of numbers:
rgb(100%, 0%, 0%) is pure red.
RGBA (Transparency)
The rgba() function adds an alpha channel for transparency.
The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully opaque).
This creates a semi-transparent red background.
HSL Colors
The hsl() function uses Hue, Saturation, and Lightness to define colors.
- Hue - the color type, from 0 to 360 (0=red, 120=green, 240=blue)
- Saturation - intensity of color (0% = gray, 100% = full color)
- Lightness - brightness (0% = black, 50% = normal, 100% = white)
Example
Using HSL:
h1 { color: hsl(0, 100%, 50%); } /* red */
p { color: hsl(120, 100%, 25%); } /* dark green */
div { background-color: hsl(240, 100%, 50%); } /* blue */
Try it Yourself »
HSLA (Transparency)
Like RGBA, hsla() adds an alpha value for transparency.
Applying Colors
You can use colors in many CSS properties:
color- changes text colorbackground-color- sets the background colorborder-color- defines the border color
Example
Using colors for text, background, and borders:
p { color: navy; background-color: lightgray; border: 2px solid black; padding: 8px; }
Try it Yourself »
Best Practices
- Use
colorandbackground-colorto apply colors. - Use HEX or HSL for consistent design control.
- Use RGBA or HSLA for transparency effects.
- Choose accessible color contrasts for readability.
- Define a color palette early for visual consistency.
Tip: You can find all available colors in our Colors Tutorial.
Tip: Use our online Color Picker to find specific HEX, RGB, or HSL values.
Next, you'll learn about CSS Backgrounds - how to use color, images, gradients, and positioning for stunning designs.
