CSS supports many ways to define colors.
Understanding these methods helps you design more professional websites.
The Four Main Ways to Define Colors
In CSS, you can define colors using:
- Color names
- HEX values
- RGB values
- HSL values
1. Color Names
CSS provides built-in color names such as red, blue, green, and black.
They are easy to use but limited in choice.
This changes the heading color to red.
2. HEX Color Values
HEX colors use a combination of numbers and letters.
They start with a # symbol.
#ff0000 represents red.
HEX values give you millions of color choices.
3. RGB Color Values
RGB stands for Red, Green, and Blue.
You define how much of each color is used.
This creates a green color using RGB values.
4. HSL Color Values
HSL stands for Hue, Saturation, and Lightness.
It describes colors in a more human-friendly way.
This creates a bright blue color using HSL.
Which Color Format Should You Use
- Use names for quick testing
- Use HEX or RGB for exact colors
- Use HSL for easy adjustments
Why This Matters for Jobs
Professional developers work with exact colors.
Knowing color formats helps you match designs perfectly.
Common Beginner Mistakes
- Forgetting the # in HEX colors
- Using wrong RGB values
- Mixing up HSL order
Practice Task
Try this:
- Change a heading using a color name
- Change a paragraph using HEX
- Change a button using RGB or HSL
What You Will Learn Next
In the next lesson, you will learn about text sizes and font units.