CSS Colors

on

 🎨 Understanding CSS Color Properties

We’ve already used some CSS properties to style HTML elements, but in this lesson, we’ll take a deep dive into some of the most important CSS color properties you’ll often see and use.


1. Background Color

You can use the background-color property to set the background color of any HTML element.

Example:

html {
  background-color: red;
}

Here:

  • background-color is the property

  • red is the value

This will make the entire webpage background red.

2. Text Color

The color property is used to change the text color.

Example:

h1 {
  color: blue;
}

3. Named Colors

Colors like red, blue, green are called Named Colors.
CSS also has many more named colors, for example:

  • cornflowerblue

  • cadetblue

  • dimgrey

  • olivedrab

You can find the full list of named colors on MDN Docs.

4. Using Custom Color Palettes

If you want a unique color combination instead of the default named colors, you can use free tools like colorhunt.co.
Here, you’ll find designer-made color palettes that look great together:

  • One color for the background

  • Another for headings (h1)

  • Another for subheadings (h2)

  • Accent tones for special elements

5. Hex Codes

Sometimes, colors don’t have names. Instead, they’re represented by a hex code — a mix of numbers and letters that represent RGB values (Red, Green, Blue).

Example:

  • Red = 93

  • Green = 56

  • Blue = 145

This combination creates a specific purple shade, written in hex as:

color: #5D3891;

Hex codes work exactly like named colors, just replace the name with the code.

Comments

Post a Comment