tools-only Color Wheel with Named Colors
Run the Color Wheel MicroSim Fullscreen{ .md-button .md-button--primary } 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:
<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:
- Remember - Recall common web-safe color names and their approximate positions on the color wheel
- Understand - Explain the relationship between a color's hue and its position on the color wheel
- Apply - Use appropriate named colors in web design projects
- 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:
- Find all the shades of blue
- Compare "Red" to "Crimson" to "DarkRed"
- Locate complementary colors (opposite sides of the wheel)
- Find colors with similar RGB values
Application (10 minutes)
Students choose a color scheme for a hypothetical website:
- Pick a primary color from the wheel
- Find 2-3 complementary or analogous colors
- 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.