Beginner30 minutesCSSColorsDesignStyling

Working with Colors

Learn how to effectively use colors in your web designs using CSS

Learning Objectives

By the end of this lesson, you'll be able to:

  • ✓ Master RGB, hexadecimal, and HSL color notation systems
  • ✓ Apply Apply color theory principles to create harmonious color schemes
  • ✓ Use opacity and transparency effects with RGBA and HSLA
  • ✓ Create Create gradients and color transitions for visual interest
  • ✓ Ensure accessibility with proper color contrast ratios
  • ✓ Implement CSS custom properties for maintainable color systems
  • ✓ Build professional color palettes for real-world projects

Note: While many English-speaking countries (including Australia) spell "colour" with a "u", in web development we always use the American spelling "color". This is because CSS properties and values must use "color" to work correctly.

Color Theory

Understanding color theory is essential for creating visually appealing and effective web designs. Let's explore the fundamental concepts that will help you make better color choices.

RGB Color Model

The RGB color model is the foundation of digital color. It uses three primary colors:

  • Red
  • Green
  • Blue

How RGB Works

Each color component has a value from 0 to 255, where:

  • 0 means none of that color
  • 255 means the maximum amount of that color

Red (255, 0, 0)

Green (0, 255, 0)

Blue (0, 0, 255)

White (255, 255, 255)

Black (0, 0, 0)

The Color Wheel

The color wheel is a visual tool that helps us understand color relationships:

Primary Colors

The three primary colors are:

Red

Blue

Yellow

Secondary Colors

Secondary colors are created by mixing primary colors:

Purple (Red + Blue)

Green (Blue + Yellow)

Orange (Red + Yellow)

Color Harmony

Color harmony is about creating visually pleasing color combinations. Here are some common patterns:

Complementary Colors

Colors opposite each other on the color wheel:

Blue

Orange

Analogous Colors

Colors that are next to each other on the color wheel:

Red

Red-Orange

Orange

Understanding Color Models on the Color Wheel

0°90°180°270°

Inspired by Adobe Color Wheel

Color Models Compared

The color wheel helps us understand how different color models relate:

  • RGB (Red, Green, Blue)
    • Primary colors in light
    • Used by screens and digital devices
    • Values: 0-255 for each component
  • HSL (Hue, Saturation, Lightness)
    • Hue: Position on the wheel (0-360°)
    • Saturation: Distance from center (0-100%)
    • Lightness: Brightness (0-100%)
  • Traditional Color Wheel
    • Primary Colors: Red, Yellow, Blue
    • Secondary Colors: Orange, Green, Purple
    • Tertiary Colors: Mix of primary and secondary

Pro Tip: HSL is often more intuitive for designers as it matches how we think about color adjustments (changing hue, making colors more vibrant with saturation, or adjusting brightness with lightness).

CSS Colors

CSS provides several ways to specify colors. Each method has its own advantages and use cases.

Color Keywords

CSS includes predefined color keywords that you can use by name. While easy to remember, they offer limited color options.

red

blue

green

purple

Hexadecimal Colors

Hexadecimal (hex) colors use a # followed by six characters representing RGB values. Each pair of characters ranges from 00 to FF (0-255 in decimal).

#FF0000

#00FF00

#0000FF

Pro Tip: You can use shorthand hex codes when both digits in each pair are the same. For example, #FF0000 can be written as #F00.

RGB and RGBA Colors

RGB colors specify Red, Green, and Blue values directly. RGBA adds an Alpha channel for transparency.

rgb(255, 0, 0)

rgba(0, 0, 255, 0.5)

HSL and HSLA Colors

HSL (Hue, Saturation, Lightness) is often more intuitive for designers. HSLA adds an Alpha channel for transparency.

hsl(0, 100%, 50%)

hsla(240, 100%, 50%, 0.5)

Understanding HSL Values:

  • Hue: 0-360 degrees on the color wheel
  • Saturation: 0% (gray) to 100% (full color)
  • Lightness: 0% (black) to 100% (white)

Working with Backgrounds

CSS provides several properties to control background colors and effects. Let's explore how to use them effectively.

Background Color

The background-color property sets a solid color background for elements.

Light Blue Background

.element { background-color: #e3f2fd; }

Dark Blue Background

.element { background-color: #1a237e; }

Color Opacity

You can create semi-transparent backgrounds using RGBA or HSLA colors.

30% Opacity Blue

.element { background-color: rgba(33, 150, 243, 0.3); }

70% Opacity Blue

.element { background-color: rgba(33, 150, 243, 0.7); }

Pro Tip: Semi-transparent backgrounds are great for overlay effects and ensuring text remains readable on various background images.

Color Gradients

CSS gradients let you create smooth transitions between two or more colors.

Linear Gradient (Left to Right)

.element { background: linear-gradient(to right, #00c6ff, #0072ff); }

Radial Gradient

.element { background: radial-gradient(circle, #00c6ff, #0072ff); }

Common Gradient Types:

  • linear-gradient(): Creates a straight-line transition
  • radial-gradient(): Creates a circular transition
  • You can specify the direction and multiple color stops

Practical Examples

Let's explore some real-world examples of working with colors in CSS.

Creating Color Schemes

Understanding CSS Custom Properties (Variables)

CSS Custom Properties, also known as CSS Variables, allow you to store values that you can reuse throughout your stylesheet. They:

  • Start with two dashes (--) in their name
  • Are accessed using the var() function
  • Can be updated using JavaScript
  • Can be different for different screen sizes using media queries

Basic Syntax:

/* Defining a custom property */
:root {
	--my-color: blue;
}

/* Using a custom property */
.element {
	color: var(--my-color);
}

Note: While we're using CSS Custom Properties for colors in this tutorial, they can be used with any CSS value - including sizes, spacing, animations, and more. We'll explore these other uses in future tutorials!

For example:

:root {
	--spacing-unit: 1rem;
	--main-font: 'Arial', sans-serif;
	--animation-speed: 0.3s;
	--border-style: 2px solid black;
}

Using CSS custom properties to create a consistent color scheme makes it easier to maintain and update your design. Let's see how to implement this:

Color Scheme Example

Main content area with primary colors

Pro Tip: Define your color scheme using CSS variables in the :root selector to make them globally available.

Text and Background Contrast

Ensuring good contrast between text and background colors is crucial for readability and accessibility.

Good Contrast

Ratio: 7:1

Poor Contrast

Ratio: 2.5:1

Accessibility Tip: WCAG guidelines recommend:

  • Minimum contrast ratio of 4.5:1 for normal text
  • Minimum contrast ratio of 3:1 for large text
  • Higher contrast (7:1) for enhanced accessibility

Working with Brand Colors

Learn how to effectively use and maintain brand colors across your website.

Primary#3b82f6
Secondary#f59e0b
Accent#10b981

Best Practices:

  • Define brand colors as CSS variables
  • Include lighter and darker variants
  • Consider color accessibility from the start

⏸️ Pause & Check: Do You Understand?

Before moving forward, can you answer these?

  1. What is the difference between HEX, RGB, and HSL color formats?
  2. How do CSS custom properties (variables) help with color systems?
  3. When would you use color versus background-color?
  4. What is contrast ratio and why is 4.5:1 important?
Check Your Answers
  1. HEX uses hexadecimal values (#RRGGBB), RGB uses numeric values from 0-255 (rgb(114, 47, 55)), and HSL defines colors with hue (0-360°), saturation (%), and lightness (%). Choose the format that makes adjustments easiest for the situation.
  2. Defining colors as custom properties (e.g., :root { --brand-primary: #722f37; }) centralizes your palette. Reuse colors consistently, update themes in one place, and create light/dark modes without hunting through every rule.
  3. color sets the text (foreground) color, while background-color sets the element's background. Use them together to ensure adequate contrast. For buttons and cards, background-color defines the block, and color keeps text readable.
  4. Contrast ratio measures the difference between text and background colors. WCAG recommends at least 4.5:1 for normal text and 3:1 for large text to ensure readability for users with low vision or when viewing screens in bright light.

How confident are you with this concept?

😕 Still confused | 🤔 Getting there | 😊 Got it! | 🎉 Could explain it to a friend!

Practical Exercises

Let's apply what we've learned about colors to our example websites.

Note: Complete the basic exercises to finish this tutorial. Advanced challenges are optional but will help deepen your understanding of color in web design.

Exercise 1: Black Swan Bistro

Create a sophisticated color scheme for the Black Swan Bistro website.

Basic Exercise

Primary Color

#722F37

Accent Color

#C1A35F

Background

#F5F5F5

Advanced Challenge

Header Gradient

Overlay Color

rgba(114, 47, 55, 0.7)

Black Swan Bistro Color Guide

Primary Colors
  • Primary: #722F37 (Deep Burgundy) - Headers, navigation background
  • Primary Light: #8B3B44 - Hover states, highlights
  • Primary Dark: #5A252C - Active states, gradient ends
  • Accent: #C1A35F (Gold) - Call-to-action buttons, special highlights
Text Colors
  • Main Text: #333333 - Body text
  • Light Text: #FFFFFF - Text on dark backgrounds
  • Muted Text: #666666 - Secondary information
Background Colors
  • Main Background: #FFFFFF - Content areas
  • Secondary Background: #F5F5F5 - Alternative sections
  • Overlay: rgba(114, 47, 55, 0.7) - Image overlays
Gradients
  • Header Gradient: linear-gradient(to right, #5A252C, #722F37)
Layout Preview
Black Swan Bistro MenuAboutContact Fine Dining Experience Book Now Our Menu Primary Color: #722F37Accent: #C1A35F

Exercise 2: Personal Profile Page

Create a professional, readable colour scheme for Alex Chen's Personal Profile Page.

Basic Exercise

Dark Navy

#2C3E50

Light Grey

#F8F9FA

Medium Blue

#3498DB

Advanced Challenge

Profile Gradient

Overlay Color

rgba(44, 62, 80, 0.7)

Personal Profile Page Colour Guide

Primary Colors
  • Dark Navy: #2C3E50 - Headings and key text
  • Medium Blue: #3498DB - Links and accents
  • Light Grey: #F8F9FA - Section backgrounds
  • White: #FFFFFF - Content cards and clean contrast
Text Colors
  • Main Text: #2C3E50 - Body text
  • Light Text: #FFFFFF - Text on dark backgrounds
  • Muted Text: #6C757D - Secondary information
Background Colors
  • Light Grey: #F8F9FA - Main background
  • Soft Blue Tint: #EAF4FB - Secondary background
  • Card Background: #FFFFFF - Content cards
  • Overlay: rgba(44, 62, 80, 0.7) - Hero overlays
Gradients
  • Profile Gradient: linear-gradient(135deg, #2C3E50, #3498DB)
Layout Preview
Discover Rottnest Island ActivitiesGalleryBook Snorkeling Cycling Ocean: #1E88E5Sand: #F5E6D3Coral: #FF6F61

Accessibility Checklist

Good Contrast

4.5:1 or higher

Poor Contrast

Avoid this!

Remember: Use tools like the WebAIM Contrast Checker to verify your color choices meet accessibility standards.

Lesson checkpoint

Test Your Knowledge

5 questions

Strengthen your understanding of Colors by answering the quiz below.

Colors Quiz

Test your understanding of Colors concepts.

Lesson Complete: What You Learned

Key Takeaways:

  • CSS supports multiple color models (HEX, RGB, HSL, named colors) for precise control
  • CSS custom properties help manage consistent color palettes and enable theming
  • color affects text, background-color affects element backgrounds—use both for contrast
  • Gradients, transparency, and overlays add depth while maintaining readability
  • Accessible color contrast (4.5:1 for text) is required for inclusive design
  • Global color tokens make large projects easier to maintain

Learning Objectives Review:

Look back at what you set out to learn. Can you now:

  • ✅ Choose appropriate color formats for different scenarios Check!
  • ✅ Create and use CSS custom properties for palettes Got it!
  • ✅ Apply colors to text, backgrounds, borders, and gradients Can explain it!
  • ✅ Ensure accessibility with contrast checking tools Could teach this!
  • ✅ Build cohesive brand palettes for sample projects Check!

If you can confidently answer "yes" to most of these, you're ready to move on!

Think & Reflect:

Design Intent

Color choices influence emotion and usability. Tie palettes to brand adjectives and ensure they work consistently across UI components.
  • How do your color choices support the story or brand?
  • Which colors communicate trust, excitement, or calm?

Accessibility Lens

Accessible colors improve readability for everyone. Consider color blindness simulators and provide non-color cues (icons, text) for state changes.
  • Have you tested your palette with a contrast checker?
  • How would your colors appear to someone with color vision deficiency?

🤔 Real-World Test:

Brand guidelines from companies like Airbnb, Shopify, and Spotify rely on carefully curated color systems powered by CSS variables. Product teams use palettes to signal states (success, warning, danger) and to create memorable identities. Mastering CSS colors lets you implement and maintain these systems at scale.

Advanced workflows use design tokens synced between design tools and code. Your ability to translate a palette into reusable CSS variables and utility classes makes collaboration with designers seamless.

🎯 Looking Ahead:

Next up: Flexbox. After learning colors and typography, you're ready to master modern layout systems. Flexbox unlocks responsive navigation bars, cards, and component alignment with minimal code.

Understanding color foundations ensures your layouts are both functional and visually polished.

Recommended Next Steps

Continue Learning

Ready to move forward? Continue with the next tutorial in this series:

Box Model

Related Topics

Explore these related tutorials to expand your knowledge:

Selectors & PropertiesBox ModelIntroduction to CSS

Practice Projects

Apply what you've learned with these hands-on projects:

Enhanced Todo List

Add color schemes and visual hierarchy to your todo list

CSSIntermediateColors
Start Project

Additional Resources

Deepen your understanding with these helpful resources:

Progress tracking is disabled. Enable it in to track your completed tutorials.

Cookie Settings

Required

These cookies are necessary for the website to function and cannot be switched off.

Recommended

These cookies allow us to track your progress through tutorials and remember where you left off.

These cookies allow us to remember your preferences and settings.

Selectors & Properties
Box Model