HTML Colors

Color Your All About Me Page

Mrs. Simmons-Fiawoo
6th Grade Computer Science

🎯Learning Objective

SWBAT (Students Will Be Able To):

Change at least 3 colors on their All About Me HTML page using both color names and hex codes.

Success Criteria:

Use color names (e.g., "blue", "red")
Use hex codes (e.g., #3366FF)
Apply colors to different elements

💭Warm-Up: Color Psychology

Look around the classroom!

Quick Write (2-3 sentences):

What color catches your eye first?
What feeling or mood does it create?
Why might a website use this color?

Red
Energy

Blue
Calm

Yellow
Happy

Green
Growth

What Are We Learning Today?

How do computers understand color?

1. Color Names

Simple words like:

"purple"
"orange"
"red"

2. Hex Codes

Special number codes like:

#FF5733
#3366FF
#00FF00

"red" = #FF0000

Step 1: Open Your Project

Instructions:

Open your All About Me HTML file from last class
Make sure you can see your code and preview

Teacher Checkpoint: ✓ Is everyone's file open?

You should see split-screen with your code editor and browser preview

Step 2: Pick Your Elements

Choose 3+ elements to color:

Page background (<body>)
Main heading (<h1>)
Subheadings (<h2>, <h3>)
Paragraph text (<p>)
Links (<a>)

Pro Tip: Start with big changes first (background and headings)!

Step 3: Add Color (Method 1)

Inline Style

Color added right inside the HTML tag

<h1 style="color: blue;">Welcome to My Page</h1>

<body style="background-color: lightgreen;">

<p style="color: #FF6347;">This is about me!</p>

When to use: Quick single changes

Step 3: Add Color (Method 2)

Internal CSS

All colors in one <style> section (cleaner!)

<style>
  body { background-color: #E6F3FF; }
  h1 { color: #2C5AA0; }
  p { color: #333333; }
</style>
            

When to use: Multiple colors across your page

Color Names vs. Hex Codes

Color Names	Hex Codes
Easy to remember	More color choices (16 million!)
Limited options (~140)	Used by professionals
Example: `red`	Example: `#FF0000`

How Hex Works: #RRGGBB (Red-Green-Blue values)
#FF0000 = pure red | #00FF00 = pure green | #0000FF = pure blue

Step 4: Experiment Time!

Time: 10-12 minutes

Your Mission:

Change at least 3 colors on your page
Try one color name AND one hex code
Make sure text is readable

Need inspiration? Try these palettes:

Ocean

#0077BE

Sunset

#FF6B6B

Forest

#2D5016

Common Mistakes to Avoid

❌ Don't:

Use light yellow text on white background (can't read!)
Forget the # symbol in hex codes
Put <style> tags inside <body>

✅ Do:

Test readability
Check spelling of color names
Keep <style> inside <head> section

Optional Challenges

Challenge 1: Image Border

Challenge 2: Hover Effect (Advanced)

<style>
  a:hover { color: purple; }
</style>
            

Challenge 3:

Create a color scheme that matches your personality!

Gallery Walk & Peer Feedback

Time: 5 minutes

Instructions:

Save your work
Visit 2-3 classmates' projects
Give one compliment about their color choices

Sentence Starters:

"I like how you used ___ because..."
"The ___ color makes me feel..."
"Your page looks ___ because of the colors."

📝Reflection (Exit Ticket)

Answer in your notebook:

Which color choice best represents YOU? Why did you pick it?
Was it easier to use color names or hex codes? Explain.
What's one thing you learned about color on the web?

Bonus: What color will you try next time?

Resources & Tools

🎨 HTML Color Codes

htmlcolorcodes.com

🌈 Coolors.co

Generate palettes

🎯 Adobe Color

color.adobe.com

📚 W3Schools

HTML Colors Guide

🚀Next Steps

Looking Ahead:

Next lesson: CSS Fonts & Text Styling
Keep experimenting with your page!
Think about: "What makes a website look professional?"

Optional Homework:

Find a website you like and identify 3 colors they use (screenshot + hex codes)