Quartz 4

CSS Colors

4 min read

Metadata

  • Date :: 13-04-2025
  • Tags :: web-dev

Notes

🎨 CSS Color Properties — Complete Study Notes

🧠 Why Are Colors Important in Web Design?

Colors are a fundamental part of web design. They:

  • Set the mood and tone of a site

  • Establish branding

  • Improve readability

  • Highlight important content

In CSS, colors are controlled using specific color properties applied to HTML elements.

🔑 Key CSS Color Properties

1. background-color

  • Changes the background color of an element.

  • Can be applied to any element (e.g., body, div, h1, button, etc.)

Example:

body {
  background-color: red;
}

This would make the entire page’s background red.

2. color

  • Controls the text color of an element.

Example:

h1 {
  color: blue;
}

This makes the main heading’s text color blue.

💡 Tip: Always double-check what each property controls. Use MDN (Mozilla Developer Network) Docs for a reliable reference.

🎨 Types of CSS Color Values

CSS supports different ways of expressing color. You can choose based on preference, flexibility, or design needs.

1. ✅ Named Colors

These are predefined color names you can use directly. There are 147 named colors supported in modern browsers.

Examples:

color: red;
background-color: cornflowerblue;
color: dimgrey;

Some fun named colors:

  • cadetblue

  • olivedrab

  • mintcream

  • darkkhaki

  • firebrick

  • whitesmoke

👉 Full list: MDN Named Colors

2. ✅ Hexadecimal (Hex) Codes

Hex codes are a compact way to represent colors using a base-16 number system.

Structure:

  • Starts with a #

  • Follows with six digits, where:

    • The first two digits = Red

    • Next two = Green

    • Last two = Blue

Example:

color: #5d3891;

This is a shade of purple made by mixing:

  • 93 Red

  • 56 Green

  • 145 Blue
    All out of 255

🔢 This color can also be written using the RGB system:
rgb(93, 56, 145)

Hex vs Named Example:

/* Same color, two methods */
color: mediumvioletred; /* Named */
color: #c71585;          /* Hex */

3. ✅ RGB and RGBA

RGB = Red, Green, Blue
RGBA = Red, Green, Blue, Alpha (transparency)

Example:

color: rgb(255, 0, 0);     /* Bright red */
color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */

This is more precise and allows use of opacity, which hex and named colors can’t directly do.

🎨 Where to Get Beautiful Color Palettes?

✅ ColorHunt.co

  • A free platform for curated color palettes

  • Created by designers for aesthetically pleasing combinations

  • Great for choosing colors for:

    • Background

    • Headings

    • Buttons

    • Accents

How to Use a Color From Color Hunt:

  1. Click the color box to copy the hex code (e.g., #f9f7f7)

  2. Paste it into your CSS

body {
  background-color: #f9f7f7;
}

💡 Designers often follow a structure in their palette:

  • 1 Main Background

  • 1 Headline Color

  • 1 Subheadline/Text Color

  • 1 Accent Color

🧪 Practical Challenge (Recap from Exercise)

You were given a basic site with a dull, black-and-white layout. Your challenge was to bring it to life using color, following these steps:

✅ Final Expected Output:

  • Background color of the page: antiquewhite (named color)

  • h1 text color: whitesmoke (named color)

  • h1 background color: tomato (named color or other)

  • h2 text color: Custom hex color (e.g., #6a0572)

  • h2 background color: Another hex color (e.g., #f2f2f2)

🛠 Code Example for the Exercise Solution

body {
  background-color: antiquewhite;
}
 
h1 {
  color: whitesmoke;
  background-color: tomato;
}
 
h2 {
  color: #6a0572;
  background-color: #f2f2f2;
}

🧠 The point of this exercise was to practice both named and hex colors and learn to style multiple properties (like background and text color) for the same element.

🧠 Summary & Key Takeaways

ConceptDescription
colorSets the text color
background-colorSets the background of an element
Named ColorsPredefined, readable (e.g., red, midnightblue)
Hex CodesPrecise color control (e.g., #ff5733)
RGB / RGBAUse when needing transparency or dynamic colors
Color HuntGreat tool for designer palettes

📚 Additional Tips

  • Use contrast wisely for readability (e.g., dark text on light background).

  • Try hover effects to use color dynamically:

button:hover {
  background-color: #ffcc00;
  color: black;
}
  • Use Chrome DevTools or Firefox Inspector to experiment with color changes live.

🚀 Coming Up Next

Now that you’ve learned to work with colors in depth, the next module will guide you through:

  • CSS Font Properties

  • Styling typography (font-family, size, weight, line-height)

  • Importing custom fonts using Google Fonts

References

Graph View

Backlinks