CSS Colors
CSS colors are used to define the color of text, backgrounds, borders, and many other elements on a web page. CSS provides multiple ways to specify colors, giving developers great flexibility in design.
Where CSS Colors Are Used
- Text color
- Background color
- Border color
- Outline color
- Box shadow and gradients
Color Names
CSS supports predefined color names such as red, blue, green, and black. Color names are easy to use but limited in variety.
<!DOCTYPE html> <html> <body> <p style="color: red;">Red Color</p> <p style="color: green;">Green Color</p> <p style="color: blue;">Blue Color</p> <p style="color: orange;">Orange Color</p> <p style="color: purple;">Purple Color</p> </body> </html>Try this code
HEX Color Values
HEX colors are written using a hash (#) followed by six hexadecimal characters.
Each pair represents the intensity of Red, Green, and Blue colors.
Hex values range from 00 (minimum) to FF (maximum),
which equals 0 to 255 in decimal.
HEX Format
#RRGGBB
RR = Red
GG = Green
BB = Blue
Examples
#ff0000 → Red
#00ff00 → Green
#0000ff → Blue
#ffffff → White
#000000 → Black
Color Mixing Example
#ff00ff → Red + Blue = Purple
#ffff00 → Red + Green = Yellow
<!DOCTYPE html> <html> <body> <h3 style="color:#ff0000;">Red Color</h3> <h3 style="color:#ff00ff;">Purple Color</h3> </body> </html>Try this code
Short HEX Values (3-Digit Format)
If both digits in each pair are the same, you can use the shorter 3-digit format. Each digit is automatically doubled.
#f00 → #ff0000
#0f0 → #00ff00
#00f → #0000ff
#fff → #ffffff
#333 → #333333
<!DOCTYPE html> <html> <body> <h3 style="color:#f00;">Red Color</h3> <h3 style="color:#f0f;">Purple Color</h3> </body> </html>Try this code
RGB Color Values
RGB stands for Red, Green, and Blue. Each value ranges from 0 to 255.
<!DOCTYPE html> <html> <body> <h1 style="background-color: rgb(0, 128, 255);">Hello World</h1> <p style="background-color: rgb(0, 128, 255);">This is my first CSS page.</p> </body> </html>Try this code
RGBA Color Values
RGBA colors add an alpha channel to control transparency. The alpha value ranges from 0 (transparent) to 1 (opaque).
<!DOCTYPE html> <html> <body> <h2 style="background-color: rgba(0, 0, 0, 0.5);">This is my first CSS page.</h2> </body> </html>Try this code
HSL Color Values
HSL stands for Hue, Saturation, and Lightness. It provides a more intuitive way to control colors.
<!DOCTYPE html> <html> <body> <span style="color: hsl(120, 100%, 40%);">This is my first CSS page.</span> </body> </html>Try this code
HSLA Color Values
HSLA is similar to HSL but includes transparency.
<!DOCTYPE html> <html> <body> <h2 style="background-color: hsla(200, 80%, 50%, 0.7);">This is my first CSS page.</h2> </body> </html>Try this code
Background Color
The background-color property is used to set
the background color of an element.
<!DOCTYPE html> <html> <body> <h3 style="background-color:skyblue;">SkyBlue</h3> <h3 style="background-color:tomato;">Tomato</h3> <h3 style="background-color:orange;">Orange</h3> <h3 style="background-color:red;">Red</h3> </body> </html>Try this code
Text Color
The color property defines the color of text.
<!DOCTYPE html> <html> <body> <p style="color:red;">Danish</p> <p style="color:purple;">Danish</p> <p style="color:yellow;">Danish</p> </body> </html>Try this code
Best Practices for Using Colors
- Maintain good contrast for readability
- Use consistent color themes
- Avoid using too many colors
- Test colors for accessibility
Common Mistakes with CSS Colors
- Low contrast between text and background
- Overusing bright colors
- Using color alone to convey meaning