Colors HOME
Introduction to CSS colors and how they work on the web
Welcome to CSS Colors
Colors are one of the most important aspects of web design. CSS provides multiple ways to define colors, from simple named colors like red and blue to precise numeric formats like #FF6347 and rgb(255, 99, 71).
Understanding how colors work in CSS gives you complete control over the visual appearance of your web pages — from backgrounds and text to borders, shadows, and gradients.
Color Format Overview
CSS offers several ways to specify colors. Each format has its own strengths and use cases. Here are all the formats you can use:
| Format | Example | Description |
|---|---|---|
| Named Color | tomato | Use a predefined CSS color name |
| HEX | #FF6347 | 6-digit hexadecimal (Red, Green, Blue) |
| HEX (short) | #F00 | 3-digit shorthand hexadecimal |
| RGB | rgb(255, 99, 71) | Red, Green, Blue values (0–255) |
| RGBA | rgba(255, 99, 71, 0.5) | RGB with Alpha transparency |
| HSL | hsl(9, 100%, 64%) | Hue, Saturation, Lightness |
| HSLA | hsla(9, 100%, 64%, 0.5) | HSL with Alpha transparency |
Try It — Change the Color
Pick a color and see how it looks as a CSS background. Switch between different formats to see how the same color is represented:
<!DOCTYPE html> <html> <body> <div style=" background-color: #FF6347; color: #000000; padding: 40px; text-align: center; font-size: 24px; border-radius: 12px; "> I have a beautiful background! </div> </body> </html>
Common CSS Colors
Here are 24 of the most commonly used CSS colors. Click any color to see its values:
How Colors Work in Web Design
Colors in CSS are used in many properties. Here are the most common ones:
/* Background color */
body { background-color: #f0f0f0; }
/* Text color */
h1 { color: navy; }
/* Border color */
.card { border: 2px solid #3498db; }
/* Box shadow with color */
.button { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
/* Gradient backgrounds */
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* Semi-transparent overlays */
.overlay { background-color: rgba(0, 0, 0, 0.5); }Color in Typography
Choosing the right text color is crucial for readability. The contrast between text and background colors must meet accessibility standards — at least 4.5:1 for normal text and 3:1 for large text (WCAG 2.1 guidelines).
Color Psychology in Web Design
Colors carry psychological meanings and can influence how users perceive your website: