❮ Previous Next ❯

CSS Colors

  • Explore CSS color properties and learn how to style text, backgrounds, and elements effectively.
  • Bringing Life, Emotion & Meaning to Websites

  • What are CSS Colors ?

    CSS Colors are used to style:

    • Text

    • Backgrounds

    • Borders

    • Shadows

    • Buttons

    • Icons & layouts

    In simple words:

    Colors decide how your website FEELS.

    Website WITHOUT colors:

    • Boring & dull 

    • Hard to read 

    • Poor user experience 

    Website WITH correct colors:

    • Attractive & eye-catching 

    • Easy to read 

    • Professional & trustworthy 

    👉 Color = First Impression of your website

    WHY Do We Use CSS Colors ?

    Improve Readability 

    Good colors help users read comfortably without eye strain.

CSS Colors

CSS Colors are used to add color to text, backgrounds, borders, and other elements, making a website attractive, readable, and visually appealing. 

p {
    color: #333;
    background-color: #f5f5f5;
}

  • Dark text + light background = easy reading
    Light text + light background = headache 

    Example:
    Black ink on white paper - classic & comfortable.

    Create Visual Hierarchy 

    Colors guide users on what to read first.

Visual Hierarchy Using CSS Colors

CSS colors help create visual hierarchy by guiding users on what to notice first, making important content stand out clearly. 

h1 {
    color: #1a73e8;
}
p {
    color: #444;
}

  • Headings stand out
    Content looks organized
    User doesn’t feel lost

    Enhance User Experience (UX) 

    Colors create emotion & mood instantly.

    Color Psychology:

    • Blue → Trust, professionalism (banks, tech)

    • Green → Success, safety (payment success)

    • Red → Warning, danger (delete, error)

    Yellow → Energy, attention (offers)

    Color Types in CSS

    CSS gives us multiple powerful ways to define colors.

    Named Colors

    What are Named Colors ?

    Predefined color names supported by CSS.

Text and Background Color Styling

This CSS code changes the h1 text color to red and sets the

background color to yellow. 

h1 {
    color: red;
}
p {
    background-color: yellow;
}

  • Easy
    Beginner-friendly
    No numbers needed

    Limitations:

    • Limited shades

    • No fine control

    HEX Color Values (#)

    What is HEX ?

    A hexadecimal color system.

    Format:

    #RRGGBB

    • RR → Red

    • GG → Green

    • BB → Blue

    Range → 00 to FF

Using Hex Color Codes in CSS

This CSS code uses hexadecimal color values to set the h1 text color to red and the div background color to green. 

h1 {
    color: #ff0000; /* Red */
}
div {
    background-color: #00ff00; /* Green */
}

  •  ✔ Most popular
     ✔ Perfect control
     ✔ Used in real projects

    Short HEX:

    color: #fff; /* white */

    color: #000; /* black */

    Mixing paint — Red + Green + Blue = magic!

  • RGB & RGBA

    RGB (Red, Green, Blue)

    Each value: 0 – 255

RGB Color Format in CSS

This CSS code uses the RGB color format to set the paragraph p text color to blue. 

p {
    color: rgb(0, 0, 255);
}

  • TV & mobile screens use RGB pixels 

    RGBA (RGB + Alpha)

    Alpha = transparency

    • 0 → Invisible

    • 1 → Fully visible

RGBA Color Format

RGBA is an extension of RGB that adds an alpha value to control transparency, where 0 is fully transparent and 1 is fully visible. 

div {
    background-color: rgba(0, 0, 0, 0.5);
}

  • Semi-transparent black

    HSL & HSLA 

    HSL (Hue, Saturation, Lightness)

    • Hue → Color (0–360)

    • Saturation → Strength (%)

    • Lightness → Brightness (%)

HSL Color Format in CSS

This CSS code uses the HSL color format to set the h1 text color based on hue, saturation, and lightness values. 

h1 {
    color: hsl(200, 100%, 50%);
}
  • HSLA (HSL + Alpha)

HSLA Color Format

HSLA is an extension of HSL that includes an alpha value to control transparency, allowing you to set color with adjustable opacity. 

div {
    background-color: hsla(120, 60%, 50%, 0.6);
}

  • TRANSPARENCY IN CSS

    Transparency allows see-through effects.

    Supported by RGBA & HSLA

Transparency in CSS

Transparency in CSS creates see-through effects using RGBA or HSLA colors, allowing elements to have adjustable opacity. 

.overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

  • Common Use Cases:

    Modals
    Popups
    Overlays
    Background blur

    Best Practices for CSS Colors

    Use a Consistent Color Palette

CSS Variables (:root)

This code defines global CSS variables inside :root, allowing reusable color values that can be used throughout the stylesheet. 

:root {
    --primary: #1a73e8;
    --secondary: #fbbc05;
    --dark: #202124;
}

  • Clean look
    Brand identity
    Easy maintenance

    Ensure Good Contrast

    Accessible
    Comfortable reading

    Avoid Too Many Colors 

    Too many colors = confusion

    Fewer colors = clarity

    Golden Rule:

    Less colors = More professionalism

    Common Beginner Mistakes

    • Light text on light background

    • Overusing bright colors

    • Ignoring accessibility

    • Random color choices

Complete CSS Color Styling Example

This example demonstrates how different CSS color formats are used to style the background, heading, paragraph, and button to create a clean and visually appealing webpage. 

<!DOCTYPE html>
<html>
	<head>
	<style>
	body {
    	background-color: #f4f4f4;
	}
	h1 {
    	color: #1a73e8;
	}
	p {
    	color: #333;
	}
	button {
    	background-color: rgba(26, 115, 232, 0.9);
    	color: white;
	}
	</style>
	</head>
	<body>
		<h1>Welcome</h1>
		<p>This is a colorful CSS example.</p>
		<button>Click Me</button>
	</body>
</html>

  • Colors control emotion & usability

    HEX & RGB are most common

    RGBA & HSLA add transparency

    Good contrast = happy users 

    Consistency = professional design

❮ Previous Next ❯