Skip to content

Color Wheel with Named Colors

Run the Color Wheel MicroSim Fullscreen
Edit the Color Wheel MicroSim with the p5.js editor

Embedding This MicroSim

You can include this MicroSim on your website using the following iframe:

1
<iframe src="https://dmccreary.github.io/claude-skills/sims/color-wheel-with-named-colors/main.html" height="462px" scrolling="no"></iframe>

Description

This interactive MicroSim displays a color wheel with dots representing over 80 web-safe named colors. Each color dot is positioned on the wheel based on its hue value, with the saturation determining how far from the center the dot appears.

When you hover over any color dot:

  • The color name is displayed in bold
  • The RGB values are shown (e.g., RGB(255, 0, 0))
  • The hexadecimal color code is displayed (e.g., #FF0000)
  • The hue angle in degrees is shown

Learning Objectives

After using this MicroSim, students will be able to:

  1. Remember - Recall common web-safe color names and their approximate positions on the color wheel
  2. Understand - Explain the relationship between a color's hue and its position on the color wheel
  3. Apply - Use appropriate named colors in web design projects
  4. Analyze - Compare similar colors and understand the differences in their RGB values

Color Organization

The colors are organized on the wheel according to their hue:

  • Reds (0-30 degrees): Red, Crimson, Tomato, Coral
  • Oranges (30-60 degrees): Orange, DarkOrange, Gold
  • Yellows (60-90 degrees): Yellow, Khaki, Chartreuse
  • Greens (90-150 degrees): Lime, Green, SeaGreen
  • Cyan-Blues (150-210 degrees): Cyan, Turquoise, SkyBlue
  • Blues (210-270 degrees): Blue, DodgerBlue, Navy
  • Purples (270-330 degrees): Purple, Violet, Magenta
  • Pinks (330-360 degrees): Pink, HotPink, DeepPink

Technical Details

  • Framework: p5.js
  • Number of Colors: 82 web-safe named colors
  • Color Positioning: Based on HSL color model hue and saturation
  • Responsive: Width-responsive design adapts to container size

Lesson Plan

Introduction (5 minutes)

Introduce students to the concept of named colors in web development. Explain that CSS supports over 140 named colors that can be used instead of hex codes or RGB values.

Exploration (10 minutes)

Have students explore the color wheel:

  1. Find all the shades of blue
  2. Compare "Red" to "Crimson" to "DarkRed"
  3. Locate complementary colors (opposite sides of the wheel)
  4. Find colors with similar RGB values

Application (10 minutes)

Students choose a color scheme for a hypothetical website:

  1. Pick a primary color from the wheel
  2. Find 2-3 complementary or analogous colors
  3. Note the color names and RGB values

Discussion (5 minutes)

Discuss when to use named colors vs. custom RGB/hex values. Named colors are easier to remember and read in code, but offer less precision than custom color values.